直播 > 推流端SDK > Web推流SDK > 开发指南

开发指南

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 文档