一.接入前准备

注册微吼开发者账号
创建应用获取AppID
获取channelId 通过【API】获得
获取直播间包含看直播权限的access_token

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

二.引入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版本更新

注意：

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

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

建议直接复制上面代码

三.代码对接

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

1.创建文档容器

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

  <div id="my-doc" 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.初始化文档对象

使用演示服务之前，需要初始化文档对象VhallDoc


  /**
   * 初始化文档
   */
  var doc = new VhallDoc({
    docNode:'my-doc',//文档容器
    width:'800'//文档显示的宽度,非必填
    height:'450'//文档显示的高度，非必填
  });

参数说明

name	type	require	description
docNode	string	yes	文档容器
width	string	no	文档显示的宽度
height	string	no	文档显示的高度

5.加载文档

最后一步，调用此方法加载需要显示的文档

    /**
     * 加载文档
	 * @param {string} docId 文档ID
	 * @param {string} channelId 频道ID
	 * @param {function} success 成功回调
	 * @param {function} fail 失败回调
     */
    doc.loadDoc(docId,channelId,success,fail)

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

完整例子代码

<!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(){
    /**
     * 初始化文档
     */
    var doc = new VhallDoc({
    docNode:'my-doc',//文档容器
    width:'800',//文档显示的宽度,非必填
    height:'450'//文档显示的高度，非必填
  });
  
  /**
   * 加载文档
   */
	  doc.loadDoc('4daa24ad','ch_b84f7bc3',function(docId){
		console.info('load doc success,the docId is:',docId);
	  },function(reason){
		console.error(reason);
	  });

	  });
	 //简单调用方式：doc.loadDoc('4daa24ad','ch_b84f7bc3');
	 
  /**
   * 初始化配置
   */
  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>
</body>
</html>

如何通过JS SDK演示文档