文档服务开发指南 微吼云

服务介绍    

基本描述

微吼云提供文档白板服务来满足有文档白板互动需求的用户。文档服务会实时记录操作的全部内容，方便回放查看。支持把文档转化为jpeg及html格式，支持文档演示、文档翻页、白板互动。

主要功能

类别 功能名称 详细描述
文档上传 上传方式 支持通过控制台和API两种方式上传文档
控制台上传 进入点播控制台页面，可选择本地文档进行上传
接口上传 支持通过接口进行文档上传
文档回调 回调设置 设置回调URL，主动将文档转码状态返回给用户
文档管理 管理方式 支持通过控制台和API两种方式对文档进行管理
控制台管理 支持文档上传、文档查询、文档删除和文档预览
API管理 支持创建文档、删除文档、获取文档列表、获取文档信息、获取转码成功的文档列表
数据统计 控制台统计 支持查询文档观看次数
API统计 支持查询文档观看次数
文档演示 演示方式 支持微吼云提供的 Javascript 文档演示SDK
文档观看 观看方式 支持微吼云提供的iOS、Android、Javascript文档观看SDK

服务优势

1.多格式文档上传

支持上传'doc', 'docx','xls', 'xlsx', 'ppt', 'pptx', 'txt', 'pdf', 'gif', 'jpeg', 'jpg', 'png', 'bmp'格式文档，支持文档自动转化为jpeg格式图片及HTML页面格式。

2.文档演示

支持文档演示；支持文档翻页；支持白板互动

3.文档录制

支持同时对视频、文档、聊天内容进行录制，并发布为点播视频

4.多终端观看

支持移动端iOS/Android SDK；支持PC端Javascript SDK

快速开始    

文档流程

微吼云文档流程图

使用文档前准备

1 前提条件

  • 演示与观看工具

    实现文档功能需要具备演示文档和观看文档的工具，微吼云提供演示/观看SDK及体验Demo，可以通过Demo进行文档的演示和观看

    通过微吼云提供的下载页，下载安装演示/观看文档SDK及Demo。

2 操作步骤

2.1 登录

登录微吼云控制台

2.2 创建应用

详情参考如何创建应用

2.3 获取app_id

详情如何参考获取app_id

2.4 设置包名&签名

如需集成移动端SDK，则需设置包名&签名，详情参考设置包名&签名

2.5 添加服务

创建应用后，点击添加服务，弹出添加服务对话框，选择文档服务，点击确定，文档服务添加成功。

2.6 获取channel_id

channel_id为频道ID，用户可以通过频道进行文档演示和观看，channel_id可通过接口或API在线测试工具获取

2.6.1 接口获取

可通过接口获取channel_id，具体参考创建频道

2.6.2 API在线测试工具

参考通过在线测试接口工具完成获取频道ID

2.7 获取access_token

access_token即权限，调用接口生成access_token将传入SDK，SDK在请求时会附带access_token,具体方式参考生成access_token接口和API在线测试工具。

注： access_token过期时间，默认为一天，最大为一天，过期后需要重新生成access_token。

2.7.1 接口获取

可通过接口获取access_token，具体参考生成access_token接口

2.7.2 API在线测试工具获取

参考通过在线测试接口工具完成获取access_token

上传文档

文档可通过API和控制台进行上传，以下分别以API和控制台为例进行说明。

API

支持通过服务端接口上传文档，具体参考上传文档接口

控制台

文档管理页面点击上传，可进行文档上传

文档演示

文档观看可通过微吼云提供的SDK（JS）,以下以SDK Demo为例进行说明。

JS SDK Demo

1演示地址

https://static.vhallyun.com/jssdk/vhall-jssdk-doc/test/index.html

2实例化

页面中依次输入token、appid、roomid、文档区域宽、文档区域高，点击实例化，进入文档演示页面

注： roomid为选填项，不填写roomid时，不发起直播只进行文档演示。

3文档演示

可在页面选择文档进行加载，并对文档进行翻页、画笔等演示

文档观看

文档观看可通过微吼云提供的SDK（包含iOS、Android、JS）,以下以SDK Demo为例进行说明。

JS SDK Demo

直播+文档

1 演示地址

https://static.vhallyun.com/jssdk/vhall-jssdk-doc/test/slave-live.html

2 实例化

页面中依次输入token、appid、roomid、channelid、文档区域宽、文档区域高，点击实例化，进入直播+文档观看页面

注： roomid为选填项，不填写roomid时，则只进行文档观看，进入观看页面时也只是观看文档的演示效果。

3 直播+文档观看

页面中可同时进行直播推流和文档演示。

点播+文档

1 演示地址

https://static.vhallyun.com/jssdk/vhall-jssdk-doc/test/slave-vod.html

2 实例化

页面中依次输入token、appid、recordid、channelid、docid、文档区域宽、文档区域高，点击实例化，进入点播+文档观看页面

3 点播+文档观看

观看对应点播和演示文档画面。

iOS SDK Demo

具体参考Demo使用指南

Android SDK Demo

具体参考Demo使用指南

控制台使用指南    

成为开发者

详情参考如何成为开发者

创建应用

详情参考如何创建应用

添加服务

创建应用后，点击添加服务，弹出添加服务对话框，选择文档服务，点击确定，文档服务添加成功。

添加服务

添加服务

添加文档服务1

文档管理

点击文档服务的文档管理，进入文档管理页面，页面中包含文档配置、文档管理、观看统计几部分，用户可分别通过这几个部分来对文档服务进行管理。

文档配置

文档配置包含应用信息，应用信息包含app_id、回调URL

app_id的含义，参考什么是app_id

回调URL：设置回调URL，填写完成，点击保存，回调URL设置成功。文档回调URL设置成功后，会主动将文档转码状态通过指定的URL通知用户。

文档管理

文档管理支持对文档进行上传、查询、删除、预览操作。

文档上传：

点击上传按钮，弹出文档上传对话框，选择本地文档进行上传。

规格说明：

上传文档格式：支持'doc', 'docx','xls', 'xlsx', 'ppt', 'pptx', 'txt', 'pdf', 'gif', 'jpeg', 'jpg', 'png', 'bmp'格式

文档查询：

检索框中输入文档名称，点击查找，可依照条件检索出符合要求的文档。

文档删除：

选择好文档点击删除或批量删除按钮，确认删除后，所选文档被成功删除。

文档预览：

点击文档预览，可预览上传的效果，并可进行翻页操作。

观看统计

支持用户在指定时间范围内对文档观看次数进行查询，颗粒度为1个小时。

客户端集成

客户端SDK下载：

SDK下载

客户端SDK集成文档：

如何通过JS SDK演示文档

如何通过iOS SDK观看文档

如何通过Android SDK观看文档

如何通过JS SDK观看文档

服务端集成

如何通过接口完成文档准备

服务端API手册

文档API    

API名称 功能
create 创建文档
delete 删除文档
lists 文档列表
get-document-info 获取文档信息
get-trans-over-lists 获取转码成功的文档列表
get-document-use-info 获取文档使用数据

如何通过接口完成文档准备    

通过接口测试工具完成    

本文将引导通过接口测试工具，创建文档 document_id、发起文档所需要的频道 channel_id 和具有文档操作权限的 access_token。

进入接口测试页面

为使 SDK 可以在无需服务端代码即可运行，微吼云提供了API 请求工具为 SDK 完成准备工作。 点击这里 进入 API 请求工具页面。

创建文档

通过接口上传文档、获取文档 ID

  • 选择服务 : Document, API 名称 ：create
  • 按 创建文档接口文档 填写参数
  • 返回数据中的 document_id 即为 SDK 操作文档的 document_id

如下图 :

创建频道

通过接口创建频道、获取频道 ID

  • 选择服务 : Channel ，API 名称 ： create
  • 按 创建频道接口文档 填写参数
  • 返回数据中 channel_id 即为 SDK 发起聊天需要的 channel_id

如下图 :

生成 AccessToken

通过接口获取具有操作文档权限的AccessToken
注：文档操作需要控制的权限为，发起文档所在的频道，即 channel_id。

  • 选择服务 : Base , API 名称 ：create-access-token
  • 按 生成AccessToken接口文档 填写参数
  • 返回数据中的 access_token 即为 SDK 操作文档所需要的 access_token

如下图 :

参考链接

完成本页的步骤后，您可能需要阅读以下文档。

通过服务端代码完成    

本文将引导通过服务器端代码请求微吼云 API，创建文档 document_id、发起文档所需要的频道 channel_id 和具有文档操作权限的 access_token。

获取 app_id 和 secret_key

微吼云 API 使用 app_id 来标识应用，使用 secret_key 来作为双方通讯的传输秘钥，两者为使用微吼云 API 的必要参数。

点击这里 查看如何获取 app_id 和 secret_key。

PHP代码实现

引入公共代码

我们对调用 API 过程中一些公用代码做了简单封装，作为工具库，您可以 点击这里 获取。然后在代码中引用。

/**
 * 引入公共代码
 */
include_once("vhall_paas.php");

本文后面的 PHP 示例代码将以此工具库为基础。

运行服务端代码

当微吼云代码工具库引入到项目中后，您可以开始运行下列 API 调用代码来获取文档 document_id和具有文档操作权限的 access_token

创建文档

注意：

  1. 请求参数中，文件类型的键值不需要添加到签名运算中，详情见 签名机制。
  2. 上传的文件需要让PHP进程具有访问权限，否则无法完成请求。 
// 引入公共代码
include 'vhall_paas.php';

/**
 * 初始化应用&秘钥信息
 * 获取方式 微吼云控制台 -> 应用 -> 设置 -> 应用信息
 * http://www.vhallyun.com/console/app/index
 */
VhallPaas::$app_id = '';
VhallPaas::$secret_key = '';

// 创建文档接口请求地址
$createDocumentAddress = 'api.yun.vhall.com/api/v1/document/create';

// 创建文档参数
$createDocumentParams = [];

// 加载公共参数&运算签名
$createDocumentParams = VhallPaas::createRealParam($createDocumentParams);

// 添加上传文档文件
$createDocumentParams['document'] = new CURLFile("number.pptx");

// 创建文档
try {
    $result = VhallPaas::request($createDocumentAddress, $createDocumentParams);
    $documentId = $result['document_id'];
} catch (Exception $e) {
    exit("请求发生错误 错误信息为 {$e->getMessage()} . 错误码为 {$e->getCode()}");
}

var_dump($documentId);

创建频道

/**
 * 通过接口完成聊天准备
 * 创建频道API接口文档 link
 * 生成accessToken link
 */

// 引用微吼云PHP代码工具库
include 'vhall_paas.php';

/**
 * 初始化应用&秘钥信息
 * 获取方式 微吼云控制台 -> 应用 -> 设置 -> 应用信息
 * http://www.vhallyun.com/console/app/index
 */
VhallPaas::$app_id = '';
VhallPaas::$secret_key = '';

// 创建房间接口请求地址
$createChannelAddress = 'api.yun.vhall.com/api/v1/channel/create';

// 创建频道参数
$createChannelParams = [];

// 加载公共参数&运算签名
$createChannelParams = VhallPaas::createRealParam($createChannelParams);

// 创建频道
try {
    $result = VhallPaas::request($createChannelAddress, $createChannelParams);
    $channelId = $result['channel_id'];
} catch (Exception $e) {
    exit("请求发生错误 错误信息为 {$e->getMessage()} . 错误码为 {$e->getCode()}");
}

var_dump($channelId);

获取具有文档操作权限的 access_token

注意：

  1. 运行下面代码，需要您先获取到频道 channel_id , 详情见上一步。
  2. 文档操作需要控制的权限为，发起文档所在的频道，即 channel_id。 
// 引入公共代码
include 'vhall_paas.php';

/**
 * 初始化应用&秘钥信息
 * 获取方式 微吼云控制台 -> 应用 -> 设置 -> 应用信息
 * http://www.vhallyun.com/console/app/index
 */
VhallPaas::$app_id = '';
VhallPaas::$secret_key = '';

// 生成AccessToken接口请求地址
$accessTokenAddress = 'api.yun.vhall.com/api/v1/base/create-access-token';

/**
 * 生成 AccessToken 参数
 * AccessToken 为 SDK 中鉴别用户权限使用，针对不同的服务需要不同的参数来生成 AccessToken
 * 当前例子需要文档操作权限，所以权限位使用的 operate_document
 * 您可以通过阅读 www.vhallyun.com/docs/show/1013 来获取不同权限的 AccessToken 生成方式
 */
$createAccessTokenParams = [
    // 第三放用户ID，根据实际情况编写 （这里使用当前时间）
    'third_party_user_id' => 'vhall_paas_test_' . time(),
    // 过期时间,最大时间为一天，默认一天 （这里使用10小时做例子）
    'expire_time' => date("Y-m-d H:i:s", time() + (10 * 3600)),
    // 权限设定 （频道 channel_id 通过上一步 获取频道 channel_id 得到）
    'operate_document' => "ch_f82xxxx"
];

// 加载公共参数&运算签名
$createAccessTokenParams = VhallPaas::createRealParam($createAccessTokenParams);

// 获取accessToken
try {
    $result = VhallPaas::request($accessTokenAddress, $createAccessTokenParams);
    $accessToken = $result['access_token'];
} catch (Exception $e) {
    exit("请求发生错误 错误信息为 {$e->getMessage()} . 错误码为 {$e->getCode()}");
}

var_dump($accessToken);

参考链接

完成本页的步骤后，您可能需要阅读以下文档。

如何通过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/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版本更新

注意：

  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. 文档模块参考手册

如何通过iOS SDK演示文档    

观看文档准备

  1. 注册微吼开发者账号

  2. 创建应用 获取AppID

  3. 设置应用Bundle ID

  4. 获取 频道ID channelID

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

  5. 获取包含文档权限的access_token

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

工程配置

在开始使用sdk之前，我们要配置好IDE和创建基础的工程代码。相关内容在【工程配置】中有详细说明。

对接流程

1: 引入文档模块头文件

#import "VHDocument.h"

2: 创建Document

SDK 中的 VHDocument 模块负责实现 文档服务相关功能。

  1. 直播文档模块初始化 获取channelID和accessToken 参考页首观看文档准备
NSString* channelID = @"xxxxxx";
NSString* accessToken = @"xxxxxxxxxx";
_document = [[VHDocument alloc]initWithChannelID:channelID accessToken:accessToken];
  1. 直播+文档模式初始化 获取channelID、roomID和accessToken 参考页首观看文档准备 roomID，直播房间ID，用于生成回放时文档回放播放
/**
 * 直播+文档模块初始化
 */
- (instancetype)initWithChannelID:(NSString*)channelID roomID:(NSString*)roomID accessToken:(NSString*)accessToken;

3: 设置 渲染View、delegate

  • delegate 设置文档代理
  • 注意：view大小设置 需同一个 频道的 安卓端，JS SDK端 保持 宽高比一致，否则画笔在各端显示位置会有偏差
  • 接下来我们要给文档画面找个地方来显示，iOS系统中使用 view 作为基本的界面渲染单位，所以您只需要准备一个 view 并调整好布局就可以了。
_document.delegate = self;
_document.view.frame = self.view.bounds;
[self.view insertSubview:_document.view atIndex:0];

3: 设置演示端模式

  • view.editEnable 设置演示端模式
  • 现一个channelID只允许一个演示端，多端演示待以后版本迭代
_document.view.editEnable = YES;

4: 设置演示文档

  • documentID 通过微吼云控制台上传文档获得
NSString* documentID = @"xxxxxxxxxx";
[_document setDocWithID:documentID];

5: 演示文档操作相关接口

- (void)prevPage;//上一页
- (void)nextPage;//下一页
- (void)prevStep;//上一步
- (void)nextStep;//下一步
- (void)gotoPage:(int) page;//跳转至第几页
- (void)gotoPage:(int) page step:(int)step;//跳转至第几步

6: 涂鸦操作相关接口

/*
 * 是否开启涂鸦模式
 */
@property (nonatomic,assign)BOOL    editGraffitEnable;
/*
 * 绘制命令类型
 */
@property (nonatomic,assign)VHDrawAction  drawAction;

/*
 * 绘制类型
 * 注意：设置此参数时  editType 自动设置为 VHEditType_Add 模式
 */
@property (nonatomic,assign)VHDrawType  drawType;

/*
 * 设置颜色、大小
 */
- (void)setColor:(UIColor*)color;

/*
 * 大小
 */
- (void)setSize:(NSInteger)size;

/*
 * 清空
 */
- (void)clear;

事件处理

SDK 通过 VHDocumentDelegate 代理来监听文档相关事件

具体 VHDocumentDelegate 中方法参考【文档模块参考手册】

/*
 *  documentView Load完成 完成后
 */
- (void)documentViewDidLoad;

/**
 *  直播文档同步
 *  @param document 文档实例
 *  @param channelID   文档channelID
 *  @return float   延迟执行时间 即直播延迟时间 realityBufferTime
 */
- (float)document:(VHDocument *)document delayChannelID:(NSString*)channelID;

/**
 *  翻页消息
 *  @param document 文档实例
 *  @param documentID   文档id 为空时没有 文档
 *  @param curPage  当前页码 0开始
 */
- (void)document:(VHDocument *)document documentID:(NSString*) documentID curPage:(int)curPage;

/**
 *  错误回调
 *  @param document 文档实例
 *  @param error    错误
 */
- (void)document:(VHDocument *)document error:(NSError *)error;

快速集成代码

//
//  DocumentDemoViewController.m
//  VHYunSDKDemo
//
//  Created by vhall on 2018/10/15.
//  Copyright © 2018年 www.vhall.com. All rights reserved.
//

#import "DocumentDemoViewController.h"
#import "VHDocument.h"


#define OBJ_Color @[@"#FF0000",@"#FF7D00",@"#FFFF00",@"#00FF00",@"#0000FF",@"#00FFFF",@"#FF00FF",@"#000000"]

@interface DocumentDemoViewController ()<VHDocumentDelegate>
{
    UIColor   *_color;
    NSInteger _size;
}
@property(nonatomic,strong)VHDocument * document;
@property (weak, nonatomic) IBOutlet UIView *preView;
@property (weak, nonatomic) IBOutlet UILabel *infoLabel;
@property (weak, nonatomic) IBOutlet UIView *pptOptView;
@property (weak, nonatomic) IBOutlet UITextField *docIDTextField;

@property (weak, nonatomic) IBOutlet UILabel *lineSizeLabel;
@end

@implementation DocumentDemoViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view from its nib.
    //阻止iOS设备锁屏
    [[UIApplication sharedApplication] setIdleTimerDisabled: YES];
    _size = 5;
    [self initView];
}

- (void)dealloc
{
    //允许iOS设备锁屏
    [[UIApplication sharedApplication] setIdleTimerDisabled:NO];
}
/*
#pragma mark - Navigation

// In a storyboard-based application, you will often want to do a little preparation before navigation
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
    // Get the new view controller using [segue destinationViewController].
    // Pass the selected object to the new view controller.
}
*/
- (void)initView
{
    _document = [[VHDocument alloc]initWithChannelID:self.channelID accessToken:self.accessToken];
    _document.delegate = self;
    _document.view.frame = _preView.bounds;
    _document.view.backgroundColor = MakeColorRGB(0xE2E8EB);
    [_preView addSubview:_document.view];
    
    _document.view.editEnable = _isPublish;
    _pptOptView.hidden = !_isPublish;
}

- (void)viewDidLayoutSubviews
{
    _document.view.frame    = _preView.bounds;
}

- (IBAction)backBtnClicked:(id)sender {
    [self dismissViewControllerAnimated:YES completion:^{
    }];
    [self.navigationController popViewControllerAnimated:NO];
}

- (IBAction)pptShowOptBtnClicked:(UIButton *)sender
{
    sender.selected = !sender.selected;
    _document.view.editEnable = sender.selected;
    _pptOptView.hidden = !sender.selected;
}

- (IBAction)pptOptBtnClicked:(UIButton*)sender {
    switch (sender.tag) {
        case 100://上一页
            [_document.view prevPage];
            break;
        case 101://上一步
            [_document.view prevStep];
            break;
        case 102://下一步
            [_document.view nextStep];
            break;
        case 103://下一页
            [_document.view nextPage];
            break;
        default:
            break;
    }
}

- (IBAction)setDocBtnClicked:(id)sender {
    __weak typeof(self) wf = self;
    [_document setDocWithID:_docIDTextField.text];
}


- (IBAction)btnClicked:(UIButton*)sender {
    for (int i = 1; i <= 10; i++) {
        UIButton*v = [_pptOptView viewWithTag:i];
        if([v isKindOfClass:[UIButton class]])
        {
            v.selected = NO;
        }
    }
    
    if(!_document.view.editGraffitEnable)
        return;
    
    sender.selected = NO;
    switch (sender.tag) {
        case VHDrawType_Pen:
        case VHDrawType_Highlighter:
        case VHDrawType_Rectangle:
        case VHDrawType_Circle:
        case VHDrawType_Arrow:
        {
            sender.selected = YES;
            _document.view.drawType = sender.tag;
            [_document.view setColor:_color];
            [_document.view setSize:_size];
        }
            break;
        case VHDrawType_Text:
        {
            sender.selected = YES;
            _document.view.drawType = sender.tag;
        }
            break;
        case VHDrawType_Image:
        {

        }
            break;
        case 10://选择修改模式
        {
            sender.selected = YES;
            _document.view.drawAction = VHDrawAction_Modify;
        }
            break;
        case 11:_document.view.drawAction = VHDrawAction_Delete; break;//Del
        case 12:[_document.view clear];break;//DelAll
        case 13:[_document.view undo];break;//Undo
        case 14:[_document.view redo];break;//Redo
        default:break;
    }
}
- (IBAction)sliderValueChanged:(UISlider *)sender {
    switch (sender.tag) {
        case 90:
        {
            _size = sender.value;
            [_document.view setSize:_size];
            _lineSizeLabel.text = [NSString stringWithFormat:@"线/字大小:%d",(int)_size];
        }
            break;
        default:
            break;
    }
}
- (IBAction)colorValueChanged:(UISegmentedControl *)sender {
    NSString *colorStr = OBJ_Color[sender.selectedSegmentIndex];
    _color = [DocumentDemoViewController CGColor:colorStr];
    [_document.view setColor:_color];
}

- (IBAction)editGraffitEnablebtnClicked:(UIButton*)sender {
    sender.selected = !sender.selected;
    _document.view.editGraffitEnable = sender.selected;
    if(_document.view.editGraffitEnable)
        [self btnClicked:nil];
}

 #pragma mark - VHDocumentDelegate
- (void)documentViewDidLoad
{

}
- (void)document:(VHDocument *)document documentID:(NSString*) documentID curPage:(int)curPage
{
    _docIDTextField.text = documentID;
    _infoLabel.text = [NSString stringWithFormat:@"Page: %d/%d  Step:%d/%d",_document.view.currentPage+1,_document.view.totalPage,_document.view.currentStep+1,_document.view.totalStep];
}

- (void)document:(VHDocument *)document error:(NSError *)error
{
    [self showMsg:error.domain afterDelay:2];
}

- (BOOL)textFieldShouldReturn:(UITextField *)textField
{
    [textField resignFirstResponder];
    return YES;
}

#pragma mark -
+ (UIColor*)CGColor:(NSString*)str
{
    NSRange r = [str rangeOfString:@"#"];
    if(r.location != NSNotFound)
        str = [str stringByReplacingOccurrencesOfString:@"#" withString:@"0x"];
    
    r = [str rangeOfString:@"0x"];
    if(r.location == NSNotFound)
        return [UIColor clearColor];
    
    unsigned long c = strtoul([str UTF8String],0,16);
    return [UIColor colorWithRed: ((c>>16)&0xFF) / 255.0  green: ((c>>8)&0xFF) / 255.0  blue: (c&0xFF) / 255.0  alpha: 1 ];
}

@end

其他相关文档

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

如何通过AndroidSDK演示文档    

观看文档准备

  1. 注册微吼开发者账号

  2. 创建应用 获取AppID

  3. 设置应用包名签名

  4. 获取 频道ID channelID

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

  5. 获取包含文档权限的access_token

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

工程配置

在开始使用sdk之前，我们要配置好IDE和创建基础的工程代码。相关内容在【工程配置】中有详细说明。

对接流程

1 创建 VHOPS

文档的构建有两种方式：第一种，通过channelId和accessToken构建，适用于独立的文档直播场景；第二种，通过recordId构建，适用于观看录播的过程中，观看此录播对应的文档。

 // 第一步创建 VHDocument 对象 ， 传入对应的参数
 mDocument = new VHOPS(mChannelId, "", mAccessToken);

2 设置文档的显示区域

 // VHDocumentView 是SDK中提供用来显示文档的控件
view = (VHOPSView) this.findViewById(R.id.doc);
 // 获取到VHDocumentView的实例添加到Document中
document.setDocumentView(view);

3 加入频道

调用Join()加入频道，获取Document的服务和消息.

document.join();

4 设置监听

监听文档服务回调出来的事件，包含当前页、步和总页、总步等.

mDocument.setEventListener(new VHOPS.OnEventListener() {
            @Override
            public void onEvent(JSONObject object) {
                Log.i(TAG, "object:" + object.toString());
                mPageView.setText("页数：" + (object.optInt("currentPage") + 1) + "/" + object.optInt("page"));
                mStepView.setText("步数：" + (object.optInt("currentStep") + 1) + "/" + object.optInt("step"));
            }
        });

5 离开频道

调用leave()加入频道，终止Document的服务和消息.

document.leave();

6 设置是否可操作文档(重要)

开启文档编辑，可操作文档，涂鸦或翻页等，观看端会同步展示操作展示 目前在使用过程中，尽量保持同一时间内，只有一个使用者有编辑文档权限。

mDocument.getView().setEditable(false);

以下是文档操作接口示例，只有有文档操作权限才能调用

7 翻页、翻步数

mDocument.getView().preSlide();
mDocument.getView().nextSlide();
mDocument.getView().preStep();
mDocument.getView().nextStep();

8 设置操作类型（添加、修改、删除）

mDocument.getView().setAction(IVHOPS.DrawAction.ADD);

9 设置涂鸦类型

  mDocument.getView().setDrawType(type);

10 设置文档

  mDocument.getView().setDoc(docid);

11 文档上传

    /**
     * 文档上传
     * @param filePath 文件路径
     * @param rename 重命名
     * @param accessToken
     * @param callback
     */
    public static void upload(String filePath, String rename, String accessToken, final DocCallback callback)

    /**
     * 获取上传文件限制说明
     * @return
     */
    public static String getUploadConfig()

其他相关文档

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

如何通过SDK观看文档    

如何通过iOS SDK观看文档    

观看文档准备

  1. 注册微吼开发者账号

  2. 创建应用 获取AppID

  3. 设置应用Bundle ID

  4. 获取 频道ID channelID

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

  5. 获取包含文档权限的access_token

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

  6. 获取 点播ID recordId

    可以通过【控制台上传】或【测试工具】或【API】获得

工程配置

在开始使用sdk之前，我们要配置好IDE和创建基础的工程代码。相关内容在【工程配置】中有详细说明。

时序图

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

对接流程

1: 引入文档模块头文件

#import "VHDocument.h"

2: 创建Document

SDK 中的 VHDocument 模块负责实现 文档服务相关功能。

  1. 直播文档模块初始化 获取channelID和accessToken 参考页首观看文档准备
NSString* channelID = @"xxxxxx";
NSString* accessToken = @"xxxxxxxxxx";
_document = [[VHDocument alloc]initWithChannelID:channelID accessToken:accessToken];
  1. 点播文档模块初始化

获取recordId 和 channelID 参考页首观看文档准备

NSString* recordId = @"xxxxxx";
_document = [[VHDocument alloc]initWithRecordID:recordId];

多channelID情况

NSString* channelID = @"xxxxxx";
NSString* recordId = @"xxxxxx";
_document = [[VHDocument alloc]initWithRecordID:recordId channelID:channelID];

3: 设置 渲染View、delegate

  • delegate 设置文档代理
  • 接下来我们要给文档画面找个地方来显示，iOS系统中使用 view 作为基本的界面渲染单位，所以您只需要准备一个 view 并调整好布局就可以了。
_document.delegate = self;
_document.view.frame = self.view.bounds;
[self.view insertSubview:_document.view atIndex:0];

事件处理

SDK 通过 VHDocumentDelegate 代理来监听文档相关事件

具体 VHDocumentDelegate 中方法参考【文档模块参考手册】

1: 错误回调

/**
 *  错误回调
 *  @param document 文档实例
 *  @param error    错误
 */
- (void)document:(VHDocument *)document error:(NSError *)error;

快速集成代码

可以把观看文档代码写到 ViewController.m 的 viewDidLoad 方法中测试文档，代码如下：

//
//  ViewController.m
//  TestProject
//
//  Created by vhall on 2018/3/12.
//  Copyright © 2018年 vhall. All rights reserved.
//

#import "ViewController.h"

#import "VHDocument.h"

@interface ViewController ()<VHDocumentDelegate>
@property (nonatomic,strong)VHDocument *document;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    NSString* channelID = @"xxxxxx";//channelID 获得方式 参考页面开始处
    NSString* accessToken = @"xxxxxxxxxx";//accessToken 获得方式 参考页面开始处
    NSString* recordId = @"xxxxxx";//recordId 获得方式 参考页面开始处

    //直播文档初始化
    _document = [[VHDocument alloc]initWithChannelID:channelID accessToken:accessToken];

    //点播文档初始化，需要同时初始化点播模块，播放有文档的点播
    //_document = [[VHDocument alloc]initWithRecordID:recordId];

    //设置代理
    _document.delegate = self;
    //设置显示区域
    _document.view.frame = self.view.bounds;
    //加入显示view
    [self.view insertSubview:_document.view atIndex:0];
}


- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (void)viewDidLayoutSubviews
{
    //刷新画布位置
    _document.view.frame = self.view.bounds;
}

#pragma mark - VHDocumentDelegate
/**
 *  错误回调
 *  @param document 文档实例
 *  @param error    错误
 */
- (void)document:(VHDocument *)document error:(NSError *)error
{
    NSLog(@"错误： %@",error );
}

@end

其他相关文档

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

如何通过Android SDK观看文档    

观看文档准备

  1. 注册微吼开发者账号

  2. 创建应用 获取AppID

  3. 设置应用包名、签名

  4. 获取 频道ID channelID

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

  5. 获取包含文档权限的access_token

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

  6. 获取 点播ID recordId

    可以通过【控制台上传】或【测试工具】或【API】获得

工程配置

  1. 在开始使用sdk之前，我们要配置好IDE和创建基础的工程代码。相关内容在【工程配置】中有详细说明 Android OPS

时序图

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

对接流程:

1.1 创建 VHDocument

请先参考观看准备，完成观看准备后会获取ChannelId和AccessToken，获取成功后方可调用此方法 文档的构建有两种方式，用户需要根据自己的业务场景，初始化构造函数不同。

1、 第一种，通过构建VHDocument（mChannelId ， mAccessToken）构造方法，适用于独立的文档直播场景；

2、 第二种，通过构建VHDocument（mChannelId）构造方法，适用于观看录播的过程中，观看此录播对应的文档。

/**
 * 构造VHDocument
 * @Param channelId 上下文
 * @Param accessToken token
 */
document = new VHDocument(channelId, mAccessToken);

1.2 设置文档的显示区域

 /**
 * VHDocumentContainer XML代码展示
 */
<com.vhall.ops.VHDocumentContainer
	android:id="@+id/doc"
	android:layout_width="match_parent"
	android:layout_height="match_parent">
</com.vhall.ops.VHDocumentContainer>

 /**
 * 构造VHDocumentContainer，通过FindById获取对象
 */
view = (VHDocumentContainer) this.findViewById(R.id.doc);

 /**
 * 通过VHDocument设置View，文档的绘制会在VHDocumentContainer进行
 */
public void setDocumentView(IDocumentView view) {}

1.3 加入频道

调用Join()加入频道，获取Document的服务和消息.

 /**
 * 加入频道，Document开始接收消息
 */
public void join();

1.4 离开频道

调用leave()加入频道，终止Document的服务和消息.

 /**
 * 离开频道，Document不再接收消息
 */
public void leave();

代码演示

public class DocActivity extends Activity {
    VHDocument document;
    VHDocumentContainer view;
    private String mChannelId = "";
    private String mAccessToken = "";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mChannelId = getIntent().getStringExtra("channelid");
        mAccessToken = getIntent().getStringExtra("token");
        getWindow().addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON);
        setContentView(R.layout.doc_layout);
        /*** 获取VHDocumentContainerView*/
        view = (VHDocumentContainer) this.findViewById(R.id.doc);
        /*** 获取VHDocument的实例,添加channelId 和 token*/
        document = new VHDocument(mChannelId, mAccessToken);
        /*** 添加View*/
        document.setDocumentView(view);
        /*** 加入服务*/
        document.join();
        if (!VhallSDK.getInstance().isEnable()) {
            Toast.makeText(this, "请先初始化SDK", Toast.LENGTH_SHORT).show();
        }
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        /*** 退出服务*/
        document.leave();
    }
}

参考手册

  1. 快速开始http://doc.vhall.com/docs/show/
  2. 文档模块参考手册

如何通过JS SDK观看文档    

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

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

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

一.接入前准备

  1. 注册微吼开发者账号

  2. 创建应用 获取AppID

  3. 获取 频道ID channelID

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

  4. 获取直播间包含看直播权限的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>

注意：

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

三.代码对接

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

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>

其他相关文档

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

Demo使用指南    

文档演示    

JS Demo    

1演示地址

https://static.vhallyun.com/jssdk/vhall-jssdk-doc-2.0/test/index.html

2实例化

页面中依次输入token、appid、roomid、文档区域宽、文档区域高，点击实例化，进入文档演示页面

注： roomid为选填项，不填写roomid时，不发起直播只进行文档演示。

3文档演示

可在页面选择文档进行加载，并对文档进行翻页、画笔等演示

文档观看    
iOS Demo    

demo支持观看文档和点播文档

下载地址

https://github.com/vhall/VHYun_SDK_iOS

文档

1 填写app_id

进入iOS SDK Demo,弹出输入app_id对话框，对话框中填写应用管理页面获取到的app_id。

2 设置

点击设置，进入设置页面，可进行基础设置和文档设置

基础设置：填写第三方用户ID(是开发者自有用户系统里用户的唯一标识)，详情参考：第三方用户ID（third_party_user_id）是什么？

文档设置：填写获取的channel_id和access_token值

3. 观看文档

设置完成，选择文档，即可进行文档观看

点播文档

1 填写app_id

进入iOS SDK Demo,弹出输入AppID对话框，对话框中填写应用管理设置页面获取到的app_id

2 设置

点击设置，进入设置页面，可进行基础设置和文档设置

基础设置：填写第三方用户ID(是开发者自有用户系统里用户的唯一标识），详情参考：第三方用户ID（third_party_user_id）是什么？

文档设置：填写获取的channel_id和access_token值

点播设置：填写获取的recoed_id和access_token值

3 观看点播文档

设置完成，选择文档，即可同时观看点播视频和文档

Android Demo    

1 下载地址

https://github.com/vhall/VHYun_SDK_Android

2 填写app_id和用户ID

进入Android SDK Demo,页面中输入app_id和用户ID（即第三方用户ID，是开发者自有用户系统里用户的唯一标识）详情参考：第三方用户ID（third_party_user_id）是什么？，填写完毕点击进入，进入操作页面

3 观看文档

操作页面中填写通过控制台、接口或API在线测试工具获取到的channel_id和通过接口或API在线测试工具获取到的access_token值，点击看文档即可观看文档

s

JS Demo    

直播+文档

1 演示地址

https://static.vhallyun.com/jssdk/vhall-jssdk-doc-2.0/test/single-doc-guest.html

2 实例化

页面中依次输入token、appid、roomid、channelid、文档区域宽、文档区域高，点击实例化，进入直播+文档观看页面

注： roomid为选填项，不填写roomid时，则只进行文档观看，进入观看页面时也只是观看文档的演示效果。

3 直播+文档观看

页面中可同时进行直播推流和文档演示。

点播+文档

1 演示地址

https://static.vhallyun.com/jssdk/vhall-jssdk-doc-2.0/test/record-doc-guest.html

2 实例化

页面中依次输入token、appid、channelid、recordid、文档区域宽、文档区域高，点击实例化，进入点播+文档观看页面

3 点播+文档观看

观看对应点播和演示文档画面。

服务定价    

1、计费类型及说明

微吼云文档服务采用后付费方式，即使用服务后扣费的计费方式。您需要先在微吼云账户预先充值，系统会实时的从您的账户余额中扣除实际消费产生的金额。

2、计费方式说明

您可以通过控制台查看微吼云文档服务的实际使用，按照文档演示次数，演示次数即用户观看次数，也等于演示页数。

计费项 计费方式 付费方式
文档 文档演示次数 后付费

2.1 文档演示次数

计费规则

实时进行扣费，按照实时观看次数乘以单价计费。

计费项 价格（元/千页） 计费方式
文档观看次数 1.00 后付费

计费周期

实时扣费，按小时出消费明细，每个月出账单。每个月的账单会在次月1号生成。

计费公式：

观看次数（次数） * 文档单价（元/千页）

计费示例

若老师演示PPT，翻页一次，翻页的同时，有100个人看，观看次数为1*100，即100次

收费：100/1000*1元/千页=0.1元

计费说明

1.实时扣费，请确保账户余额充足，以免影响您的业务

3、欠费说明

1.欠费后工作人员会与您进行联系，如还未进行充值，将会停掉您的服务。

2.开通策略：账户充值余额为正后则会自动开通服务。

常见问题    

使用问题    

1、如何开通文档服务？

创建应用后，点击添加服务，弹出添加服务对话框，选择文档服务，点击确定，文档服务添加成功。

添加服务

2、如何上传文档？

支持通过控制台/接口的方式进行文档上传。

3、上传文档支持哪些格式？

上传文档支持'doc', 'docx','xls', 'xlsx', 'ppt', 'pptx', 'txt', 'pdf', 'gif', 'jpeg', 'jpg', 'png', 'bmp'格式

4、如何实现文档的在线浏览？

  1. 通过API/控制台将文档进行上传
  2. 文档自动进行转码
  3. JS SDK进行文档演示
  4. 使用文档观看JS/Android/iOS SDK，进行文档观看，观看演示文档

5、 文档转码是实时的吗？

文档转码要进行元信息提取、缩略图提取、文档格式转换等一系列计算操作，需要耗费几分钟时间，因此文档转码是异步的。您可以设置回调地址，转码完成时会将相关信息POST到回调地址中。

6、 文档服务中的频道含义及用途？

文档服务使用演示和播放SDK时需要获取频道ID，即channle_id。频道为文档服务的载体，用户需要通过频道进行文档演示和观看，channel_id可通过接口或API在线测试工具获取。

7、 在哪里查文档ID？

通过接口查询，参考链接：http://www.vhallyun.com/document/detail/index?project_id=40&doc_id=1047

SDK问题    

1、在客户端使用文档，需要先创建聊天室？然后进入聊天室的token需要调用服务端的api?

需要创建的是文档服务的频道，不是聊天室，在使用文档服务时使用的token值是通过服务端API获取。

计费问题    

1、 如何购买文档服务？

使用微吼云平台服务，需要预先在账户进行充值，账户中心中点击充值，输入充值金额，点击提交，订单完成后完成充值，或者联系您的客户经理。

账户充值链接：http://www.vhallyun.com/console/financing/index

2、 文档服务的计费方式？

文档服务采用后付费的计费方式，计费项为文档观看次数，文档观看次数为每次翻页时观看人数的叠加。

翻页次数示例：若老师演示50页PPT，每次翻页的同时，有100个人看，观看次数为50*100，即5000次

具体服务定价参考：http://www.vhallyun.com/document/detail/index?project_id=38&doc_id=915

3、 账户余额不足时会进行提醒吗？

用户可在账户中心设置余额提醒默认为0，低于设置的余额时会通过短信的方式对用户进行提醒，及时充值，确保服务的顺利使用。

4、 欠费后会立刻停止服务吗？

欠费后工作人员会与您进行联系，如还未进行充值，将会停掉您的服务。 开通策略：账户充值余额为正后则会自动开通服务。