twilio / video-quickstart-js

A quickstart and code samples for Twilio Video JavaScript SDK. https://www.twilio.com/docs/video
Other
389 stars 337 forks source link

Stream webinar to multi user and disable all participants video stream #173

Closed ajay-webdev closed 3 years ago

ajay-webdev commented 3 years ago

I want to create Video stream and share to other users , I am using plain javascript in browser , I use following code and its working fine

function participantConnected(participant) {
console.log(participant);
    let participantDiv = document.createElement('div');
    participantDiv.setAttribute('id', participant.sid);
    participantDiv.setAttribute('class', 'participant');

    let tracksDiv = document.createElement('div');
    participantDiv.appendChild(tracksDiv);

    let labelDiv = document.createElement('div');
    labelDiv.setAttribute('class', 'label');
    labelDiv.innerHTML = participant.identity;
    tracksDiv.appendChild(labelDiv);

    container.appendChild(participantDiv);

    console.log('Participant "%s" connected', participant.identity);
    /**
  const div = document.createElement('div');
  div.id = participant.sid;
  div.className ="remote-video"
  div.innerText = participant.identity;

  participant.on('trackSubscribed', track => trackSubscribed(div, track));
  participant.on('trackUnsubscribed', trackUnsubscribed);

  participant.tracks.forEach(publication => {
    if (publication.isSubscribed) {
      trackSubscribed(div, publication.track);
    }
  });

  document.body.appendChild(div);
  **/

if(participant.identity==m_mentor_id){
alert("host");

}else{
alert("other");

}

    participant.tracks.forEach(publication => {
    console.log("publication",publication);

        if (publication.isSubscribed)
            trackSubscribed_new(tracksDiv, publication.track);
    });
    participant.on('trackSubscribed', track => trackSubscribed_new(tracksDiv, track));
    participant.on('trackUnsubscribed', trackUnsubscribed_new);

    participant.on('trackDisabled', track => {
  console.log("remote track disabled",track);
});

participant.on('trackEnabled', track => {
  // show the track again
  console.log("remote track enabled",track);
});

    updateParticipantCount();
}

But it is like one on one webcam , where all participants videos are streamed to everyone... How to disable all particpants video stream and enable only host webcam/screenshare.

Thank you.

PikaJoyce commented 3 years ago

Hi @ajay-webdev,

Thank you for opening this issue with us.

I have two potential solutions, you can do this from the client side and having participants that are flagged as other connect to the room, without publishing their video track in the connectOptions. Like this: connect('$TOKEN', { video: false }). If they are the host, they connect with video set to true.

You can alternatively use the server side API found here to limit subscribers to only one publisher track.

Let me know if this helps!

Best, Joyce