如何选择当前正在播放的MediaStreamTrack？

Question

我有一个MediaStream与一个音频轨道和2个视频轨道。此流是通过将来自navigator.mediaDevices.getUserMedia的音频和视频轨道与来自navigator.mediaDevices.getDisplayMedia的视频轨道相结合来创建的。

var camStream = await navigator.mediaDevices.getUserMedia({audio: true, video: true, width: "1280"});
var screenStream = await navigator.mediaDevices.getDisplayMedia({video: true, width: "1280"});
var screenTrack = screenStream.getVideoTracks()[0];

camStream.addTrack(screenTrack);

在这一点上，camStream有1个音频轨道和2个视频轨道。

我有一个HTML <video id="local-video"></video>，通过设置srcObject属性来播放流：

document.getElementById("local-video").srcObject = camStream;

问题是我不能选择演奏哪一首曲目。camStream视频轨道总是在screenStream视频轨道上播放。是否有一种方法可以将两个视频轨道都保存在流中，但选择当前在视频元素中播放的一个？

到目前为止，唯一起作用的是从流中删除一个视频轨道，以便另一个可以播放，但我希望将两个视频轨道都保存在流中，这样我就可以切换b/w了。

Answer 1

MediaElement.videoTracks和MediaElement.audioTracks应该是解决这个问题的通用解决方案，但是浏览器支持到今天还不是很好，因为没有浏览器真正支持这一点，也没有一个浏览器支持MediaStreams .

下面是一个片段，展示了它应该是怎样的，但这是为了将来。

​

const vid = document.querySelector("video");
const btn = document.querySelector("button");
const track1 = makeVideoTrack("red");
const track2 = makeVideoTrack("blue");

const stream = new MediaStream([track1, track2]);
vid.srcObject = stream;

btn.onclick = () => {
  // setting one track to selected will unselect the previously selected one
  // so we need to grab the current state to switch it
  const state = vid.videoTracks[0].selected;
  vid.videoTracks[1].selected = state;
  vid.videoTracks[0].selected = !state;
};

function makeVideoTrack(color) {
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  ctx.fillStyle = color;
  let x = 0;
  const anim = () => {
    x = (x + 1) % canvas.width;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillRect(x-5, 0, 10, canvas.height);
    requestAnimationFrame( anim );
  };
  anim();
  return canvas.captureStream().getVideoTracks()[0];
}

<video controls autoplay muted></video>

<button>switch video track</button>

​

对于今天，在您可以访问的情况下，可以做的是构建一个只包含您想要的videoTrack的新MediaStream。(人们可能会试图重新排序这些轨迹，但这只适用于当前的Chrome和火狐和规格，表明我们不应该依赖这种行为)

​

const vid = document.querySelector("video");
const btn = document.querySelector("button");
const tracks = [makeVideoTrack("red"), makeVideoTrack("blue")];
let selected_index = 0;
vid.srcObject = new MediaStream([ tracks[selected_index] ]);

btn.onclick = () => {
  selected_index = (selected_index + 1) % tracks.length
  vid.srcObject = new MediaStream([ tracks[selected_index] ]);
};

function makeVideoTrack(color) {
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  ctx.fillStyle = color;
  let x = 0;
  const anim = () => {
    x = (x + 1) % canvas.width;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillRect(x-5, 0, 10, canvas.height);
    requestAnimationFrame( anim );
  };
  anim();
  return canvas.captureStream().getVideoTracks()[0];
}

<video controls autoplay muted></video>

<button>switch video track</button>

​