Question

jsfiddle（https://jsfiddle.net/kalyansai99/mm1b74uy/22/）包含用户可以在移动设备的前后摄像头之间切换的代码。

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

不确定是什么时候发生的。有线索吗？

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>

Answer 1

将track.stop()替换为track.enabled=false，在向流添加跟踪时，使用track.enabled=true

启用它

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

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

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

在播放流之前，StreamTrack的readyState正在变为已结束（MediaStream - MediaStreamTrack - WebRTC）

1 个答案: