1

我正在使用dolby.io

到目前为止,我已经实现了加入会议、离开会议、开始和停止视频、开始和停止录制、开始和停止屏幕共享。我面临的问题是关于多个会议。我想实现具有唯一会议 ID 的多个会议,以便为相关会议指定的每个用户都应该加入自己的会议。我没有从它的官方文档中得到任何想法。

这是我的代码

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

我筋疲力尽,厌倦了谷歌搜索。如果有人可以指导或提供更详尽的文档的方向,那将是一个很大的帮助。我已经阅读了每一个杜比文档。谢谢阅读

4

1 回答 1

1

当您呼叫时create(),会生成一个新的会议 ID,它是您帐户的特定 guid。您可以调用get_id()来查找它。当在任何给定时间可能有多个会议处于活动状态时,您还可以指定别名以帮助提高可读性。

如果你想开多个会议,你应该打电话create()多次。也就是说,期望典型的应用程序只初始化一个会议,但有多个正在运行的实例,每个实例都有自己的会议和/或邀请其他人参加现有的会议。对于 webapps,这可能是一个单独的用户会话,而不是一个单独部署的移动应用程序。您可能需要记录在您自己的服务中为每个用户生成的 id。

在测试或监控已部署的应用程序时,您可能正在寻找在任何给定时间在帐户上处于活动状态的所有会议。您可以使用 Monitor API getConferences来获取该列表。

如果您还有其他问题,最好使用Dolby.io Support获得更多个人答案和指导。

于 2020-08-25T16:19:14.307 回答