title: 实战教程

本文档将给出一些详尽的示例教程。

示例说明

本教程以一对一视频通话为例，讲解如何通过 Video SDK 实现实时视频通话功能。

在此之前需要开启控制面板中的 “实时视频通话” 功能。

示例的最终的展示效果如下图：

video_resources_web_final

具体步骤

1. 安装 SDK

  1. <script src="https://cdn.wilddog.com/sdk/js/2.5.6/wilddog.js"></script>
  1. <script src="https://cdn.wilddog.com/sdk/js/0.5.18/wilddog-video.js"></script>

2. 用户身份认证

视频通话的前提条件是要有可识别的用户身份。在这里使用 Auth SDK 的匿名登录实现身份认证。认证后会为每个用户分配唯一的 Wilddog ID。

  1. // 创建数据库引用。最好自己创建一个应用，把 `appId` 换成你自己的应用 ID
  2. // wilddog video 依赖 auth 和 sync，authDomain 和 syncURL 都需要配置。
  3. var config = {
  4.     authDomain: "appId.wilddog.com",
  5.     syncURL: "https://appId.wilddogio.com"
  6. };
  7. wilddog.initializeApp(config);
  8. wilddog.auth().signInAnonymously().then((user) => {
  9.     //身份认证成功，可以进行 Video SDK 初始化
  10.     //该用户的 Wilddog ID : user.uid
  11. }

3. 初始化 Video SDK

用户身份认证成功后，可以初始化 Video SDK 。

  1. //获取Video对象
  2. var videoInstance = wilddog.video();
  3. //获取 Client 对象，注意：client 只有在身份认证成功后才可获取。
  4. var clientInstance = videoInstance.client();

4. 实现用户列表

邀请对方加入视频通话，需要获取对方的在线状态。Video SDK 本身不提供获取在线用户列表功能，因此需要开发者使用 Sync SDK 来自己实现。用户登陆系统后将自己的 Wilddog ID 保存到用户列表中。

  1. // 用户列表的存储路径，可以自定义，但不要和 Video 的交互路径相同，防止数据冲突
  2. var ref = wilddog.sync().ref().child('用户列表存储路径');
  3. // 将自己的 Wilddog ID 加入到数据库中，离线时自动删除
  4. ref.child('users/' + user.uid).set(true);
  5. ref.child('users/' + user.uid).onDisconnect().remove();
  7. //监听在线用户列表，并展示除自己之外的用户
  8. ref.child('users').on('child_added', (snap) => {
  9.     //不是自己，就展示出来
  10.     if (snap.key() != user.uid) {
  11.         var newUser = userModel.cloneNode(true);
  12.         newUser.id = snap.key();
  13.         newUser.children[0].textContent = snap.key();
  14.         newUser.hidden = false;
  15.         //追加到 'user-list' 元素中
  16.         userList.appendChild(newUser);
  17.     }
  18. });
  19. //有用户离开，在 'user-list' 元素中取消该用户
  20. ref.child('users').on('child_removed', (snap) => {
  21.     if (snap.key() != user.uid) {
  22.         var removeEl = document.getElementById(snap.key());
  23.         userList.removeChild(removeEl);
  24.     }
  25. })

数据库中的数据结构如图所示：

title: 实战教程 - 图2

5. 获取和预览本地视频

通过 Video SDK 获取本地视频流，并在视频展示控件中预览。

  1. //获取本地媒体流（有声音，低画质），并绑定到页面
  2. videoInstance.createStream({
  3.     audio: true,
  4.     video: 'low'
  5. })
  6.     .then(function(wdStream) {
  7.         localStream = wdStream;
  8.         localStream.attach(localEl);
  9.     })
  10.     .catch(function(err){
  11.         console.log(err);
  12.     })

6. 发起视频通话

选择用户列表中的用户，发起视频通话。

  1. // uid 即选中的用户的 Wilddog ID，localStream 为之前获取的本地视频流，userData 是传递给对方的自定义字符串。
  2. var outInvite = clientInstance.inviteToConversation(uid， {
  3.     'stream': localStream,
  4.     'userData': 'somethings'
  5. })
  6. //如果视频通话建立，在outInvite的.then中能获取到 conversation
  7. outInvite.then((conversation) => {
  8.     //视频通话建立成功
  9. });

7. 接受或拒绝邀请

发起视频通话后，被邀请人会收到邀请事件，被邀请人可以选择接受或拒绝该邀请，接受邀请则视频通话建立。

  1. //初始化 Client 成功后，监听邀请事件，显示在网页上
  2. clientInstance.on('invite', (incomingInvite) => {
  3.     currentInvite = incomingInvite;
  4.     inviteEl.hidden = false;
  5.     invitInfo.textContent = incomingInvite.from + '向你发出视频通话邀请';
  6. );
  8. //用户点击接受后的触发，localStream为之前获取的本地视频流
  9. var accept = function() {
  10.     //接受邀请
  11.     currentInvite.accept(localStream)
  12.         .then((conversation) => {
  13.             //视频通话建立成功
  14.         });
  15. }
  16. //用户点击拒绝后的触发
  17. var reject = function() {
  18.     //拒绝邀请
  19.     currentInvite.reject();
  20. }

8. 展示对方视频

视频通话建立成功后，能够获取到对方视频流，可以在视频展示控件中展示。

  1. //监听 conversation 的 participant_connected 事件，回调的参数中携带对方的视频流。
  2. conversation.on('participant_connected', (participant) => {
  3.     // 监听参与者的 stream_added 事件，将参与者携带的媒体流绑定到页面的remote元素中
  4.     participant.on('stream_added', function(stream){
  5.         stream.attach(remoteEl);
  6. });

9. 离开视频通话

视频通话过程中，调用下面方法离开视频通话。

  1. //取消对方视频流的展示
  2. remoteStream.detach(remoteEl);
  3. //离开视频通话
  4. currentConversation.disconnect();

获取示例源码

点此获取完整的示例源码