title: 多人视频会议

本篇文档介绍开发多人视频会议的主要环节，包括 创建视频会议、管理其他参与者 和 加入视频会议相关。

创建视频会议

创建视频会议包括配置和预览本地媒体流、发起/加入视频会议。

配置和预览本地媒体流

本地媒体流（ Local Stream）包括音频和视频，发起或加入会议前需要进行配置，成功加入一个会议后，该媒体流会发送给其他参与者。

注意：

只有通过 HTTPS 服务打开的页面才可以成功获取本地摄像头和麦克等资源。

例如，创建一个只有视频且分辨率为 640X480 的流，并展示到页面上：

  1. // 创建一个只有视频且分辨率为 640X480 的流
  2. // 获取html中id为'local'的video元素;
  3. var localVideoElement = document.getElementById('local');
  4. var localStream = null;
  5. videoInstance.createStream({
  6.         audio: false,
  7.         video: 'standard'
  8.     })
  9.     .then(function(stream){
  10.         localStream = stream;
  11.         // 获取到localStream,将媒体流绑定到页面的video类型的标签上
  12.         // 如果没有获得摄像头权限或无摄像头，则无法展示。
  13.         localStream.attach(localVideoElement);
  14.     })
  15.     .catch(function(err){
  16.         console.log("Catch error! Error code is " + err);
  17.     })

发起/加入视频会议

通过 Conference ID 发起/加入一个视频会议。如果该会议不存在，系统会以你作为第一个参与者发起该会议。

例如，加入 Conference ID 为 ‘123456’ 的视频会议：

  1. // 获取html中id为'remote'的video元素;
  2. var remoteVideoElement = document.getElementById('remote');
  3. // 设置会议 Conference ID （用户自定义）;
  4. // 并传入本地媒体流（localStream ，之前创建的本地流）;
  5. // 可选择传入用户自定义信息 userData;
  6. var conference =  client.connectToConference('123456',{'stream':localStream,'userData':'somethings'});
  8. //监听本地加入事件
  9. conference.on('connected', function(){
  10.     console.log('You connected！');
  11. });
  12. //监听参与者加入事件
  13. conference.on('participant_connected', function(participant){
  14.     console.log('New participant connected: ', participant.Id);
  15.       var remoteEl = document.getElementById('remote');
  16.       // 监听 stream_added事件，将收到的stream展示到页面
  17.     participant.on('stream_added', function(stream){
  18.             console.log('Receive stream!');
  19.         stream.attach(remoteEl);
  20.     });
  21. });
  22. //监听本地加入失败事件
  23. conference.on('connect_failed', function(){
  24.     console.log('You connect failed！');
  25. });
  26. //监听本地断开事件
  27. conference.on('disconnected', function(){
  28.   console.log('You disconnected！');
  29. });

管理其他参与者

管理其他参与者包括处理其他参与者的连接事件和播放其他参与者的媒体流。

处理其他参与者的连接事件

通过监听其他参与者加入或离开的事件，来获得其状态通知。

例如，打印加入、离开的日志：

  2. //监听参与者加入事件
  3. conference.on('participant_connected', function(participant){
  4.     console.log('New participant connected: ', participant.Id);
  5. });
  6. //监听参与者离开事件
  7. conference.on('participant_disconnected', function(participant){
  8.     console.log('A participant disconnected: ', participant.Id);
  9. });

播放其他参与者的媒体流

每个其他参与者都由一个 participant 对象表示，通过绑定 participant 的视频流来观看其视频画面。

例如，当监听到参与者加入视频会议时展示参与者的媒体流：

  1. //div 标签，所有 video 标签都从属于该标签
  2. var videosEl = document.getElementById('videos');
  3. //一个 video 标签
  4. var remoteEl = document.getElementById('remote');
  5. //监听参与者加入事件
  6. conference.on('participant_connected', function(participant){
  7.     console.log('New participant connected: ', participant.Id);
  8.       //复制一个 video 标签，用来展示新参与者的视频画面
  9.       var newRemote = remoteEl.cloneNode(true);
  10.       videosEl.appendChild(newRemote);
  11.       //监听 stream_added事件，将收到的stream展示到页面
  12.     participant.on('stream_added', function(stream){
  13.         console.log('Receive stream!');
  14.         stream.attach(newRemote);
  15.     });
  16. });

加入视频会议相关

视频会议相关操作包括离开视频会议和直播视频会议。

离开视频会议

离开一个正在进行的视频会议并释放媒体资源。可以直接释放媒体资源或通过监听离开视频会议事件在成功离开会议后释放媒体资源。

例如，断开视频会议并释放不使用的资源：

  1. conference.disconnect();
  2. conference.on('disconnected', function(){
  3.     //释放资源
  4. })

视频会议直播

视频会议直播采用野狗独有的 MeetingCast 技术，能直播视频会议中指定客户端的视频和音频，并根据需要无缝切换直播的客户端。

注意：

MeetingCast 功能配置之前，需要开启 控制面板-实时视频通话-多人视频会议 下的 “视频会议直播” 开关。

开启直播

在视频会议开始后，选择一个参与者作为直播源，打开直播功能。

例如，选择参与者 ‘12345’ 作为直播源开启直播：

  1. conference.meetingCast.start('12345')
  2.   .then(function () {
  3.     console.log('Open MeetingCast succeed!');
  4.   })
  5.   .catch(function (error) {
  6.     console.log('Open MeetingCast failed! Error is '，error.message);
  7.   })

切换直播者

直播进行时无缝切换直播源。

例如，切换直播源为 participant ID ‘99999’ 的参与者：

  1. conference.meetingCast.start('99999')
  2.   .then(function () {
  3.     console.log('Switch participant succeed!');
  4.   })
  5.   .catch(function (error) {
  6.     console.log('Switch participant failed! Error is '，error.message);
  7.   })

停止直播

停止直播功能。

例如，直播开启后，停止直播：

  1. conference.meetingCast.stop()
  2.   .then(function () {
  3.     console.log('Stop MeetingCast succeed!');
  4.   })
  5.   .catch(function (error) {
  6.     console.log('Stop MeetingCast failed! Error is '，error.message);
  7.   })

直播状态

监听当前直播状态。

例如，建立监听

  1. conference.meetingCast.onStateChanged(function(meetingCast){
  2.   //获取当前直播状态，直播者及直播地址
  3.   var status = meetingCast.isStarted;
  4.   var player = meetingCast.anchor;
  5.   var rtmpAddress = meetingCast.play.rtmp;
  6.   var hlsAddress = meetingCast.play.hls;
  7. })