如何通过JS SDK演示文档

使用微吼云JS SDK,只需简单几步,就能快速接入演示文档服务。

跟随本文的步骤,即使你对Javascript语言不熟悉,也完全可以做到。

其中,一、二步为准备工作,第三步为代码接入,下面,就分步来说明。

一.接入前准备

  1. 注册微吼开发者账号

  2. 创建应用 获取AppID

  3. 获取channelId 通过【API】 获得

  4. 获取直播间包含看直播权限的access_token

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

二.引入sdk文件

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

<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版本更新

注意:

  1. 直接用本地网页(file协议,地址栏以file:///开头)是调试不了的,需要运行在Server上(https或http协议,地址栏以https:// 或http:// 开头)才能正常调试。
  1. 上面两个文件都需要引用,而且顺序需要保持与上面一致。
  1. 建议直接复制上面代码

三.代码对接

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

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>

其他相关文档

  1. 快速开始
  2. 文档模块参考手册