894556 - Multiple video tracks in a MediaStream are not reflected on the videoTracks object on the video element


私は複数のビデオストリーム(デスクトップとウェブカム)を持っています。私はワンビデオ要素のビデオストリームを切り替えることができるようにしたいので、Webカメラとデスクトップを素早く切り替えることができ、 MediaRecorderを破ることはできません。

あなたが videoTracksオブジェクトのselectedプロパティを <video>要素が含まれていますが、トラックの配列に含まれる要素は1つだけです(MediaStreamの最初のビデオトラック)。

What steps will reproduce the problem? (1) Get two MediaStreams with video tracks (2) Add them to a new MediaStream and attach as srcObject on a videoElement (3) Check the videoElement.videoTracks object and see there is only one track

Demo at https://multiple-tracks-bug.glitch.me/

What is the expected result? I would expect videoElement.videoTracks to have two elements.

What happens instead? It only has the first videoTrack that was added to the MediaStream.


Repro case。

window.onload = () => {
  if('getDisplayMedia' in navigator) warning.style.display = 'none';

  let blobs;
  let blob;
  let rec;
  let stream;
  let webcamStream;
  let desktopStream;

  captureBtn.onclick = async () => {

    desktopStream = await navigator.getDisplayMedia({video:true});
    webcamStream = await navigator.mediaDevices.getUserMedia({video: { height: 1080, width: 1920 }, audio: true});
    // Always 
    let tracks = [...desktopStream.getTracks(), ... webcamStream.getTracks()]
    console.log('Tracks to add to stream', tracks);
    stream = new MediaStream(tracks);
    console.log('Tracks on stream', stream.getTracks());
    videoElement.srcObject = stream;
    console.log('Tracks on video element that has stream', videoElement.videoTracks)
    // I would expect the length to be 2 and not 1


Paul Kinlan

Trying to make the web and developers better.

RSS Github Medium