Twilio-video.js: Mute remote participants separately method

Created on 22 Jul 2018 · 7Comments · Source: twilio/twilio-video.js

I have a case situation where we are joining a multiple video session in browser and using twilio video js.
Suppose i don't want to hear someone from this session and want to mute that person separately.
I tried to go through docs but not able to get a proper way to do it.

question

Source

mawrierajat

All 7 comments

Hi @mawrierajat,

When you attach a RemoteParticipant's RemoteAudioTrack to the DOM using the track.attach() API, you get back the <audio> (or <video>) element you attached to. To mute that RemoteParticipant, you can then set muted to true. For a simplified example, see below:

room.on('participantConnected', participant => {
  participant.tracks.forEach(track => attachTrack(participant, track));
  participant.on('trackSubscribed', track => attackTrack(participant, track));
});

function attachTrack(participant, track) {
  const id = `participant-${participant.sid}`;
  const video = document.getElementById(id) || document.createElement('video');
  video.id = id;
  track.attach(video);
  if (participant.identity === 'someone-i-want-to-mute') {
    video.muted = true;
  }
  document.body.appendChild(video);
}

If you connect to a Room with one other Participant, you'll end up with something like

<html>
  <head>
  </head>
  <body>
    <video id="participant-PA123" muted=true">
  </body>
</html>

In a real application, you'd want to handle other events, too, like "participantConnected", "trackUnsubscribed", "disconnected", etc. But hopefully this gets you started.

Please let me know if this answers your question.

Thanks,
Mark

markandrus on 23 Jul 2018

Thank you so much @markandrus. I will surely try this one.

mawrierajat on 23 Jul 2018

👍1

Great, I will close this issue for now, but feel free to reply back/reopen if you have trouble.

Best,
Mark

markandrus on 23 Jul 2018

@markandrus i tried your above code but it was not working. The muted attribute was not coming in video or audio element at all.
Below is my sample code which i am implementing right now.
```javascript
participant.tracks.forEach(track => {
let ele = document.createElement('audio');
if(track.kind == 'video'){
ele = document.createElement('video');
ele.id = participant.identity;
}
track.attach(ele);
track.muted = true;
document.getElementById(elem).appendChild(ele);
});

participant.on('trackSubscribed', track => {
let ele = document.createElement('audio');
if(track.kind == 'video'){
ele = document.createElement('video');
ele.id = participant.identity;
}
track.attach(ele);
track.muted = true;
document.getElementById(elem).appendChild(ele);
});
```

mawrierajat on 28 Jul 2018

@mawrierajat I'm sorry! I had a typo in my code sample. Instead of track.muted = true, it should have been video.muted = true—the reason being you cannot mute a RemoteTrack, but you can mute the local playback of the RemoteTrack, i.e. the <audio> or <video> element.

In your code sample, please change the lines