开发指南
1 概述
网易云视频直播推流 Web SDK 是网易官方推出的用于开发网页直播的软件开发工具包,基于Flash的直播推流引擎。 SDK提供了构建直播推流所需要的所有核心技术,包括: 音视频设备管理、音视频采集、编解码、网络传输、显示等功能。
2 开发准备
2.1 开通服务
注册网易云视频并获取直播频道地址
2.2 页面准备
在需要web直播推流的页面中引入初始化脚本
<script src="//nos.netease.com/vod163/nePublisher.min.js"></script>
2.3 添加推流器容器
在需要web直播推流的页面位置加入推流器容器
<div id="my-publisher"></div>
2.4 创建推流器对象
接下来在页面底部引入的Javascript脚本中,创建一个推流器对象,这时将使用推流器的构造函数
var myPublisher = new nePublisher(
'my-publisher', // String 必选 推流器容器id
{ // Object 可选 推流初始化videoOptions参数
videoWidth: 640, // Number 可选 推流分辨率 宽度 default 640
videoHeight: 480, // Number 可选 推流分辨率 高度 default 480
fps: 15, // Number 可选 推流帧率 default 15
bitrate: 600, // Number 可选 推流码率 default 600
video: true, // Boolean 可选 是否推流视频 default true
audio: true // Boolean 可选 是否推流音频 default true
}, { // Object 可选 推流初始化flashOptions参数
previewWindowWidth: 862, // Number 可选 预览窗口宽度 default 862
previewWindowHeight: 486, // Number 可选 预览窗口高度 default 446
wmode: 'transparent', // String 可选 flash显示模式 default transparent
quality: 'high', // String 可选 flash质量 default high
allowScriptAccess: 'always' // String 可选 flash跨域允许 default always
}, function() {
/*
function 可选 初始化成功的回调函数
可在该回调中调用getCameraList和getMicroPhoneList方法获取 摄像头和麦克风列表
cameraList = this.getCameraList();
microPhoneList = this.getMicroPhoneList();
*/
}, function(code, desc) {
/*
function 可选 初始化失败后的回调函数
@param code 错误代码
@param desc 错误信息
判断是否有错误代码传入检查初始化时是否发生错误
若有错误可进行相应的错误提示
*/
});
如果不需要设置推流初始化参数,则可以省略
var myPublisher = new nePublisher('my-publisher',function(){
},function(code, desc){
});
3 预览
3.1 开始预览
// @参数 cameraIndex {Number} 必选 从getCameraList函数获取的摄像头列表中选择要预览的摄像头的索引
// @参数 cameraWidth {Number} 可选 摄像头采集分辨率,宽 default: 1280
// @参数 cameraHeight {Number} 可选 摄像头采集分辨率,高 default: 720
myPublisher.startPreview(cameraIndex, cameraWidth, cameraHeight);
});
提示:关于如何让预览窗口自适应容器
myPublisher.startPreview(getCameraIndex(), 480, 360);
//一定要在开始预览接口调用之后方可设置object的宽度和高度为100%
var object = document.getElementById("my-publisher");
object.width = "100%";
object.height = "100%";
3.2 预览截图
/**
* getCameraSnapshot 获取当前camera的快照,开始预览后方可使用此接口
* @param callback {Function} 必选 回调函数 回调函数将传入的参数是jpg图像编码后的base64字符串
* @param quality {Number} 必选 设置jpg编码质量 值范围为为0~100
*/
myPublisher.getCameraSnapshot(function(imgBase64Str){
//preview snapshot
document.getElementById("myimg").src = "data:image/jpeg;base64," + imgBase64Str;
//or send to server
// ...
}, 50);
3.3 停止预览
/**
* stopPreview 停止预览
*/
myPublisher.stopPreview();
4 推流
4.1 选择摄像头
// @参数 cameraIndex {Number} 必选 从getCameraList函数获取的摄像头列表中选择要推流的摄像头的索引
myPublisher.setCamera(cameraIndex);
4.2 选择麦克风
// @参数 microPhoneIndex {Number} 必选 从getMicroPhoneList函数获取的麦克风列表中选择要推流的麦克风的索引
myPublisher.setMicroPhone(microPhoneIndex);
4.3 开始直播推流
myPublisher.startPublish(
'rtmp://pxxx.live.126.net/live/...', // String 必选 要推流的频道地址
{ // Object 可选 推流参数
videoWidth: 640, // Number 可选 推流分辨率 宽度 default 640
videoHeight: 480, // Number 可选 推流分辨率 高度 default 480
fps: 15, // Number 可选 推流帧率 default 15
bitrate: 600, // Number 可选 推流码率 default 600
video: true, // Boolean 可选 是否推流视频 default true
audio: true // Boolean 可选 是否推流音频 default true
}, function(code, desc) {
/*
function 可选 推流过程中发生错误进行回调
@param code 错误代码
@param desc 错误信息
判断是否有错误代码传入推流过程中是否发生错误
若有错误可进行相应的错误提示
*/
});
4.4 停止推流
myPublisher.stopPublish();
5 释放资源
myPublisher.release();
6 注意事项
1. 必须先打开浏览器摄像头权限;
2. 必须在推流器初始化完成以后才能调用推流器的相关方法,否则会报错失败;
3. 推流分辨率不得大于摄像头支持的最大分辨率,不然会导致画面质量下降(flash下无可靠的API来检测摄像头所支持的最大分辨率);
4. 使用当前WEB推流方案用HLS拉流将没有声音(HLS不支持speex音频编码导致拉流没有声音,后续我们将考虑使用服务端转码的方案来优化这个问题);
5. IE9下推流需要额外的设置(工具->Internet选项->安全->自定义级别->其他->通过域访问数据源->启用);
6. Chrome下面,初次打开页面,获取到摄像头列表中的摄像头名称可能是空字符串。解决方案:点击预览以后,在弹出的浏览器提示框中允许使用摄像头和麦克风,然后刷新页面即可解决;
7 开发示例Demo
开发示例Demo 更多推流器方法详见Web 直播推流 SDK API 文档