title: 快速入门

你可以通过一个简单的 示例 来快速了解 WilddogVideoRoom SDK 的用法。

环境准备

  • 由于浏览器安全策略的限制，所以必须使用https（本地开发环境例外）

1. 创建应用

1.1 创建野狗应用

在控制面板中创建野狗应用。

1.2 配置应用

  • 在 身份认证 标签页中，选择 登录方式 标签，开启 匿名登录 功能（或者选择其他登录方式，例如：QQ登录、邮箱登录 等）；
  • 在 实时视频通话 标签页中，点击 开启视频通话 按钮。

2. 安装 SDK

2.1 安装 WilddogVideoRoom SDK

WilddogVideoRoom 有直接引用和 npm 安装两种方式可供选择。直接引用时任选以下两种方式之一：

通过标签引用

  1. <script src="https://cdn.wilddog.com/sdk/js/2.0.0.beta/wilddog-video-room.js"></script>

通过 npm 方式引用

  1. npm install wilddog-video-base --save
  2. npm install wilddog-video-room --save

用法：

  1. // 准备工作
  2. var wilddogVideo = require('wilddog-video-base').wilddogVideo;
  3. var roomFactory = require('wilddog-video-room');
  5. wilddogVideo.regService('room', roomFactory);
  6. // To do

2.2 安装 Auth SDK

Token（身份认证令牌）是用户在 WilddogVideoRoom SDK 中的唯一身份标识，用于识别用户身份并控制访问权限。 WilddogVideoRoom SDK 使用 Auth SDK 获取合法的 TOKEN。

使用标签引用 Wilddog Auth SDK

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

3. 初始化 SDK

3.1 初始化 WilddogAuth SDK

  1. //初始化 Wilddog Auth
  2. var config = {
  3.     authDomain: "<videoAppId>.wilddog.com"
  4. };
  5. wilddog.initializeApp(config);

3.2 初始化 WilddogVideoRoom SDK

使用 WilddogAuth SDK 进行身份认证，身份认证成功后，在使用 WilddogVideoRoom SDK前，必须对wilddogVideo进行初始化。

  1. // 初始化 WilddogVideoRoom 之前，要先经过身份认证。这里采用匿名登录的方式。
  2. wilddog.auth().signInAnonymously()
  3.     .then(function(user){
  4.         //认证成功后，初始化 WilddogVideoRoom
  5.         wilddogVideo.initialize({appId:<videoAppId>,token:user.getToken()})
  6.         //获取WilddogVideoRoom实例
  7.         var roomInstance = wilddogVideo.room(roomId);
  8.     }).catch(function (error) {
  9.         // Handle Errors here.
  10.         console.log(error);
  11.     });

提示：

videoAppId 为应用实时视频通话标签页中的 VideoAppID 字段值，为 wd 开头的随机字符串，例如：wd1234567890abcdef。

4. 加入 Room

创建 WilddogVideoRoom 实例并加入到 Room 中。

  1. //room_id 由客户端生成一个随机字符串
  2. roomInstance = wilddogVideo.room(room_id);
  3. roomInstance.connect();

5. 发布／订阅媒体流

本地客户端会触发 roomInstance.on('connected',callback) 事件通知用户已成功加入 Room 。 加入后即可发布或订阅当前 Room 中的媒体流。

发布本地媒体流

使用 wilddogVideo.createLocalStream(options) 方法创建本地媒体流。

  1. //创建一个同时有音频和视频的媒体流
  2. wilddogVideo.createLocalStream(
  3.     {
  4.         captureAudio:true,
  5.         captureVideo:true,
  6.         dimension:'480p',
  7.         maxFPS: 15
  8.     })
  9.     .then(function(localStream){
  10.         // 获取到localStream,将媒体流绑定到页面的video类型的标签上
  11.         // 如果没有获得摄像头权限或无摄像头，则无法展示。
  12.         localStream.attach(localElement);
  13.     });

使用roomInstance.publish(localStream) 方法发布本地媒体流。

  1. roomInstance.on('connected',function(){
  2.     console.log('connected success');
  3.     roomInstance.publish(localStream);
  4. });

订阅媒体流

SDK 通过 roomInstance.on('stream_added',callback) 事件通知用户当前 Room 中已发布的媒体流，可以根据需要订阅感兴趣的媒体流。

  1. roomInstance.on('stream_added',function(roomStream){
  2.     roomInstance.subscribe(roomStream,function(err){
  3.         if(err == null){
  4.             console.log('subscribe success');
  5.         }
  6.     })
  7. })

订阅成功后会触发客户端 roomInstance.on('stream_received',callback) 事件,事件返回远端媒体流。

使用 attach() 方法播放远端媒体流

  1. roomInstance.on('stream_received',function(roomStream){
  2.     //将远端流放入相应的远端video标签上
  3.     roomStream.attach(remoteRemote);
  4. });

提示：

发布媒体流需要在 roomInstance.on('connected',callback) 回调方法被触发后进行。

7. 更多使用