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>