javascript Twilio -为屏幕共享视频添加属性

zazmityj 于 2022-12-17 发布在 Java

关注(0)|答案(1)|浏览(120)

我使用下面的代码来获取媒体并发布曲目：

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）？

JavaScript

来源：https://stackoverflow.com/questions/65586817/twilio-add-attribute-to-screensharing-video

1条答案

按热度按时间

dxxyhpgq1#

有多种方法可以实现这一点，我使用的方法是这样的

**第1步：**创建屏幕共享轨迹，如下所示

const $screenShareID = "screenshare";
let screenTrack new Twilio.Video.LocalVideoTrack(stream.getTracks()[0], { name: $screenShareID });

**第2步：**将曲目附加到DOM时，检查曲目种类和trackId，即

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 
}}

这不是完整的代码，只是我所做的一个样本。使用这个我能够设置属性和其他自定义功能以及。

赞(0）回复(0）举报 2022-12-17

我来回答

javascript Twilio -为屏幕共享视频添加属性

1条答案

相关问题

热门标签

最新问答