javascript - 如何创建 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。所以第1步和第2步的心态没有区别。

重要提示:如果将视频元素的“muted”属性设置为 false，则在大多数情况下无法自动播放。如果您想自动播放视频而不需要任何用户与窗口交互，则必须将 muted 设置为 true。

如果你想获取屏幕录制轨迹，请使用:

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