使用微吼云JS SDK,只需三大步再5小步,就能快速观看直播。
跟随本文的步骤,即使你对Javascript语言不熟悉,也完全可以做到。
其中,一、二步为准备工作,第三步为代码接入,下面,就分步来说明。
一.观看准备
-
创建直播间 获取roomId
-
获取直播间包含看直播权限的access_token
时序图
注:已知直播间ID的情况下虚线框部分无需请求。
二.引入sdk文件
接下来,我们正式接入sdk: 将下面sdk引入代码,插入页面的head标签里。
<script src="vhall-jssdk-player-VERSION.js"></script>
<script src="vhall-jssdk-base-1.0.0.js"></script>
- VERSION 为SDK版本号,当前版本号为2.0.0
- SDK 引用顺序与上面保持一致。
- 引用时务必使用HTTPS协议。
- JS基础SDK模块
- JS播放器SDK模块
注意:
1.直接用本地网页(file协议,地址栏以file:///开头)是调试不了的,需要运行在Server上(https或http协议,地址栏以https:// 或http:// 开头)才能正常调试。
2.上面两个文件都需要引用,而且顺序需要保持与上面一致。
3.建议直接复制上面代码
三.代码对接
至此,你已完成所有观看直播准备工作,距离完成,只差以下4步:
1.页面创建播放器容器
在需要web播放的页面位置加入播放器对象容器,也就是放一个div,然后给它取个名字,比如: my-video 。之后推流回显画面都会在这个容器里渲染,容器的大小控制您可以使用div的属性进行控制,示例代码如下:
<div id="my-video" style="width:100%; height:450px;"></div>
2.初始化SDK配置
接下来需要传入相关参数,初始化配置:
// 创建实例参数
var opt = {
appId:'',// 应用ID,必填
accountId: '', // 第三方用户ID,必填
token: '', // access_token,必填
type: '', // live 直播 vod 点播 必填
videoNode: "videoNode", // 播放器的容器, div的id 必填
poster: 'http://xxx.jpg', // 封面地址 仅支持.jpg
liveOption:{
type:'hls' // 直播播放类型 hls | flv
roomId: '', // 直播房间ID
} ,
vodOption: {
recordId:'' // 回放 ID
}
};
// 成功回调
var success = function (event) {
// 实例句柄
var vhallplayer= event.vhallplayer;
};
// 失败回调
var failure = function (event) {
console.log(event);
};
// 创建实例
VhallPlayer.createInstance(opt, success, failure);
注意:
1.appId获取方式,参考[推流准备]的“创建应用 获取AppID”
2.token生成方式,参考[推流准备]的“获取直播间 access_token”
3.此处的toekn,即为参考准备的access_token。