如何解决Twilio - 为屏幕共享视频添加属性
我使用以下代码来获取媒体并发布曲目:
const stream = await navigator.mediaDevices.getDisplayMedia();
let screenTrack = new Twilio.Video.LocalVideoTrack(stream.getTracks()[0]);
room.localParticipant.publishTrack(screenTrack);
screenTrack.once('stopped',() => {
room.localParticipant.unpublishTrack(screenTrack);
screenTrack.stop();
screenTrack = null;
});
这是添加曲目时我使用的内容:
participant.on('trackAdded',track => {
let div = document.createElement("div");
let participantAttr = document.createAttribute("participant-sid");
participantAttr.value = `${participant.sid}`;
div.setAttributeNode(participantAttr);
document.getElementById('remote-media-div').appendChild(div);
div.appendChild(track.attach());
});
问题是当添加 div(新轨道)时,无论是屏幕视频还是网络摄像头视频,它都具有相同的属性,当我需要对屏幕视频执行操作时,我无法区分两者使用 JavaScript。
如何为屏幕共享 div/video 分配特殊属性(如 screen=true)?
解决方法
有多种方法可以实现这一点,我使用的方法是这样的
第 1 步: 像这样创建屏幕共享轨道
const $screenShareID = "screenshare";
let screenTrack new Twilio.Video.LocalVideoTrack(stream.getTracks()[0],{ name: $screenShareID });
第 2 步:将轨道附加到 DOM 时,检查轨道种类和轨道 ID,即
if (track.kind === 'video') {
if (trackid === $screenShareID) {
//your code here to set the attributes for the Div
const domEle = track.attach();
domEle.setAttribute('id',trackid);
$media.append(domEle);//media here is the div element you can replace it with your own
}}
这不是完整的代码,只是我所做的一个示例。使用它,我还可以设置属性和其他自定义功能。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。