使用微吼云JS SDK，只需简单几步，就能快速发起直播。
跟随本文的步骤，即使你对Javascript语言不熟悉，也完全可以做到。
其中，一至三步为准备工作，第四步为代码接入，下面，就分步来说明。
一.推流准备
-
创建直播间 获取roomId
-
获取直播间包含推流权限的access_token
时序图
注:已知直播间ID的情况下虚线框部分无需请求。
二.引入sdk文件
接下来，我们正式接入sdk： 将下面sdk引入代码，插入页面的head标签里。
<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>
注意：
1.直接用本地网页(file协议，地址栏以file:///开头)是调试不了的，需要运行在服务器上，且推流需https环境，(地址栏以https:// 开头)才能正常调试。
2.上面两个文件都需要引用，而且顺序需要保持与上面一致。
3.建议直接复制上面代码。
三.引入推流依赖flash文件
点此下载推流依赖flash文件，文件名为：Shy.swf。
下载后，在当前推流页同级目录建images文件夹，将下载的 Shy.swf文件放入images中。保证相对目录./images/Shy.swf文件能被推流页面访问到。
四.代码对接
至此，你已完成所有推流准备工作，距离你看到自己的推流画面，只差以下4步：
1.创建推流器对象
在页面加入推流器容器,也就是放一个div，然后给它取个名字，比如: my-publisher 。之后推流回显画面都会在这个容器里渲染，示例：
<div id="my-publisher"></div>
2.注册ready事件
接下来，在页面里写javascript代码，调用sdk提供的接口，注册sdk ready事件，接口调用方法如下：
/**
* 注册ready事件
*/
Vhall.ready(function(){
//TODO
})
注意:所有推流相关逻辑需要写在此事件里。
3.初始化SDK配置
接下来，在Vhall.ready事件之后，进行初始化配置：
/**
* 注册ready事件
*/
Vhall.ready(function(){
//TODO
});
/**
* 初始化SDK配置
*/
Vhall.config({
appId :'',//应用 ID ,必填
accountId :'',//第三方用户唯一标识,必填
token:'',//token必填
})
注意：
1.此方法必须写在Vhall.ready事件之后。
2.appId获取方式，参考[推流准备]的“创建应用 获取AppID”
3.token生成方式,参考[推流准备]的“获取直播间 access_token”
4.此处的toekn，即为参考准备的access_token。
4.初始化推流
推流之前，需要初始化推流对象VHPublisher
/**
* 初始化推流
*/
VHPublisher.init({
roomId:'lss_22b89748',//房间名称
videoNode:'my-publisher',//推流容器
//调用推流接口后完成事件，注意，是调用接口事件完成，不是推流结束。
complete:function(){
//TODO
}
});
注意：
1.此方法必需写在Vhall.ready事件里。
2.roomId获取方式，参考[推流准备]的“创建直播间 获取roomId”
3.videoNode,为推流回显容器的Id，需要开发者自己在需要显示回显的地方，创建一个空div，然后给Id命名，再将id名称写入此参数。参考 “创建推流器对象”
5.推流
最后一步，推流。 此方法既可以不传任何参数来调用（使用默认参数），也可以自定义参数来调用，如下示例：
/**
* 简单调用方法
*/
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>发起直播</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;
}
.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>
/**
* 注册ready事件
*/
Vhall.ready(function(){
/**
* 错误事件监听
*/
VHPublisher.error(function(e){
console.error(e.msg);
});
/**
* 初始化推流
*/
VHPublisher.init({
roomId:'lss_c063b5c9',//房间名称
videoNode:'my-publisher',//推流容器
//调用推流接口后完成事件，注意，是调用接口事件完成，不是推流结束。
complete:function(){
//TODO
}
});
});
/**
* 初始化配置
*/
Vhall.config({
appId :'76043aaf',//应用 ID ,必填
accountId :'10000126',//第三方用户唯一标识,必填
token:'',//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>