webrtc采集音视频数据在浏览器展示

API

webrtc采集音视频数据的API：getUserMedia。获取成功后走then的方法，获取失败走catch的方法。（如果在某些浏览器无法通过getUserMedia来采集音视频，可能是由于该浏览器中采集音视频的API不叫这个名字，我们可以通过引入一个谷歌开源的库来解决适配问题，也就是在index.html中加上）

/*
关于参数constrants的定义如下
video和audio可以是bool类型或者MediaTrackConstraints类型
video和audio都为true表示同时采集音频和视频并使用默认参数
如果为MediaTrackConstraints类型则可以设置具体的音视频参数。
dictionary MediaStreamConstrains{
        (boolean or MediaTrackConstraints) video = true;
        (boolean or MediaTrackConstraints) audio = true;
}

例如：
var constrants = {
        video:{
            width:{// 视频宽度（可以设置一个固定的值，也可以像这样设置一个范围，下同）
                min:300,
                max:640
            }, 
            height:{// 视频高度
                min:300,
                max:480
            }, 
            aspectRatio:1.33, // 宽高比，这个由宽除以高计算，一般不用设置
            frameRate:{// 帧率
                min:15,
                max:30
            }, 
            facingMode:"environment", // 摄像头面对模式，user是面向使用者(前置摄像头),environment是后置摄像头，left前置左摄像头，right前置右摄像头
             resizeMode:"none", // 裁剪模式，none为不裁剪(不常用)
             deviceId: undefined, // 视频设备deviceID
             groupId: undefined // 视频设备groupID
        },
        audio:{
            volume:1.0, // 音量，0静音，1最大声音
            sampleRate:44100,// 采样率
            sampleSize:16, // 采样大小(每一个样用多少位表示)
            echoCancellation: true, // 是否开启回音消除
            autoGainControl:true, // 是否开启自动增益，也就是在原有录制的声音的基础上是否增加音量
            noiseSuppression:true, // 是否开启降噪
            latency: 0.2, // 延迟大小，在直播过程中latency设置的越小实时性会越好，但是网络不好时容易出现卡顿；设置的越大流畅度越好，但是设置太大会有明显的延迟。一般设置500ms，设置为200ms实时效果就很好了，大于500ms就能明显感觉到延迟了。
            channelCount:1, // 声道数，一般设置单声道就够了
            deviceId: undefined , // 音频设备deviceID
            groupId: undefined, // 音频设备groupID
        }
    };
*/
var promise = navigator.mediaDevices.getUserMedia(constrants);
promise.then(successFunction);
promise.catch(failureFunction);

代码实现

首先通过nodejs搭建web服务器，搭建好后将服务启动。然后在public目录下新建一个stream目录，在stream目录下创建一个index.html文件，代码内容如下：

然后在stream目录下新建一个js目录，在js目录下创建一个client.js文件，代码内容如下：

'use strict'


if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
    console.log('不支采集音视频数据！');
}else{
    // 采集音视频数据
    var constrants = {video:true,audio:true};
    navigator.mediaDevices.getUserMedia(constrants).then(gotMediaStream).catch(handleError);
}

// 采集音视频数据成功时调用的方法
function gotMediaStream(stream){
    const player = $("#player")[0];

    player.srcObject = stream;
}

// 采集音视频数据失败时调用的方法
function handleError(err){
    console.log(err.name+':'+err.message);
}

然后打开浏览器在地址栏输入https://192.168.20.242:8081/stream/index.html，如果是第一次运行，会弹出摄像头和麦克风的授权弹框，允许就可以了。然后就可以看到摄像头采集的视频了，同时麦克风会采集声音。