如何解决如何选择当前正在播放的 MediaStreamTrack?
我有一个带有 1 个音轨和 2 个视频轨的 MediaStream
。此流是通过将来自 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 视频轨道上播放。 有没有一种方法可以让我在流中保留两个视频轨道,但选择当前正在视频元素中播放的一个?
到目前为止,唯一有效的是从流中删除一个视频轨道,以便另一个可以播放,但我想将两个视频轨道都保留在流中,以便我可以切换黑白它们.
解决方法
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,canvas.width,canvas.height);
ctx.fillRect(x-5,10,canvas.height);
requestAnimationFrame( anim );
};
anim();
return canvas.captureStream().getVideoTracks()[0];
}
<video controls autoplay muted></video>
<button>switch video track</button>
今天,在您可以访问 MediaStream 的情况下,在您的情况中可以做的是构建一个仅包含您想要的 videoTrack
的新 MediaStream。 (人们可能只想重新排列这些曲目,但这仅适用于当前的 Chrome 和 Firefox,specs 明确表示我们不应依赖这种行为)
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,canvas.height);
requestAnimationFrame( anim );
};
anim();
return canvas.captureStream().getVideoTracks()[0];
}
<video controls autoplay muted></video>
<button>switch video track</button>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。