如何将MediaStreamTrack创建并添加到媒体流中

Question

我想知道如何将MediaStreamTrack生成并添加到MediaStream中。我找不到一种方法来添加或制作一个，所以我被困住了。请帮帮忙。谢谢!

Answer 1

步骤1:生成轨道.

const userMedia = await navigator.mediaDevices.getUserMedia({audio : true, video : true});

const videoTrack = userMedia.getVideoTracks()[0];
const audioTrack = userMedia.getAudioTracks()[0];

步骤2:创建一个MediaStream并向它们添加曲目。

const stream = new MediaStream();
stream.addTrack(videoTrack);
stream.addTrack(audioTrack);

现在，您可以将该MediaStream用作您想要的任何东西。

可以在HTML中呈现流，在HTML中创建一个视频元素，并将它的id设置为"localVideo“(它是可选的，可以任意设置)。若要将流附加到该视频元素，请使用：

const videoElement = document.getElementById("localVideo");
videoElement.srcObject = userMedia;
videoElement.play();

注意: navigator.mediaDevices.getUserMedia还返回一个MediaStream。因此，第一步和第二步的心态没有差别。

重要注意事项:如果您将“静音”道具设置为视频元素的false，则在大多数情况下您无法自动播放它。如果您想自动播放视频，而不需要任何用户交互到窗口，您必须设置静音真。

如果您想获得屏幕记录轨道，请使用：

const screenMedia = await navigator.mediaDevices.getDisplayMedia();