API
webrtc采集音视频数据的API：getUserMedia。获取成功后走then的方法，获取失败走catch的方法。（如果在某些浏览器无法通过getUserMedia来采集音视频，可能是由于该浏览器中采集音视频的API不叫这个名字，我们可以通过引入一个谷歌开源的库来解决适配问题，也就是在index.html中加上<script type="text/javascript" src="https://webrtc.github.io/adapter/adapter-latest.js"></script>）
/*
关于参数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文件，代码内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>webrtc采集音视频数据</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/client.js"></script>
<script type="text/javascript" src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
</head>
<body>
<!-- playsinline表示直接在浏览器内播放 -->
<video autoplay playsinline id="player"></video>
</body>
</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，如果是第一次运行，会弹出摄像头和麦克风的授权弹框，允许就可以了。然后就可以看到摄像头采集的视频了，同时麦克风会采集声音。
网友评论