Twilio - Add attribute to screensharing video

Question

I'm using the following code to just get the media and publish the track:

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

and here's what I use when a track is added:

 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());
  });

The problem is when the div (a new track) is added it has all the same attributes whether it is a screen or a webcam video and I can't differentiate between the two when I need to do stuff to the screen video using javascript.

How do I assign a special attribute (like screen=true) to the screen sharing div/video?

Answer 1

There are multiple ways to achieve this, the one I used was some thing like this

Step 1: create the screen share track like this

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

Step 2: When attaching the track to the DOM check for the track kind and trackId i.e

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

This is not the complete code just a sample of what I have done. Using this I was able to set attributes and other custom functionality as well.