PaaS JS-SDK 文档库草稿箱
直播
#PAAS JSSDK 直播包
直播介绍
介绍
微吼直播推流JSSDK,是微吼官方推出的用于网页直播的软件开发工具包,提供简单便捷的开发接口,帮助开发者在Web平台上快速开发直播推流应用。
功能特性
- 基于Flash开发的推流引擎
- 支持推流到RTMP服务器
- 支持音视频设备管理
- 资源占用率低、库文件小
核心优势
简单易用
提示:本文档适合有一定Javascript语言基础的开发人员阅读。
直播概念说明
直播概念说明
推流
推流,是指将音视频数据采集编码之后,推送到您指定的视频云平台上,这里涉及大量的音视频基础知识,而且需要长时间的打磨和优化才能达到符合预期的效果。
微吼云推流JSSDK 主要帮您解决在web上的推流问题,它的接口非常简单易用,只需要简单几步,就能驱动。
直播使用流程
直播使用流程
setp1: 成为开发者
你需要有一个微云平台的账号,如已有则跳过此步骤, 否则,移步微吼云注册一个账号。
step2: 创建应用
登陆微吼云>>创建应用 得到相应AppId和房间ID(roomId),在初始化时会用到。
step3 添加服务
登陆微吼云如果未添加直播服务,需添加直播服务>>添加直播服务
step4: SDK引入
在需要播放视频的页面(包括PC或H5)中引入初始化脚本
<script src="https://static.vhallyun.com/jssdk/vhall-jssdk-live-stream-1.0.0.js"></script>
<script src="https://static.vhallyun.com/jssdk/vhall-jssdk-base-1.0.0.js"></script>
注意:
- 直接用本地网页是调试不了的
- 上面两个文件都需要引用,而且顺序需要保持与上面一致
- 建议直接复制上面代码
step5: 创建推流器对象
在需要web直播推流的页面位置加入推流器容器,也就是放一个div,然后给它取个名字,比如: my-publisher 。之后推流回显画面都会在这个容器里渲染,示例代码如下:
<div id="my-publisher"></div>
step6: 注册ready事件
Vhall.ready(function(){
//todo
})
注意: 初始化完成之后,会执行ready回调事件,机制同jQuery ready事件,推流逻辑需要写在此事件里。
step7: 初始化SDK配置
初始化配置:
Vhall.config({
appId :'',//应用 ID ,必填
accountId :'',//第三方用户唯一标识,必填
token:'',//token必填
})
注意: appId获取方式:登陆微吼云>>进应用管理>>取得对应AppId token生成方式:通过API生成,生成accessToken接口说明
直播API文档
直播API文档
1. 初始化推流
VHPublisher.init({
roomId:'lss_22b89748',//房间名称
videoNode:'my-publisher',//推流容器
//调用推流接口后完成事件,注意,是调用接口事件完成,不是推流结束。
complete:function(){
//to do
}
});
注意:
1.此方法必需写在Vhall.ready事件里。
2.roomId获取方式,登陆微吼云>>进入应用管理>>找到对应需要推流的应用>>点“直播管理”>>房间管理>>取得相应房间ID。
3.videoNode,为推流回显容器的Id,需要开发者自己在需要显示回显的地方,创建一个空div,然后给Id命名,再将id名称写入此参数。参考 “直播使用流程step5: 创建推流器对象”
2. 开始推流
此方法既可以不传任何参数来调用(使用默认参数),也可以自定义参数来调用,如下示例:
//简单调用方法
VHPublisher.startPush();
//自定义参数调用方法
VHPublisher.startPush({
camera:'',//摄像头名称,不传值则使用默认摄像头
mic:'',//麦克风名称,不传值则使用默认麦克风
width:'',//推流分辨率的宽度,不传值则使用默认分辨率:853,
height:'',//推流分辨率的高度,不传值则使用默认分辨率:480
//成功回调,非必填
success:function(){
//after success todo
},
//失败回调,非必填
fail:function(){
//after failed todo
}
});
注意: 此方法必需写在Vhall.ready事件里。
3. 停止推流
此方法既可以不传任何参数来调用,也可以自定义参数(设置推流回调)来调用,如下示例:
//简单调用方法
VHPublisher.stopPush();
//自定义参数调用方法
VHPublisher.stopPush({
//停止推流完成事件,非必填
complete:function(){
//todo
}
});
4. 异常处理
VHPublisher.error
VHPublisher.error(function(e){
//返回值 res {code:消息码, msg: 提示}
});
code码说明:
code | 说明 |
---|---|
1001 | 缺少基础类Vhall |
1002 | roomId不能为空 |
1003 | 当前浏览器版本,在http协议下,不支持获取设备信息 |
1004 | 推流地址错误,请先初始化,再推流 |
2001 | flash初始化失败 |
注意事项
- 必须打开浏览器摄像头权限;
- 必须打开浏览器麦克风权限;
- 必须在推流器初始化以后才能调用推流器的相关方法,否则会报错失败;
- Chrome 60+ 建议使用https方式推流, http方式可能会获取不到设备名称导致推流不成功;
直播Demo源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo for push stream</title>
<script src="https://static.vhallyun.com/jssdk/vhall-jssdk-live-stream-1.0.0.js?v=201802021400"></script>
<script src="https://static.vhallyun.com/jssdk/vhall-jssdk-base-1.0.0.js?v=201802021400"></script>
<style>
body{
background-color: #000;
/* height: 800px;
line-height: 800px;*/
}
.ctrl-box{
margin:0 auto;
text-align: center;
margin:10% 0px 30px 0px;
}
.video-box{
margin:0 auto;
width: 854px;
height: 480px;
}
#btn-start-push{
min-width: 80px;
padding: 5px 10px;
height: 30px;
background-color: #1f88e4;
border: 1px solid #1f88e4;
border-radius: 2px;
color: #fff;
outline: none;
}
</style>
</head>
<body>
<div class="ctrl-box"><button id="btn-start-push">开推</button></div>
<div class="video-box" >
<div id="my-publisher" ></div>
</div>
</body>
<script>
Vhall.ready(function(){
//todo
VHPublisher.error(function(e){
console.error(e.msg);
});
VHPublisher.init({
roomId:'lss_c063b5c9',//房间名称
videoNode:'my-publisher',//推流容器
//调用推流接口后完成事件,注意,是调用接口事件完成,不是推流结束。
complete:function(){
//to do
}
});
});
Vhall.config({
appId :'76043aaf',//应用 ID ,必填
accountId :'10000126',//第三方用户唯一标识,必填
token:'vhall',//token必填
});
var startBtn = document.getElementById('btn-start-push');
startBtn.addEventListener('click',startPush);
/**
* 开始推流
*/
function startPush(){
startBtn.innerHTML = '启动推流中...';
VHPublisher.startPush({
success: function(){
startBtn.removeEventListener('click',startPush);
startBtn.innerHTML = '停推';
startBtn.addEventListener('click',stopPush);
},
fail: function(e){
console.error('推流出错',e.msg);
},
complete: function(e){
}
});
}
function stopPush(){
VHPublisher.stopPush({
complete: function(){
startBtn.removeEventListener('click',stopPush);
startBtn.addEventListener('click',startPush);
startBtn.innerHTML = '开推'
}
});
}
</script>
</html>
直播HowTo
HowTo直播
准备工作:注册微吼云账号,并拿到appId,如未则点击微吼云
SDK引入
在需要播放视频的页面(包括PC或H5)中引入初始化脚本
<script src="https://static.vhallyun.com/jssdk/vhall-jssdk-live-stream-1.0.0.js"></script>
<script src="https://static.vhallyun.com/jssdk/vhall-jssdk-base-1.0.0.js"></script>
注意:
- 直接用本地网页是调试不了的
- 上面两个文件都需要引用,而且顺序需要保持与上面一致
- 建议直接复制上面代码
创建推流器对象
在需要web直播推流的页面位置加入推流器容器,也就是放一个div,然后给它取个名字,比如: my-publisher 。之后推流回显画面都会在这个容器里渲染,示例代码如下:
<div id="my-publisher"></div>
注册ready事件
Vhall.ready(function(){
//todo
})
注意: 初始化完成之后,会执行ready回调事件,机制同jQuery ready事件,推流逻辑需要写在此事件里。
初始化SDK配置
初始化配置:
Vhall.config({
appId :'',//应用 ID ,必填
accountId :'',//第三方用户唯一标识,必填
token:'',//token必填
})
注意: appId获取方式:登陆微吼云>>进应用管理>>取得对应AppId token生成方式:通过API生成,生成accessToken接口说明
初始化推流
VHPublisher.init({
roomId:'lss_22b89748',//房间名称
videoNode:'my-publisher',//推流容器
//调用推流接口后完成事件,注意,是调用接口事件完成,不是推流结束。
complete:function(){
//to do
}
});
注意:
1.此方法必需写在Vhall.ready事件里。
2.roomId获取方式,登陆微吼云>>进入应用管理>>找到对应需要推流的应用>>点“直播管理”>>房间管理>>取得相应房间ID。
3.videoNode,为推流回显容器的Id,需要开发者自己在需要显示回显的地方,创建一个空div,然后给Id命名,再将id名称写入此参数。参考 “直播使用流程step5: 创建推流器对象”
推流
此方法既可以不传任何参数来调用(使用默认参数),也可以自定义参数来调用,如下示例:
//简单调用方法
VHPublisher.startPush();
//自定义参数调用方法
VHPublisher.startPush({
camera:'',//摄像头名称,不传值则使用默认摄像头
mic:'',//麦克风名称,不传值则使用默认麦克风
width:'',//推流分辨率的宽度,不传值则使用默认分辨率:853,
height:'',//推流分辨率的高度,不传值则使用默认分辨率:480
//成功回调,非必填
success:function(){
//after success todo
},
//失败回调,非必填
fail:function(){
//after failed todo
}
});
注意: 此方法必需写在Vhall.ready事件里。
完整代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo for push stream</title>
<script src="https://static.vhallyun.com/jssdk/vhall-jssdk-live-stream-1.0.0.js?v=201802021400"></script>
<script src="https://static.vhallyun.com/jssdk/vhall-jssdk-base-1.0.0.js?v=201802021400"></script>
<style>
body{
background-color: #000;
/* height: 800px;
line-height: 800px;*/
}
.ctrl-box{
margin:0 auto;
text-align: center;
margin:10% 0px 30px 0px;
}
.video-box{
margin:0 auto;
width: 854px;
height: 480px;
}
#btn-start-push{
min-width: 80px;
padding: 5px 10px;
height: 30px;
background-color: #1f88e4;
border: 1px solid #1f88e4;
border-radius: 2px;
color: #fff;
outline: none;
}
</style>
</head>
<body>
<div class="ctrl-box"><button id="btn-start-push">开推</button></div>
<div class="video-box" >
<div id="my-publisher" ></div>
</div>
</body>
<script>
Vhall.ready(function(){
//todo
VHPublisher.error(function(e){
console.error(e.msg);
});
VHPublisher.init({
roomId:'lss_c063b5c9',//房间名称
videoNode:'my-publisher',//推流容器
//调用推流接口后完成事件,注意,是调用接口事件完成,不是推流结束。
complete:function(){
//to do
}
});
});
Vhall.config({
appId :'76043aaf',//应用 ID ,必填
accountId :'10000126',//第三方用户唯一标识,必填
token:'vhall',//token必填
});
var startBtn = document.getElementById('btn-start-push');
startBtn.addEventListener('click',startPush);
/**
* 开始推流
*/
function startPush(){
startBtn.innerHTML = '启动推流中...';
VHPublisher.startPush({
success: function(){
startBtn.removeEventListener('click',startPush);
startBtn.innerHTML = '停推';
startBtn.addEventListener('click',stopPush);
},
fail: function(e){
console.error('推流出错',e.msg);
},
complete: function(e){
}
});
}
function stopPush(){
VHPublisher.stopPush({
complete: function(){
startBtn.removeEventListener('click',stopPush);
startBtn.addEventListener('click',startPush);
startBtn.innerHTML = '开推'
}
});
}
</script>
</html>
直播参考手册
直播参考手册
VHPublisher.init 初始化推流
VHPublisher.init({
roomId:'lss_22b89748',//房间名称
videoNode:'my-publisher',//推流容器
//调用推流接口后完成事件,注意,是调用接口事件完成,不是推流结束。
complete:function(){
//to do
}
});
注意:
1.此方法必需写在Vhall.ready事件里。
2.roomId获取方式,登陆微吼云>>进入应用管理>>找到对应需要推流的应用>>点“直播管理”>>房间管理>>取得相应房间ID。
3.videoNode,为推流回显容器的Id,需要开发者自己在需要显示回显的地方,创建一个空div,然后给Id命名,再将id名称写入此参数。参考 “直播使用流程step5: 创建推流器对象”
VHPublisher.startPush 开始推流
此方法既可以不传任何参数来调用(使用默认参数),也可以自定义参数来调用,如下示例:
//简单调用方法
VHPublisher.startPush();
//自定义参数调用方法
VHPublisher.startPush({
camera:'',//摄像头名称,不传值则使用默认摄像头
mic:'',//麦克风名称,不传值则使用默认麦克风
width:'',//推流分辨率的宽度,不传值则使用默认分辨率:853,
height:'',//推流分辨率的高度,不传值则使用默认分辨率:480
//成功回调,非必填
success:function(){
//after success todo
},
//失败回调,非必填
fail:function(){
//after failed todo
}
});
注意: 此方法必需写在Vhall.ready事件里。
VHPublisher.stopPush 停止推流
此方法既可以不传任何参数来调用,也可以自定义参数(设置推流回调)来调用,如下示例:
//简单调用方法
VHPublisher.stopPush();
//自定义参数调用方法
VHPublisher.stopPush({
//停止推流完成事件,非必填
complete:function(){
//todo
}
});
VHPublisher.error 异常处理
VHPublisher.error
VHPublisher.error(function(e){
//返回值 res {code:消息码, msg: 提示}
});
code码说明:
code | 说明 |
---|---|
1001 | 缺少基础类Vhall |
1002 | roomId不能为空 |
1003 | 当前浏览器版本,在http协议下,不支持获取设备信息 |
1004 | 推流地址错误,请先初始化,再推流 |
2001 | flash初始化失败 |
注意事项
- 必须打开浏览器摄像头权限;
- 必须打开浏览器麦克风权限;
- 必须在推流器初始化以后才能调用推流器的相关方法,否则会报错失败;
- Chrome 60+ 建议使用https方式推流, http方式可能会获取不到设备名称导致推流不成功;
点播
#PAAS JSSDK 点播包
点播介绍
点播介绍
微吼JSSDK,是微吼开放平台面向web开发者提供的基于微吼直播服务的开发工具包,面向开发者提供直播推流、直播观看、点播观看、聊天、文档等功能。此部分为播放包,用于观看端。
提示:本文档适合有一定Javascript语言基础的开发人员阅读。
点播概念说明
点播概念说明
基础知识
对接之前先要了解如下的基础知识,非常有必要:
-
直播和点播 直播是指视频源是实时的,一旦主播停播了,这个地址就已经失去意义了,而且由于是实时直播,所以播放器在播直播视频的时候是没有进度条滴。 点播是指视频源是一个服务器上的文件,文件只要没有被提供方删除,就随时可以播放, 而且由于整个视频都在服务器上,所以播放器在播点播视频的时候是有进度条的。
-
协议的支持(手机) Web播放器的视频播放能力本身不是网页代码实现的,而是靠浏览器的支持,所以其兼容性并不像我们想象的那么好,您必须要接受一个事实:不是所有的手机浏览器都能有符合预期的表现,有些手机浏览器甚至根本就不支持视频播放。
最常见的用于网页直播的视频源地址是以m3u8结尾的地址,我们称其为HLS (HTTP Live Streaming),这是苹果推出的标准。由于苹果的影响力,目前各手机浏览器产品对这种格式的兼容性最好,但它有个天然的问题,就是延迟比较大,一般是10-15秒左右的延迟,没有办法,在手机浏览器上我们并没有其它选择。
-
协议的支持(PC) 在PC上情况会好很多,因为PC上的浏览器目前还没有抛弃flash控件,而flash控件的开发商 Adobe 并不追求设计上的洁癖,所以flash支持的视频源格式挺多的,而且各浏览器上的flash控件都是Adobe它家自己开发,所以兼容性非常好(也是因为这个原因,意图推广 webrtc 和 HTML5 技术的 Google 在最新版的 Chrome 浏览器里默认禁用了 Flash)
视频协议 用途 示例地址 PC浏览器 移动浏览器 HLS(m3u8) 可用于直播 http://live.mydomain.com/xxxx/a.m3u8 支持 支持 HLS(m3u8) 可用于点播 http://vod.mydomain.com/xxxx/b.m3u8 支持 支持 FLV 可用于直播 http://live.mydomain.com/xxxx/a.flv 支持 不支持 FLV 可用于点播 http://vod.mydomain.com/xxxx/b.flv 支持 不支持 RTMP 只适用直播 http://live.mydomain.com/xxxx 支持 不支持 MP4 只适用点播 http://vod.mydomain.com/xxx/a.mp4 支持 支持
点播使用流程
点播使用流程
setp1: 成为开发者
你需要有一个微云平台的账号,如已有则跳过此步骤, 否则,移步微吼云注册一个账号。
step2: 创建应用
登陆微吼云>>创建应用 得到相应AppId和房间ID(roomId),在初始化时会用到。
step3 添加服务
登陆微吼云如果未添加点播服务,需添加点播服务>>添加点播服务
step3: 页面引入依赖资源
在需要播放视频的页面(包括PC或H5)中引入初始化脚本
<link rel="stylesheet" href="https://static.vhallyun.com/jssdk/videojs.min.css?v=1.0.0"></script><!--播放器默认样式,需要引用在包含在页面的head标签里-->
<script src="https://static.vhallyun.com/jssdk/dvideo-plugin.js?v=1.0.0"></script><!--依赖的播放器资源-->
step4: 页面引用SDK文件
在需要播放视频的页面(包括PC或H5)中引入初始化脚本
<link rel="stylesheet" href="https://static.vhallyun.com/jssdk/videojs.min.css?v=1.0.0"></script><!--播放器默认样式,需要引用在包含在页面的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.0.0.js"></script>
<script src="https://static.vhallyun.com/jssdk/vhall-jssdk-base-1.0.0.js"></script>
注意:
- 直接用本地网页是调试不了的
- 上面所有文件都需要引用,而且顺序需要保持与上面一致
- 建议直接复制上面代码
step5: 页面创建播放器容器
在需要web播放的页面位置加入播放器对象容器,也就是放一个div,然后给它取个名字,比如: my-video 。之后推流回显画面都会在这个容器里渲染,容器的大小控制您可以使用div的属性进行控制,示例代码如下:
<div id="my-video" style="width:100%; height:450px;"></div>
step6: 注册ready事件
Vhall.ready(function(){
//todo
})
注意: 初始化完成之后,会执行ready回调事件,机制同jQuery ready事件,播放器调用逻辑需要写在此事件里。
step7: 初始化SDK配置
初始化配置:
Vhall.config({
appId :'',//应用 ID ,必填
accountId :'',//第三方用户唯一标识,必填
token:'',//token必填
})
注意: appId获取方式:登陆微吼云>>进应用管理>>取得对应AppId token生成方式:通过API生成,生成accessToken接口说明
点播API文档
点播API文档
调用说明
所有接口通过VhallPlayer对象来调用,参数是一个对象,除了每个接口本身需要传的参数之外,还有以下通用参数:
- success:接口调用成功时执行的回调函数。
- fail:接口调用失败时执行的回调函数。
- complete:接口调用完成时执行的回调函数,无论成功或失败都会执行。
API接口
1. VhallPlayer.init 播放器初始化
VhallPlayer.init({
roomId:'', //房间ID,直播必填,点播不写
recordId:'',//回放Id,点播必填,直播不写
type:'live',//播放类型,必填,live 直播, vod 为点播
videoNode:'',//推流视频回显节点id,必填
complete:function(){
}
});
注意:
2. 播放
VhallPlayer.play 播放
VhallPlayer.play();
3. 暂停
VhallPlayer.pause;
VhallPlayer.pause();
4. 获取视频清晰度
VhallPlayer.getQuality
/**
* 获取视频清晰度
* @return {Array} 清晰度数组,如: [same,720,480],same为原画
*/
VhallPlayer.getQuality();
返回清晰度数组,数组元素为清晰度值
5.设置视频清晰度
此方法的参数为视频清晰度,值必须来源于getQuality方法, 获取方式:调用getQuality,将返回数组中的任何一个值,传入即可。示例代码如下。 VhallPlayer.setQuality
/**
* @param {string} quality 视频清晰度,值来源于getQuality方法
*/
VhallPlayer.setQuality(VhallPlayer.getQuality()[0]);
6.设置全屏
VhallPlayer.setFullScreen
/**
* 设置全屏
* @param {bool} true 或空为全屏,false为退出全屏
*/
VhallPlayer.setFullScreen(bool);
7.获取当前是否全屏
VhallPlayer.isFullscreen
/**
* 获取当前是否全屏
* @return {bool} 是否全屏,true or false
*/
VhallPlayer.isFullscreen();
8.设置音量
VhallPlayer.setVolume
/**
* 设置音量
* @param {int} volume 0~100 的数字,0 静音
*/
VhallPlayer.setVolume(volume);
注意:默认音量为60
9.设置播宽度
VhallPlayer.setWidth
/**
* 设置宽度
* @param {int} width 整形数字
*/
VhallPlayer.setWidth(width);
注意:默认视频宽度为,step5中设置的容器的宽度。
10.设置高度
VhallPlayer.setHeight
/**
* 设置宽度
* @param {int} height 整形数字
*/
VhallPlayer.setHeight(height);
注意:默认视频高度为,step4中设置的容器的高度。
11.获取当前视频总时长
VhallPlayer.getDuration
/**
* 获取当前视频总时长
* @return {int} 单位秒
*/
VhallPlayer.getDuration();
12.获取当前播放的时间
VhallPlayer.getCurrentTime
/**
* 获取当前播放的时间
* @return {int} 单位秒
*/
VhallPlayer.getCurrentTime();
13.设置当前播放时间
VhallPlayer.seek
/**
* 设置当前播放时间
* @return {int} 单位秒
*/
VhallPlayer.seek(time);
此接口只支持点播
14.获取当前网络状态
VhallPlayer.getNetworkState
/**
* 获取当前网络状态
* @return {int} 0:音频/视频尚未初始化,1:音频/视频是活动的且已选取资源,但并未使用网络,2:浏览器正在下载数据,3:未找到音频/视频来源
*/
VhallPlayer.getNetworkState();
返回码 | 说明 |
---|---|
0 | 音频/视频尚未初始化 |
1 | 音频/视频是活动的且已选取资源,但并未使用网络 |
2 | 浏览器正在下载数据 |
3 | 未找到音频/视频来源 |
15.推流端开始推流事件
此事件发起直播时才会触发,注册方法如下:
VhallPlayer.onPublishStart
VhallPlayer.onPublishStart(function(){
console.log('直播开始!');
})
16.推流端停止推流事件
此事件停止直播时才会触发,注册方法如下:
VhallPlayer.onPublishStop
VhallPlayer.onPublishStop(function(){
console.log('直播结束!');
})
播放Demo源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo for push stream</title>
<link rel="stylesheet" href="https://static.vhallyun.com/jssdk/videojs.min.css?v=1.0.0"></script><!--播放器默认样式,需要引用在包含在页面的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.0.0.js"></script>
<script src="https://static.vhallyun.com/jssdk/vhall-jssdk-base-1.0.0.js"></script>
<style>
body{
background-color: #000;
/* height: 800px;
line-height: 800px;*/
}
.video-box{
margin:0 auto;
width: 854px;
height: 480px;
}
</style>
</head>
<body>
<div class="video-box" >
<div id="myVideo" style="width:100%; height:450px;"></div>
</div>
</body>
<script>
Vhall.ready(function(){
VhallPlayer.init({
roomId:'lss_c063b5c9', //房间ID,直播必填,点播不写
recordId:'',//回放Id,点播必填,直播不写
type:'live',//播放类型,必填,live 直播, vod 为点播
videoNode:'myVideo',//推流视频回显节点id,必填
complete:function(){
VhallPlayer.play();
}
});
});
Vhall.config({
appId :'76043aaf',//应用 ID ,必填
accountId :'10000126',//第三方用户唯一标识,必填
token:'vhall',//token必填
});
</script>
</html>
点播HowTo
HowTo点播
准备工作:注册微吼云账号,并拿到appId,如未则点击微吼云
页面引入依赖资源
在需要播放视频的页面(包括PC或H5)中引入初始化脚本
<link rel="stylesheet" href="https://static.vhallyun.com/jssdk/videojs.min.css?v=1.0.0"></script><!--播放器默认样式,需要引用在包含在页面的head标签里-->
<script src="https://static.vhallyun.com/jssdk/dvideo-plugin.js?v=1.0.0"></script><!--依赖的播放器资源-->
页面引用SDK文件
在需要播放视频的页面(包括PC或H5)中引入初始化脚本
<link rel="stylesheet" href="https://static.vhallyun.com/jssdk/videojs.min.css?v=1.0.0"></script><!--播放器默认样式,需要引用在包含在页面的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.0.0.js"></script>
<script src="https://static.vhallyun.com/jssdk/vhall-jssdk-base-1.0.0.js"></script>
注意:
- 直接用本地网页是调试不了的
- 上面所有文件都需要引用,而且顺序需要保持与上面一致
- 建议直接复制上面代码
页面创建播放器容器
在需要web播放的页面位置加入播放器对象容器,也就是放一个div,然后给它取个名字,比如: my-video 。之后推流回显画面都会在这个容器里渲染,容器的大小控制您可以使用div的属性进行控制,示例代码如下:
<div id="my-video" style="width:100%; height:450px;"></div>
注册ready事件
Vhall.ready(function(){
//todo
})
注意: 初始化完成之后,会执行ready回调事件,机制同jQuery ready事件,播放器调用逻辑需要写在此事件里。
初始化SDK配置
初始化配置:
Vhall.config({
appId :'',//应用 ID ,必填
accountId :'',//第三方用户唯一标识,必填
token:'',//token必填
})
注意: appId获取方式:登陆微吼云>>进应用管理>>取得对应AppId token生成方式:通过API生成,生成accessToken接口说明
播放器初始化
VhallPlayer.init({
roomId:'', //房间ID,直播必填,点播不写
recordId:'',//回放Id,点播必填,直播不写
type:'live',//播放类型,必填,live 直播, vod 为点播
videoNode:'',//推流视频回显节点id,必填
complete:function(){
}
});
注意:
播放
VhallPlayer.play 播放
VhallPlayer.play();
完整代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo for push stream</title>
<link rel="stylesheet" href="https://static.vhallyun.com/jssdk/videojs.min.css?v=1.0.0"></script><!--播放器默认样式,需要引用在包含在页面的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.0.0.js"></script>
<script src="https://static.vhallyun.com/jssdk/vhall-jssdk-base-1.0.0.js"></script>
<style>
body{
background-color: #000;
/* height: 800px;
line-height: 800px;*/
}
.video-box{
margin:0 auto;
width: 854px;
height: 480px;
}
</style>
</head>
<body>
<div class="video-box" >
<div id="myVideo" style="width:100%; height:450px;"></div>
</div>
</body>
<script>
Vhall.ready(function(){
VhallPlayer.init({
roomId:'lss_c063b5c9', //房间ID,直播必填,点播不写
recordId:'',//回放Id,点播必填,直播不写
type:'live',//播放类型,必填,live 直播, vod 为点播
videoNode:'myVideo',//推流视频回显节点id,必填
complete:function(){
VhallPlayer.play();
}
});
});
Vhall.config({
appId :'76043aaf',//应用 ID ,必填
accountId :'10000126',//第三方用户唯一标识,必填
token:'vhall',//token必填
});
</script>
</html>
点播参考手册
点播参考手册
VhallPlayer.init 播放器初始化
VhallPlayer.init({
roomId:'', //房间ID,直播必填,点播不写
recordId:'',//回放Id,点播必填,直播不写
type:'live',//播放类型,必填,live 直播, vod 为点播
videoNode:'',//推流视频回显节点id,必填
complete:function(){
}
});
注意:
VhallPlayer.play 播放
VhallPlayer.play 播放
VhallPlayer.play();
VhallPlayer.pause 暂停
VhallPlayer.pause;
VhallPlayer.pause();
VhallPlayer.getQuality 获取视频清晰度
VhallPlayer.getQuality
/**
* 获取视频清晰度
* @return {Array} 清晰度数组,如: [same,720,480],same为原画
*/
VhallPlayer.getQuality();
返回清晰度数组,数组元素为清晰度值
VhallPlayer.setQuality 设置视频清晰度
此方法的参数为视频清晰度,值必须来源于getQuality方法, 获取方式:调用getQuality,将返回数组中的任何一个值,传入即可。示例代码如下。 VhallPlayer.setQuality
/**
* @param {string} quality 视频清晰度,值来源于getQuality方法
*/
VhallPlayer.setQuality(VhallPlayer.getQuality()[0]);
VhallPlayer.setFullScreen 设置全屏
VhallPlayer.setFullScreen
/**
* 设置全屏
* @param {bool} true 或空为全屏,false为退出全屏
*/
VhallPlayer.setFullScreen(bool);
VhallPlayer.isFullscreen 获取当前是否全屏
VhallPlayer.isFullscreen
/**
* 获取当前是否全屏
* @return {bool} 是否全屏,true or false
*/
VhallPlayer.isFullscreen();
VhallPlayer.setVolume 设置音量
VhallPlayer.setVolume
/**
* 设置音量
* @param {int} volume 0~100 的数字,0 静音
*/
VhallPlayer.setVolume(volume);
注意:默认音量为60
VhallPlayer.setWidth 设置播宽度
VhallPlayer.setWidth
/**
* 设置宽度
* @param {int} width 整形数字
*/
VhallPlayer.setWidth(width);
注意:默认视频宽度为,step5中设置的容器的宽度。
VhallPlayer.setHeight 设置高度
VhallPlayer.setHeight
/**
* 设置宽度
* @param {int} height 整形数字
*/
VhallPlayer.setHeight(height);
注意:默认视频高度为,step4中设置的容器的高度。
VhallPlayer.getDuration 获取当前视频总时长
VhallPlayer.getDuration
/**
* 获取当前视频总时长
* @return {int} 单位秒
*/
VhallPlayer.getDuration();
VhallPlayer.getCurrentTime 获取当前播放的时间
VhallPlayer.getCurrentTime
/**
* 获取当前播放的时间
* @return {int} 单位秒
*/
VhallPlayer.getCurrentTime();
VhallPlayer.seek 设置当前播放时间
VhallPlayer.seek
/**
* 设置当前播放时间
* @return {int} 单位秒
*/
VhallPlayer.seek(time);
此接口只支持点播
VhallPlayer.getNetworkState 获取当前网络状态
VhallPlayer.getNetworkState
/**
* 获取当前网络状态
* @return {int} 0:音频/视频尚未初始化,1:音频/视频是活动的且已选取资源,但并未使用网络,2:浏览器正在下载数据,3:未找到音频/视频来源
*/
VhallPlayer.getNetworkState();
返回码 | 说明 |
---|---|
0 | 音频/视频尚未初始化 |
1 | 音频/视频是活动的且已选取资源,但并未使用网络 |
2 | 浏览器正在下载数据 |
3 | 未找到音频/视频来源 |
VhallPlayer.onPublishStart 推流端开始推流事件
此事件发起直播时才会触发,注册方法如下:
VhallPlayer.onPublishStart
VhallPlayer.onPublishStart(function(){
console.log('直播开始!');
})
VhallPlayer.onPublishStop 推流端停止推流事件
此事件停止直播时才会触发,注册方法如下:
VhallPlayer.onPublishStop
VhallPlayer.onPublishStop(function(){
console.log('直播结束!');
})
文档
##文档
文档介绍
文档介绍
微吼JSSDK,是微吼开放平台面向web开发者提供的基于微吼直播服务的开发工具包,面向开发者提供直播推流、直播观看、点播观看、聊天、文档等功能。此部分为文档包,用于文档服务。
功能特性
- 基于HTML5开发
- 支持PPT、Word、PDF JPG 等文档类型
- 支持画笔
核心优势
简单易用
提示:本文档适合有一定Javascript语言基础的开发人员阅读。
文档使用流程
文档使用流程
setp1: 成为开发者
你需要有一个微云平台的账号,如已有则跳过此步骤, 否则,移步微吼云注册一个账号。
step2: 创建应用
登陆微吼云>>创建应用 得到相应AppId和房间ID(roomId),在初始化时会用到。
step3 添加服务
登陆微吼云如果未添加文档服务,需添加文档服务>>添加文档服务
step4: 页面引用SDK文件
在需要播放视频的页面(包括PC或H5)中引入初始化脚本
<script src="https://static.vhallyun.com/jssdk/vhall-jssdk-doc-1.0.0.js"></script>
<script src="https://static.vhallyun.com/jssdk/vhall-jssdk-base-1.0.0.js"></script>
注意:
- 直接用本地网页是调试不了的
- 上面所有文件都需要引用,而且顺序需要保持与上面一致
- 建议直接复制上面代码
step5: 创建文档容器
在需要web播放的页面位置加入播放器对象容器,也就是放一个div,然后给它取个名字,比如: my-video 。之后推流回显画面都会在这个容器里渲染,容器的大小控制您可以使用div的属性进行控制,示例代码如下:
<div id="my-doc" style="width:100%; height:450px;"></div>
step6: 注册ready事件
Vhall.ready(function(){
//todo
})
注意: 初始化完成之后,会执行ready回调事件,机制同jQuery ready事件,播放器调用逻辑需要写在此事件里。
step7: 初始化SDK配置
初始化配置:
Vhall.config({
appId :'',//应用 ID ,必填
accountId :'',//第三方用户唯一标识,必填
token:'',//token必填
})
注意: appId获取方式:登陆微吼云>>进应用管理>>取得对应AppId token生成方式:通过API生成,生成accessToken接口说明
文档API文档-主持端
- 点播参考手册
- VhallPlayer.init 播放器初始化
- VhallPlayer.play 播放
- VhallPlayer.pause 暂停
- VhallPlayer.getQuality 获取视频清晰度
- VhallPlayer.setQuality 设置视频清晰度
- VhallPlayer.setFullScreen 设置全屏
- VhallPlayer.isFullscreen 获取当前是否全屏
- VhallPlayer.setVolume 设置音量
- VhallPlayer.setWidth 设置播宽度
- VhallPlayer.setHeight 设置高度
- VhallPlayer.getDuration 获取当前视频总时长
- VhallPlayer.getCurrentTime 获取当前播放的时间
- VhallPlayer.seek 设置当前播放时间
- VhallPlayer.getNetworkState 获取当前网络状态
- VhallPlayer.onPublishStart 推流端开始推流事件
- VhallPlayer.onPublishStop 推流端停止推流事件
微吼云JSSDK文档包,主持端
说明:此接口包含两部分,1-8为对画笔的操作,9-16为对文档的操作。
1 初始化
var doc = new VhallDoc({
docNode:'my-doc',//文档容器
width:'800'//文档显示的宽度,非必填
height:'450'//文档显示的高度,非必填
});
参数说明
name | type | require | description |
---|---|---|---|
docNode | string | yes | 文档容器 |
width | string | no | 文档显示的宽度 |
height | string | no | 文档显示的高度 |
2 设置画笔大小
/**
* 设置画笔大小
* @param {int} size 画笔大小值
*/
doc.setSize(size);
设置画笔大小, 参数为int型,如:doc.setSize(10);
3 设置画笔颜色
/**
* 设置画笔颜色
* @param {string} color 画笔色值
*/
doc.setColor(color)
color的值以#号开头的RGB值,如:doc.setColor("#000000")
4 设置文字
/**
* 设置文字
* @param {string} text 文字内容
*/
doc.setText(text)
设置文字, 如:doc.setText("Hello word!")
5 设置橡皮擦
/**
* 设置橡皮擦
* @param {int} size 橡皮擦大小值
*/
doc.setEraser(size)
设置橡皮擦, 参数为int型,如:doc.setEraser(10);
6 重置画笔
/**
* 重置画笔
* @param {int} size 画笔尺寸
* @param {[int]} color [画笔颜色]
*/
doc.reset(size,color)
重新设置画笔,如:doc.reset(10,"#000000")
7 清除画板
/**
* 清除画板
* @return {[type]} [description]
*/
doc.clear();
执行此方法后,整个画布清空。
8 取消画笔
/**
* 取消画笔
* @param {boolean} isCancel 是否取消,默认true
*/
_self.cancelPencil();
执行此方法后,就取消画笔操作,恢复文档点击翻页操作。
9 上一张◀️
/**
* 上一张◀️
*/
doc.preSlide();
执行此方法,文档向上翻一张
10 下一张▶️
/**
* 下一张▶️
*/
doc.nextSlide();
执行此方法,文档向下翻一张
11 上一步
/**
* 上一步
*/
doc.preStep()
如果文档为ppt,执行此方法,文档动画向上一步,文档为非PPT,执行方法不进行任何操作。
12 下一步
/**
* 下一步
*/
doc.nextStep();
如果文档为ppt,执行此方法,文档动画向下一步,文档为非PPT,执行方法不进行任何操作。
13 调转至第N页
/**
* 调转至第N页
* @param {[int]} index [页数索引]
*/
doc.gotoSlide(index);
执行此方法,文档跳转至第N页,参数index为页数索引,从1开始计数。
14 获取缩略图列表
/**
* 获取缩略图列表
* @return {[Array]} [缩略图列表]
*/
doc.getThumImgList();
此方法可获取当前文档缩略图列表,返回值为数组,数组元素为缩略图地址。
15 动态设置画板大小
/**
* 动态设置画板大小
* @param {number} width 画板宽度
* @param {number} height 画板高度
*/
doc.reSizeBorad(width,height)
动态设置画板大小,参数为宽和高,建议此宽高比列为16:9,且与观看端一致。
16 加载文档
/**
* 加载文档,支持动态加载
* @param {string} docId 文档ID
* @param {string} channelId 频道ID
*/
doc.loadDoc(docId,channelId)
此方法支持动态更换文档。
文档API文档-观看端
微吼云JSSDK文档包,观看端
观看端初始化成功后,会自动创建画板和文档区域,当主持端有操作时,会自动同步显示。
VhallDocPassive({
channelId:'ch_6659b2c2',//频道ID
docNode:'my-doc-area',//文档显示节点div id
width:'800',//非必填
height:'450'//非必填
});
参数说明
参数名称 | 必填 | 说明 |
---|---|---|
channelId | 是 | 频道ID |
docNode | 是 | 显示文档区域的容器 |
width | 否 | 文档区域的宽 |
height | 否 | 文档区域的高 |
文档HowTo
文档HowTo
准备工作:注册微吼云账号,并拿到appId,如未则点击微吼云
页面引用SDK文件
在需要播放视频的页面(包括PC或H5)中引入初始化脚本
<script src="https://static.vhallyun.com/jssdk/vhall-jssdk-doc-1.0.0.js"></script>
<script src="https://static.vhallyun.com/jssdk/vhall-jssdk-base-1.0.0.js"></script>
注意:
- 直接用本地网页是调试不了的
- 上面所有文件都需要引用,而且顺序需要保持与上面一致
- 建议直接复制上面代码
创建文档容器
在需要web播放的页面位置加入播放器对象容器,也就是放一个div,然后给它取个名字,比如: my-video 。之后推流回显画面都会在这个容器里渲染,容器的大小控制您可以使用div的属性进行控制,示例代码如下:
<div id="my-doc" style="width:100%; height:450px;"></div>
注册ready事件
Vhall.ready(function(){
//todo
})
注意: 初始化完成之后,会执行ready回调事件,机制同jQuery ready事件,播放器调用逻辑需要写在此事件里。
初始化SDK配置
初始化配置:
Vhall.config({
appId :'',//应用 ID ,必填
accountId :'',//第三方用户唯一标识,必填
token:'',//token必填
})
注意: appId获取方式:登陆微吼云>>进应用管理>>取得对应AppId token生成方式:通过API生成,生成accessToken接口说明
初始化主持端文档
var doc = new VhallDoc({
docNode:'my-doc',//文档容器
width:'800'//文档显示的宽度,非必填
height:'450'//文档显示的高度,非必填
});
参数说明
name | type | require | description |
---|---|---|---|
docNode | string | yes | 文档容器 |
width | string | no | 文档显示的宽度 |
height | string | no | 文档显示的高度 |
初始化观看端文档
VhallDocPassive({
channelId:'ch_6659b2c2',//频道ID
docNode:'my-doc-area',//文档显示节点div id
width:'800',//非必填
height:'450'//非必填
});
参数说明
参数名称 | 必填 | 说明 |
---|---|---|
channelId | 是 | 频道ID |
docNode | 是 | 显示文档区域的容器 |
width | 否 | 文档区域的宽 |
height | 否 | 文档区域的高 |
完整代码
文档参考手册
- 点播参考手册
- VhallPlayer.init 播放器初始化
- VhallPlayer.play 播放
- VhallPlayer.pause 暂停
- VhallPlayer.getQuality 获取视频清晰度
- VhallPlayer.setQuality 设置视频清晰度
- VhallPlayer.setFullScreen 设置全屏
- VhallPlayer.isFullscreen 获取当前是否全屏
- VhallPlayer.setVolume 设置音量
- VhallPlayer.setWidth 设置播宽度
- VhallPlayer.setHeight 设置高度
- VhallPlayer.getDuration 获取当前视频总时长
- VhallPlayer.getCurrentTime 获取当前播放的时间
- VhallPlayer.seek 设置当前播放时间
- VhallPlayer.getNetworkState 获取当前网络状态
- VhallPlayer.onPublishStart 推流端开始推流事件
- VhallPlayer.onPublishStop 推流端停止推流事件
文档JSSDK参考手册
说明:此接口包含两部分,1-8为对画笔的操作,9-16为对文档的操作。
1 初始化
var doc = new VhallDoc({
docNode:'my-doc',//文档容器
width:'800'//文档显示的宽度,非必填
height:'450'//文档显示的高度,非必填
});
参数说明
name | type | require | description |
---|---|---|---|
docNode | string | yes | 文档容器 |
width | string | no | 文档显示的宽度 |
height | string | no | 文档显示的高度 |
2 设置画笔大小
/**
* 设置画笔大小
* @param {int} size 画笔大小值
*/
doc.setSize(size);
设置画笔大小, 参数为int型,如:doc.setSize(10);
3 设置画笔颜色
/**
* 设置画笔颜色
* @param {string} color 画笔色值
*/
doc.setColor(color)
color的值以#号开头的RGB值,如:doc.setColor("#000000")
4 设置文字
/**
* 设置文字
* @param {string} text 文字内容
*/
doc.setText(text)
设置文字, 如:doc.setText("Hello word!")
5 设置橡皮擦
/**
* 设置橡皮擦
* @param {int} size 橡皮擦大小值
*/
doc.setEraser(size)
设置橡皮擦, 参数为int型,如:doc.setEraser(10);
6 重置画笔
/**
* 重置画笔
* @param {int} size 画笔尺寸
* @param {[int]} color [画笔颜色]
*/
doc.reset(size,color)
重新设置画笔,如:doc.reset(10,"#000000")
7 清除画板
/**
* 清除画板
* @return {[type]} [description]
*/
doc.clear();
执行此方法后,整个画布清空。
8 取消画笔
/**
* 取消画笔
* @param {boolean} isCancel 是否取消,默认true
*/
_self.cancelPencil();
执行此方法后,就取消画笔操作,恢复文档点击翻页操作。
9 上一张◀️
/**
* 上一张◀️
*/
doc.preSlide();
执行此方法,文档向上翻一张
10 下一张▶️
/**
* 下一张▶️
*/
doc.nextSlide();
执行此方法,文档向下翻一张
11 上一步
/**
* 上一步
*/
doc.preStep()
如果文档为ppt,执行此方法,文档动画向上一步,文档为非PPT,执行方法不进行任何操作。
12 下一步
/**
* 下一步
*/
doc.nextStep();
如果文档为ppt,执行此方法,文档动画向下一步,文档为非PPT,执行方法不进行任何操作。
13 调转至第N页
/**
* 调转至第N页
* @param {[int]} index [页数索引]
*/
doc.gotoSlide(index);
执行此方法,文档跳转至第N页,参数index为页数索引,从1开始计数。
14 获取缩略图列表
/**
* 获取缩略图列表
* @return {[Array]} [缩略图列表]
*/
doc.getThumImgList();
此方法可获取当前文档缩略图列表,返回值为数组,数组元素为缩略图地址。
15 动态设置画板大小
/**
* 动态设置画板大小
* @param {number} width 画板宽度
* @param {number} height 画板高度
*/
doc.reSizeBorad(width,height)
动态设置画板大小,参数为宽和高,建议此宽高比列为16:9,且与观看端一致。
16 加载文档
/**
* 加载文档,支持动态加载
* @param {string} docId 文档ID
* @param {string} channelId 频道ID
*/
_self.loadDoc(docId,channelId)
此方法支持动态更换文档。
初始化观看端文档
观看端初始化成功后,会自动创建画板和文档区域,当主持端有操作时,会自动同步显示。
VhallDocPassive({
channelId:'ch_6659b2c2',//频道ID
docNode:'my-doc-area',//文档显示节点div id
width:'800',//非必填
height:'450'//非必填
});
参数说明
参数名称 | 必填 | 说明 |
---|---|---|
channelId | 是 | 频道ID |
docNode | 是 | 显示文档区域的容器 |
width | 否 | 文档区域的宽 |
height | 否 | 文档区域的高 |
聊天
聊天介绍
聊天介绍
微吼JSSDK,是微吼开放平台面向web开发者提供的基于微吼直播服务的开发工具包,面向开发者提供直播推流、直播观看、点播观看、聊天、文档等功能。此部分为聊天包,用于聊天服务。
功能特性
- 支持websocket和长链接
提示:本文档适合有一定Javascript语言基础的开发人员阅读。
聊天使用流程
聊天使用流程
setp1: 成为开发者
你需要有一个微云平台的账号,如已有则跳过此步骤, 否则,移步微吼云注册一个账号。
step2: 创建应用
登陆微吼云>>创建应用 得到相应AppId和房间ID(roomId),在初始化时会用到。
step3 添加服务
登陆微吼云如果未添加聊天服务,需添加聊天服务>>添加聊天服务
step4: 页面引用SDK文件
在需要播放视频的页面(包括PC或H5)中引入初始化脚本
<script src="https://static.vhallyun.com/jssdk/vhall-jssdk-chat-1.0.0.js"></script>
<script src="https://static.vhallyun.com/jssdk/vhall-jssdk-base-1.0.0.js"></script>
注意:
- 直接用本地网页是调试不了的
- 上面所有文件都需要引用,而且顺序需要保持与上面一致
- 建议直接复制上面代码
step5: 注册ready事件
Vhall.ready(function(){
//todo
})
注意: 初始化完成之后,会执行ready回调事件,机制同jQuery ready事件,播放器调用逻辑需要写在此事件里。
step6: 初始化SDK配置
初始化配置:
Vhall.config({
appId :'',//应用 ID ,必填
accountId :'',//第三方用户唯一标识,必填
token:'',//token必填
})
注意: appId获取方式:登陆微吼云>>进应用管理>>取得对应AppId token生成方式:通过API生成,生成accessToken接口说明
聊天API文档
聊天API文档
调用说明
所有接口通过VhallLive对象来调用,参数是一个对象,除了每个接口本身需要传的参数之外,还有以下通用参数:
- success:接口调用成功时执行的回调函数。
- fail:接口调用失败时执行的回调函数。
- complete:接口调用完成时执行的回调函数,无论成功或失败都会执行。
API接口
1.初始化接口
聊天对象初始化
var chat = new VhallChat({
token:'',//认证令牌,必填
appId:'',//在微吼云申请的appId,必填
channelId:''//频道Id,必填
});
- token生成方式:通过API生成,生成accessToken接口说明
- appId获取方式:登陆微吼云>>进应用管理>>取得对应AppId
- channelId获取方式
2.监听聊天消息
注册消息监听事件,示例如下:
//监听聊天消息
chat.on(function(msg){
//console.log(msg)
//在此收到聊天消息,消息内容为msg
//todo
})
3.发送聊天消息
//发送聊天消息
chat.emit("要发送的聊天消息内容");
聊天Demo源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo for chat</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-chat-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>
Vhall.ready(function(){
//todo
window.chat = new VhallChat({
token:'vhall',//认证令牌,必填
appId:'76043aaf',//在微吼云申请的appId,必填
channelId:'ch_b84f7bc3'//频道Id,必填
});
window.chat.on(function(msg){
//在此收到聊天消息,消息内容为msg
//todo
var msgBox = document.getElementById('msg-box');
var span = document.createElement('span');
span.innerText = msg.data;
msgBox.appendChild(span);
});
// window.chat.emit("要发送的聊天消息内容");
});
Vhall.config({
appId :'76043aaf',//应用 ID ,必填
accountId :'10025',//第三方用户唯一标识,必填
token:'vhall',//token必填
});
window.addEventListener('load',function(){
var emitButton = document.getElementById('btn-emit-message'),
msgInput = document.getElementById('ipt-msg');
emitButton.addEventListener('click',function(){
msgInput.value && window.chat.emit(msgInput.value);
msgInput.value = '';
});
});
</script>
</head>
<body>
<div id="msg-box">
</div>
<input id="ipt-msg" type="text" value="新年快乐!
聊天HowTo
聊天使用流程
准备工作:注册微吼云账号,并拿到appId,如未则点击微吼云
页面引用SDK文件
在需要播放视频的页面(包括PC或H5)中引入初始化脚本
<script src="https://static.vhallyun.com/jssdk/vhall-jssdk-chat-1.0.0.js"></script>
<script src="https://static.vhallyun.com/jssdk/vhall-jssdk-base-1.0.0.js"></script>
注意:
- 直接用本地网页是调试不了的
- 上面所有文件都需要引用,而且顺序需要保持与上面一致
- 建议直接复制上面代码
注册ready事件
Vhall.ready(function(){
//todo
})
注意: 初始化完成之后,会执行ready回调事件,机制同jQuery ready事件,播放器调用逻辑需要写在此事件里。
初始化SDK配置
初始化配置:
Vhall.config({
appId :'',//应用 ID ,必填
accountId :'',//第三方用户唯一标识,必填
token:'',//token必填
})
注意: appId获取方式:登陆微吼云>>进应用管理>>取得对应AppId token生成方式:通过API生成,生成accessToken接口说明
点播上传
点播上传简介
简介
微吼JSSDK,是微吼开放平台面向web开发者提供的基于微吼直播服务的开发工具包,面向开发者提供直播推流、直播观看、点播观看、聊天、文档等功能。此部分用于点播上传。
功能特性
- 支持断点续传
- 支持修改文件名称
- 支持显示上传进度条和百分比
- 支持不同文件的上传格式 ('rmvb', 'mp4', 'avi', 'wmv', 'mkv', 'flv', 'mp3', 'wav', 'mov')
- 支持Demo的预览,开发者可在此基础上开发样式
点播上传开发指南
- 点播参考手册
- VhallPlayer.init 播放器初始化
- VhallPlayer.play 播放
- VhallPlayer.pause 暂停
- VhallPlayer.getQuality 获取视频清晰度
- VhallPlayer.setQuality 设置视频清晰度
- VhallPlayer.setFullScreen 设置全屏
- VhallPlayer.isFullscreen 获取当前是否全屏
- VhallPlayer.setVolume 设置音量
- VhallPlayer.setWidth 设置播宽度
- VhallPlayer.setHeight 设置高度
- VhallPlayer.getDuration 获取当前视频总时长
- VhallPlayer.getCurrentTime 获取当前播放的时间
- VhallPlayer.seek 设置当前播放时间
- VhallPlayer.getNetworkState 获取当前网络状态
- VhallPlayer.onPublishStart 推流端开始推流事件
- VhallPlayer.onPublishStop 推流端停止推流事件
- 微吼云JSSDK文档包,主持端
- 1 初始化
- 2 设置画笔大小
- 3 设置画笔颜色
- 4 设置文字
- 5 设置橡皮擦
- 6 重置画笔
- 7 清除画板
- 8 取消画笔
- 9 上一张◀️
- 10 下一张▶️
- 11 上一步
- 12 下一步
- 13 调转至第N页
- 14 获取缩略图列表
- 15 动态设置画板大小
- 16 加载文档
1 成为开发者
申请开通微吼云账号,提供用户资料,微吼服务人员在后台为用户开通平台账号,用户也可在微吼云网站自行注册账号,账号开通后,用户即可登录,成为一名开发者。
2 创建应用
登录微吼云平台后,控制台选择应用管理,进入应用管理页面点击创建应用,根据页面提示信息,完成应用创建。应用创建完成,您可以在控制台界面找到在应用管理界面您可以找到 AppID。
3 添加服务
应用创建完成后,选择添加服务,添加点播服务,添加成功后可在点播服务下点播管理的【点播配置】页面查看AppID
4 开发准备
开发者若要将点播上传SDK集成到应用中,需要在html或者相关页面模板中引入JS脚本。
- 本SDK依赖于JQuery库,请在需要引入JQuery的页面按以下代码示例进行引入,对JQuery版本没有要求
<script src="http://cnstatic01.e.vhall.com/3rdlibs/jquery/1.11.2/jquery.min.js" type="text/javascript"></script>
- 在需要调用jssdk的页面插入以下代码,引入JS文件
<script src="https://static.vhallyun.com/demand-upload-jssdk-vhallcloud/dist/1.0.0/vhallDemandSDK-vhallcloud.js"></script>
注意
- 为保证本SDK能够正常使用请尽量在高版本浏览器下使用本SDK产品(Chrome58及以上版本)
点播上传API文档
- 点播参考手册
- VhallPlayer.init 播放器初始化
- VhallPlayer.play 播放
- VhallPlayer.pause 暂停
- VhallPlayer.getQuality 获取视频清晰度
- VhallPlayer.setQuality 设置视频清晰度
- VhallPlayer.setFullScreen 设置全屏
- VhallPlayer.isFullscreen 获取当前是否全屏
- VhallPlayer.setVolume 设置音量
- VhallPlayer.setWidth 设置播宽度
- VhallPlayer.setHeight 设置高度
- VhallPlayer.getDuration 获取当前视频总时长
- VhallPlayer.getCurrentTime 获取当前播放的时间
- VhallPlayer.seek 设置当前播放时间
- VhallPlayer.getNetworkState 获取当前网络状态
- VhallPlayer.onPublishStart 推流端开始推流事件
- VhallPlayer.onPublishStop 推流端停止推流事件
- 微吼云JSSDK文档包,主持端
- 1 初始化
- 2 设置画笔大小
- 3 设置画笔颜色
- 4 设置文字
- 5 设置橡皮擦
- 6 重置画笔
- 7 清除画板
- 8 取消画笔
- 9 上一张◀️
- 10 下一张▶️
- 11 上一步
- 12 下一步
- 13 调转至第N页
- 14 获取缩略图列表
- 15 动态设置画板大小
- 16 加载文档
1.初始化DOM
- 为了承载相关功能需要在需要在html或者相关页面模板中准备一系列dom元素 具体如下
<input type="file" id="upload"/> <!--文件上传域 -->
<input type="text" id='rename'> <!--用于承载文件名称的input 可用于修改上传文件标题 若用不到可设置为隐藏 -->
<button id="confirm" class="saveBtn">保存</button> <!--上传成功后用于保存文件的按钮 -->
2.生成鉴权信息
- 调用具体的方法之前首先需要开发者在服务端采用规定的方法生成鉴权信息 具体生产方法请参照
3.初始化配置
- 调用 vhallCloudDemandSDK() 方法实例化上传功能
vhallCloudDemandSDK('#upload',{
params: {
confirmBtn:'#confirm', //保存按钮
name:'#rename',//用于修改文件名称的input
sign:signTag.str, //生成的鉴权信息
signed_at:signTag.time, //鉴权信息生成的时间戳
app_id:appId //用户的appid
},
ready: function() {
/**
* 初始化完成的回调函数
**/
},
beforeUpload:function() {
/**
* 准备中...(文件进行MD5转换过程)
* 可以已loader形式展现该过程
**/
},
progress:function(percent, file){
/**
* 上传中...'
* 'percent 上传进度百分比'
* 'file 上传文档具体信息
**/
},
uploadSuccess: function(res){
/**
* 上传成功!'
**/
},
saveSuccess:function(res) {
/**
* 点击保存按钮后保存成功'
* res返回record_id
**/
},
error: function(msg,file,e){
/**
* 上传出错'
* 'msg 错误返回的状态码信息'
**/
}
})
4.文件上传
- 完成上述步骤后,即完成所有的上传接口调用。当用户选择上传文件后,将通过相关事件触发相关回调并完成文件的上传。
5. 断点续传
- 当文件上传中断后,用户只需重新选择文件提交即可恢复上传。
6. 其他
- 参数说明
参数 | 含义 |
---|---|
confirmBtn | 保存按钮的ID名以#开头 |
name | 用于重命名的input的ID名以#开头 |
sign | 按照规则生成的鉴权信息 |
signed_at | 鉴权信息生成的时间戳 |
app_id | 用户的appId |
- 初始化配置错误状态码对应信息参见消息体
错误码 | 含义 |
---|---|
10000 | 当前浏览器不支持断点上传 |
10001 | 初始化元素请传入类似于"#id"选择器 |
10002 | 确认按钮请传入类似于"#id"选择器 |
10003 | 重命名元素请传入类似于"#id"选择器 |
10004 | options参数应该为对象类型 |
10005 | 当前传入的初始化dom不是input file |
10006 | 不支持该文件格式 |
10007 | 上传文件大于5GB |
10008 | 获取上传临时授权失败 |
10009 | 当前账号无上传权限 |
10010 | 请确认确认按钮dom是否存在 |
10011 | 视频名称不符合规范 |
10012 | 请选择需要上传的文件 |