Javascript Twilio-为屏幕共享视频添加属性
我正在使用以下代码获取媒体并发布曲目:Javascript Twilio-为屏幕共享视频添加属性,javascript,twilio,twilio-api,twilio-video,Javascript,Twilio,Twilio Api,Twilio Video,我正在使用以下代码获取媒体并发布曲目: const stream = await navigator.mediaDevices.getDisplayMedia(); let screenTrack = new Twilio.Video.LocalVideoTrack(stream.getTracks()[0]); room.localParticipant.publishTrack(screenTrack); screenTrack.once('stopped', () =>
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?有多种方法可以实现这一点,我使用的方法是这样的
const $screenShareID = "screenshare";
let screenTrack new Twilio.Video.LocalVideoTrack(stream.getTracks()[0], { name: $screenShareID });
第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
}}
这不是完整的代码,只是我所做工作的一个示例。使用它,我可以设置属性和其他自定义功能