webrtc - 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」を「ライブ」として。しかし、ビデオプレーヤーでストリームを再生しようとすると、「readyState」が「終了」に変更され、ビデオタグに黒い画面が表示されます。

何が起こっているのかわからない。手がかりはありますか？

JSFiddle コード

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>