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

【问题标题】：Twilio - Add attribute to screensharing videoTwilio - 为屏幕共享视频添加属性
【发布时间】：2021-01-05 21:27:49
【问题描述】：

我正在使用以下代码来获取媒体并发布曲目：

  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 twilio twilio-api twilio-video

【解决方案1】：

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

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

这不是完整的代码，只是我所做的一个示例。使用它，我还可以设置属性和其他自定义功能。

【讨论】：