StreamTrack 的 readyState 在播放流之前被更改为已结束（MediaStream - MediaStreamTrack - WebRTC）

Question

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

在少数手机（Moto g5 plus、Moto E3 等 - Chrome 浏览器）和少数手机（Mi Redimi Note 4 - Chrome 浏览器）中，当我切换到后置摄像头时，它的工作正常，最初流正在加载轨道“readyState”作为“live”。但是当我要在视频播放器中播放流时，“readyState”变为“已结束”并且视频标签上显示黑屏。

不知道发生了什么。有什么线索吗？

JSF 中间代码

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>

Answer 1

更换track.stop()到track.enabled=false并添加轨道的流时，能回用track.enabled=true

MediaStream.readyState当我们停止轨道并且永远不能再次使用时，该属性将更改为“已结束”。因此使用 stop 是不明智的。更多参考：

https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack/readyState

https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack/stop