一.接入前准备

注册微吼开发者账号
创建应用获取AppID
获取频道ID channelID

可以通过【测试工具】或【API】获得
获取直播间包含看直播权限的access_token

可以通过【测试工具】或【API】获得

时序图

注:已知频道ID的情况下虚线框部分无需请求。

二.引入sdk文件

接下来，我们正式接入sdk：将下面sdk引入代码，插入页面的head标签里。

<script src="https://static.vhallyun.com/jssdk/doc-sdk/dist/release/index{版本号}.js"></script>
<script src="https://static.vhallyun.com/jssdk/vhall-jssdk-doc-{版本号}.js"></script>
<script src="https://static.vhallyun.com/jssdk/vhall-jssdk-base-1.0.0.js"></script>

查看文档sdk的版本，请见文档sdk版本更新

如果需要观看回放，将下面sdk引入代码，插入页面的head标签里。

<link rel="stylesheet" href="https://static.vhallyun.com/jssdk/videojs.min.css?v=1.0.0"><!--播放器默认样式，需要引用在包含在页面的head标签里-->
<script src="https://static.vhallyun.com/jssdk/dvideo-plugin.js?v=1.0.0"></script><!--依赖的播放器资源-->
<script src="https://static.vhallyun.com/jssdk/vhall-jssdk-player-1.6.2.js"></script>
<script src="https://static.vhallyun.com/jssdk/vhall-jssdk-base-1.0.0.js"></script>

注意：

直接用本地网页(file协议，地址栏以file:///开头)是调试不了的，需要运行在Server上(https或http协议，地址栏以https:// 或http:// 开头)才能正常调试。

上面两个文件都需要引用，而且顺序需要保持与上面一致。

建议直接复制上面代码

三.代码对接

至此，你已完成所有准备工作，距离完成，只差以下几步：

1.创建文档容器

在需要web播放的页面位置加入播放器对象容器,也就是放一个div，然后给它取个名字，比如: my-video 。之后推流回显画面都会在这个容器里渲染，容器的大小控制您可以使用div的属性进行控制，示例代码如下：

  <div id="my-doc" style="width:100%; height:450px;"></div>

如果需要观看回放，在需要web播放的页面位置加入播放器对象容器,也就是放一个div，然后给它取个名字，比如: my-video 。之后回放画面都会在这个容器里渲染，容器的大小控制您可以使用div的属性进行控制，示例代码如下：

  <div id="my-video" style="width:100%; height:450px;"></div>

2.注册ready事件

接下来，在页面里写javascript代码，调用sdk提供的接口，注册sdk ready事件，接口调用方法如下：

/**
 * 注册ready事件
 */
Vhall.ready(function(){
    //to do
})

注意:所有文档相关逻辑需要写在此事件里。

3.初始化SDK配置

接下来需要传入相关参数，初始化配置：

 /**
  * 初始化配置
  */
 Vhall.config({
     appId :'',//应用 ID ,必填
     accountId :'',//第三方用户唯一标识,必填
     token:'',//token必填
 })

4.初始化观看端文档

调用此方法后，就能收到的演示文档内容了。

    /**
     * 初始化文档对象
     */
    var doc = VhallDocPassive({
      channelId:'ch_6659b2c2',//频道ID
      docNode:'my-doc',//文档显示节点div id
      width:'800',//非必填
      height:'450'//非必填
    });

注意：频道ID用于主持端和观看端消息通讯，所以，实例化的时候，所填写的channelId，要与主持端一致。获取channelId的方式：通过调用服务端API来创建频道，会返回channelId。

参数说明

参数名称	必填	说明
channelId	是	频道ID
docNode	是	显示文档区域的容器
width	否	文档区域的宽
height	否	文档区域的高

如果需要观看回放，需要初始化播放器对象VhallPlayer

	/**
	 * 播放器初始化
	 */
    VhallPlayer.init({
        roomId:'', //房间ID,直播必填，点播不写
        recordId:'',//回放Id，点播必填，直播不写
        type:'vod',//播放类型,必填，live 直播, vod 为点播
        videoNode:'',//推流视频回显节点id，必填
        complete:function(){

        }
    });

最后一步，播放。示例：

  /**
   * 播放
   */
  VhallPlayer.play();

注意：此方法必需写在播放器初始化的complete回调里。

完整例子代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>演示文档</title>
  <style>
  body{
    background-color: #000;
    text-align: center;
  }
  #msg-box{
    margin:0 auto;
    margin-top:30px;
    width:350px;
    height: 600px;
    background-color:#fff;
    border: 1px solid #d2d2d2;
    border-radius:4px;
    text-align: left;
    padding-top:10px;
  }
  #msg-box span{
    display: block;
    padding: 2px 10px;
    width: 330px;
    max-width: 330px;
    font-size: 14px;
    word-wrap: break-word;
  }
  #ipt-msg{
    padding: 2px 6px;
    height: 26px;
    width:254px;
    border: 1px solid #fff;
    border-radius: 2px;
    color: #000;
    font-size: 14px;
    outline: none;
  }
  #btn-emit-message{
    margin-top:20px;
    min-width: 80px;
    padding: 6px 10px;
    height: 30px;
    background-color: #1f88e4;
    border: 1px solid #1f88e4;
    border-radius: 2px;
    color: #fff;
    outline: none;
  }
  </style>
  <script src="https://static.vhallyun.com/jssdk/vhall-jssdk-doc-1.0.0.js?v=201802261520"></script>
  <script src="https://static.vhallyun.com/jssdk/vhall-jssdk-base-1.0.0.js?v=201802261520"></script>

  <script>
  /**
   * 注册ready事件
   */
  Vhall.ready(function(){
    /**
     * 初始化文档
     */
    window.doc = VhallDocPassive({
      channelId:'ch_6659b2c2',//频道ID
      docNode:'my-doc',//文档显示节点div id
      width:'800',//非必填
      height:'450'//非必填
    });

    /**
	* 初始化播放器
	*/
	VhallPlayer.init({
		roomId:'',//房间ID,直播必填，点播不写
		recordId:'',//回放Id，点播必填，直播不写
		type:'vod',//播放类型,必填，live 直播, vod 为点播
		videoNode:'myVideo',//推流视频回显节点id，必填
		ctrlBar:'none',//隐藏控制条
		error:function(e){
			alert(e);
		},
		end: function(){
			var isReplay = confirm('当前播放结束，是否重新播放？');
			if(isReplay){
				VhallPlayer.play();
			}
		},
		complete:function(){
			// VhallPlayer.play();
		},
		fail: function(reason){
			alert(reason);
		}
	});
  });
  /**
   * 初始化配置
   */
  Vhall.config({
    appId :'76043aaf',//应用 ID ,必填
    accountId :'100025',//第三方用户唯一标识,必填
    token:'',//token必填
  });
  </script>

</head>
<body>
  <div id="my-doc" style="width:100%; height:450px;margin:0 auto;margin-top:10%;"></div>
  <div id='myVideo' style="width: 480px;height: 270px;margin-left:200px;">
</body>
</html>

如何通过JS SDK观看文档