在播放流之前，StreamTrack的readyState即将更改为结束(MediaStream-MediaStreamTrack-WebRTC) [英] StreamTrack's readyState is getting changed to ended, just before playing the stream (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>

推荐答案

将track.stop()替换为track.enabled=false，并且在向流中添加曲目时，请使用track.enabled=true

Replace track.stop() to track.enabled=false and when adding track to the stream, enable it back using track.enabled=true

当我们停止跟踪时，MediaStream.readyState属性将更改为结束"，并且永远无法再次使用.因此，使用停止是不明智的.有关更多参考:

The MediaStream.readyState property is changed to "ended" when we stop the track and can never be used again. Therefore its not wise to use stop. For more reference:

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)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！