在播放流之前，StreamTrack的readyState即将更改为结束(MediaStream-MediaStreamTrack-WebRTC)

本文介绍了在播放流之前，StreamTrack的readyState即将更改为结束(MediaStream-MediaStreamTrack-WebRTC)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

jsfiddle( https://jsfiddle.net/kalyansai99/mm1b74uy/22/)包含的代码，用户可以在该代码中在手机的前后摄像头之间进行切换.

The jsfiddle (https://jsfiddle.net/kalyansai99/mm1b74uy/22/) contains code where the user can toggle between front and back camera of the mobile.

当我切换回后置摄像头时，在少数移动设备上工作正常(Moto g5 plus，Moto E3等-Chrome浏览器)，而在少数移动设备(Mi Redimi Note 4-Chrome浏览器)上，最初该流正在加载跟踪"readyState"为实时".但是，当我要在视频播放器中播放流时，"readyState"将变为"end"，并且视频标签上会显示黑屏.

In few mobiles its working fine (Moto g5 plus, Moto E3 and so on - Chrome Browser) and in few mobiles (Mi Redimi Note 4 - Chrome Browser) when I am switching to back camera, initially the stream is loading with a track of "readyState" as "live". But when i am about to play the stream in video player, the "readyState" is getting changed to "ended" and black screen is been shown on the video tag.

不确定发生了什么.有任何线索吗?

Not sure whats happening. Any clues?

JSFiddle代码

JSFiddle Code

var player = document.getElementById('player');
var flipBtn = document.getElementById('flipBtn');
var deviceIdMap = {};
var front;

var constraints = {
    audio: false,
    video: {
        frameRate: 1000
    }
};

var gotDevices = function (deviceList) {
    var length = deviceList.length;
    console.log(deviceList);
    for (var i = 0; i < length; i++) {
        var deviceInfo = deviceList[i];
        if (deviceInfo.kind === 'videoinput') {
            if (deviceInfo.label.indexOf('front') !== -1) {
                deviceIdMap.front = deviceInfo.deviceId;
            } else if (deviceInfo.label.indexOf('back') !== -1) {
                deviceIdMap.back = deviceInfo.deviceId;
            }
        }
    }
    if (deviceIdMap.front) {
        constraints.video.deviceId = {exact: deviceIdMap.front};
        front = true;
    } else if (deviceIdMap.back) {
        constraints.video.deviceId = {exact: deviceIdMap.back};
        front = false;
    }
    console.log('deviceIdMap - ', deviceIdMap);
};

var handleError = function (error) {
    console.log('navigator.getUserMedia error: ', error);
};

function handleSuccess(stream) {
    window.stream = stream;
    // this is a video track as there is no audio track
    console.log("Track - ", window.stream.getTracks()[0]);
    console.log('Ready State - ', window.stream.getTracks()[0].readyState);
    if (window.URL) {
        player.src = window.URL.createObjectURL(stream);
    } else {
        player.src = stream;
    }
    player.onloadedmetadata = function (e) {
    		console.log('Ready State - 3', window.stream.getTracks()[0].readyState);
        player.play();
        console.log('Ready State - 4', window.stream.getTracks()[0].readyState);
    }
    console.log('Ready State - 2', window.stream.getTracks()[0].readyState);
}

navigator.mediaDevices.enumerateDevices().then(gotDevices).catch(handleError);

flipBtn.addEventListener('click', function () {
		if (window.stream) {
      window.stream.getTracks().forEach(function(track) {
        track.stop();
      });
    }
  	if (front) {
      constraints.video.deviceId = {exact: deviceIdMap.back};
    } else {
      constraints.video.deviceId = {exact: deviceIdMap.front};
    }
  	front = !front;
  	navigator.getUserMedia(constraints, handleSuccess, handleError);
}, false);

console.log(constraints);
navigator.getUserMedia(constraints, handleSuccess, handleError);

#player {
  width: 320px;
}

#flipBtn {
  width: 150px;
  height: 50px;
}

<video id="player" autoplay></video>

<div>
  <button id="flipBtn">
      Flip Camera
  </button>
</div>

在播放流之前

在播放流之前，StreamTrack的readyState即将更改为结束(MediaStream-MediaStreamTrack-WebRTC)

问题描述

推荐答案