javascriptreactjsvideo-conferencingdolbydolby-audio-api

voxeet/dolby.io generating multiple conferences


I am using dolby.io

Till now I have implemented join conference, leave conference, start and stop video, start and stop recording, start and stop screen sharing. What I am facing issue is about multiple conference. I want to implement multiple conferences with unique conference IDs so that every user specified for relevant conference should join its own. I am not getting any idea from its official documentation.

here is my code

const initUI = () => {
  const nameMessage = document.getElementById('name-message');
  const joinButton = document.getElementById('join-btn');
  const conferenceAliasInput = document.getElementById('alias-input');
  const leaveButton = document.getElementById('leave-btn');
  const startVideoBtn = document.getElementById('start-video-btn');
  const stopVideoBtn = document.getElementById('stop-video-btn');
  const startScreenShareBtn = document.getElementById('start-screenshare-btn');
  const stopScreenShareBtn = document.getElementById('stop-screenshare-btn');
  const startRecordingBtn = document.getElementById('start-recording-btn');
  const stopRecordingBtn = document.getElementById('stop-recording-btn');
  //const mute_unmute = document.getElementById('mute');
  //oxeetSDK.conference.mute(VoxeetSDK.session.participant, VoxeetSDK.session.participant.isMuted);
  //let isMuted = VoxeetSDK.conference.toggleMute(VoxeetSDK.session.participant);
  nameMessage.innerHTML = `${randomName}`;
  joinButton.disabled = false;

  joinButton.onclick = () => {
      let conferenceAlias = conferenceAliasInput.value;

      /*
      1. Create a conference room with an alias
      2. Join the conference with its id
      */
      VoxeetSDK.conference.create({ alias: conferenceAlias })
          .then((conference) => VoxeetSDK.conference.join(conference, {}))
          .then(() => {
              joinButton.disabled = true;
              leaveButton.disabled = false;
              startVideoBtn.disabled = false;
              startScreenShareBtn.disabled = false;
              startRecordingBtn.disabled = false;
          })
          .catch((e) => console.log('Something wrong happened : ' + e))
  };

  leaveButton.onclick = () => {
      VoxeetSDK.conference.leave()
          .then(() => {
              joinButton.disabled = false;
              leaveButton.disabled = true;
              startScreenShareBtn.disabled = true;
              stopScreenShareBtn.disabled = true;
          })
          .catch((err) => {
              console.log(err);
          });
  };

  startVideoBtn.onclick = () => {
      VoxeetSDK.conference.startVideo(VoxeetSDK.session.participant)
          .then(() => {
              startVideoBtn.disabled = true;
              stopVideoBtn.disabled = false;
          });
  };

  stopVideoBtn.onclick = () => {
      VoxeetSDK.conference.stopVideo(VoxeetSDK.session.participant)
          .then(() => {
              stopVideoBtn.disabled = true;
              startVideoBtn.disabled = false;
          });
  };

  startScreenShareBtn.onclick = () => {
      VoxeetSDK.conference.startScreenShare()
          .then(() => {
              startScreenShareBtn.disabled = true;
              stopScreenShareBtn.disabled = false;
          })
          .catch((e) => console.log(e))
  };

  stopScreenShareBtn.onclick = () => {
      VoxeetSDK.conference.stopScreenShare()
          .then(() => {
              startScreenShareBtn.disabled = false;
              stopScreenShareBtn.disabled = true;
          })
          .catch((e) => console.log(e))
  };

  startRecordingBtn.onclick = () => {
      let recordStatus = document.getElementById('record-status');
      VoxeetSDK.recording.start()
          .then(() => {
              recordStatus.innerText = 'Recording...';
              startRecordingBtn.disabled = true;
              stopRecordingBtn.disabled = false;
          })
          .catch((err) => {
              console.log(err);
          })
  };

  stopRecordingBtn.onclick = () => {
      let recordStatus = document.getElementById('record-status');
      VoxeetSDK.recording.stop()
          .then(() => {
              recordStatus.innerText = '';
              startRecordingBtn.disabled = false;
              stopRecordingBtn.disabled = true;
          })
          .catch((err) => {
              console.log(err);
          })
  };
};

const addVideoNode = (participant, stream) => {
  const videoContainer = document.getElementById('video-container');
  let videoNode = document.getElementById('video-' + participant.id);

  if(!videoNode) {
      videoNode = document.createElement('video');
      
      videoNode.setAttribute('id', 'video-' + participant.id);

      videoNode.setAttribute('controls', true);

      //VoxeetSDK.conference.mute(VoxeetSDK.session.participant, VoxeetSDK.session.participant.isMuted);
      //let isMuted = VoxeetSDK.conference.toggleMute(VoxeetSDK.session.participant);
      //console.log(isMuted);

      //videoNode.setAttribute('height', 240);
      //videoNode.setAttribute('width', 720);
      
      videoContainer.appendChild(videoNode);
      
      videoNode.autoplay = 'autoplay';
      videoNode.muted = true;
  }

  navigator.attachMediaStream(videoNode, stream);
};

const removeVideoNode = (participant) => {
  let videoNode = document.getElementById('video-' + participant.id);

  if (videoNode) {
      videoNode.parentNode.removeChild(videoNode);
  }
};

const addParticipantNode = (participant) => {
  //const members_count++;
  const participantsList = document.getElementById('participants-list');

  // if the participant is the current session user, don't add himself to the list
  if (participant.id === VoxeetSDK.session.participant.id) return;
  // let participantNode = document.createElement('li');
  // participantNode.setAttribute('id', 'participant-' + participant.id);
  // participantNode.innerText = `${participant.info.name}`;
  //alert(VoxeetSDK.session.participant);

  //document.getElementById('members_count').innerText=participant.id;
  let participantNode = document.createElement('div');
  participantNode.setAttribute('class', 'tabcnt-item');
  participantNode.setAttribute('id', 'participant-' + participant.id);

  //document.getElementById('members_count').innerText = document.getElementById('members_count').innerText + 1;
  //document.getElementById('members_count').innerText = members_count;

  participantNode.innerText = `${participant.info.name}`;
  const send_html = "<div class='tabcnt-item'><div class='row align-items-center'><div class='col-md-8'><div class='media'><img src='images/pp.png' alt=''><div class='media-body'><h3>'"+`${participant.info.name}`+"'</h3><p>email@dname.com</p></div></div></div><div class='col-md-4'><ul><li><a href='#'><i class='fas fa-video'></i></a></li><li><a href='#'><i class='fas fa-microphone'></i></a></li></ul></div></div></div>";
  
  participantNode.innerHTML = send_html;

  participantsList.appendChild(participantNode);
  document.getElementById('members_count').innerText= $('.tab-cnt').length;
};

const removeParticipantNode = (participant) => {
  let participantNode = document.getElementById('participant-' + participant.id);

  if (participantNode) {
      participantNode.parentNode.removeChild(participantNode);
      document.getElementById('members_count').innerText= $('.tab-cnt').length;
  }
};

const addScreenShareNode = (stream) => {
  const screenShareContainer = document.getElementById('screenshare-container');
  let screenShareNode = document.getElementById('screenshare');

  if (screenShareNode) return alert('There is already a participant sharing his screen !');

  screenShareNode = document.createElement('video');
  screenShareNode.setAttribute('id', 'screenshare');
  screenShareNode.autoplay = 'autoplay';
  navigator.attachMediaStream(screenShareNode, stream);

  screenShareContainer.appendChild(screenShareNode);
}

const removeScreenShareNode = () => {
  let screenShareNode = document.getElementById('screenshare');

  if (screenShareNode) {
      screenShareNode.parentNode.removeChild(screenShareNode);
  }
}

I am exhausted and tired of googling. It will be a great help if some can guide or provide direction towards more elaborative documentation. I have read each and every bit of dolby docs. Thanks for reading


Solution

  • When you call create() a new conference id is generated which is a guid specific for your account. You can call get_id() to find it. You can also specify an alias to help for readability when there may be multiple conferences active at any given time.

    If you want to have multiple conferences, you should call create() multiple times. That is, the expectation is the typical app initializes only a single conference but there are multiple running instances each having its own conference and/or to invite others to an existing conference. For webapps, that may be a separate user session rather than a separate deployed mobile application. You may want to do some book keeping for what ids are generated for each user in your own services.

    You may be looking for all of the conferences that are active on an account at any given time while testing or monitoring your deployed apps. You can use the Monitor API getConferences to get that list.

    If you have additional questions, it is probably best to use Dolby.io Support for more personal answers and guidance.