WebRTC H5实现服务器转发的视频聊天
说明:
- 此处使用到的WebRTC皆为H5的API,实际上调用的是封装在浏览器的WebRTC的库,用于获取实时视频数据,传输数据则是使用WebSocket实现。
- 其中的实例语法只用到原生JS,版本为ES6,可能需要较高版本的浏览器支持(IE一般不支持)。
1.获取音视频数据
方法:navigator.mediaDevices.getUserMedia
1.1前置条件
基于浏览器的安全策略,通过WebRTC(具体为getUserMedia)调用摄像头和麦克风获取音视频数据,只能是在HTTPS下的网页,或者是本地localhost下才能调用,需要先校验。
function validate(){
var isSecureOrigin = location.protocol === 'https:' ||
location.hostname === 'localhost';
if (!isSecureOrigin) {
alert('getUserMedia() must be run from a secure origin: HTTPS or localhost.' +'\n\nChanging protocol to HTTPS');
location.protocol = 'HTTPS';
}
}
1.2初始化
直接获取音视频,一般默认是前置摄像头。
var constraints = {
audio: true,
video: true //设置为false则只获取音频
};
还可以设置视频的其他参数,此处设置视频的分辨率,min和max为分辨率的最值,ideal为理想值,浏览器会先尝试找到最接近指定的理想值的设定或者摄像头(如果设备拥有不止一个摄像头),但不保证。下面是获取分辨率为640*480的视频。
var constraints = {
audio: true,
video: { width: { min: 640, ideal: 640, max: 640 }, height: { min: 480, ideal: 480, max: 480 }}
};
初始化
//链式操作,then和catch是并列关系
navigator.mediaDevices.getUserMedia(constraints)
.then(handleSuccess)
.catch(handleError);
1.3处理音视频数据
此时返回的只是一个流对象,包括了原始的音视频数据,不能直接操作,需要后续的MediaRecorder
封装才能处理。
function handleSuccess(stream) {
log('getUserMedia() got stream: ', stream);
//stream即为返回成功的结果,设置为全局便于的后续上传操作
window.stream = stream;
//显示在页面上
var recordedVideo = document.querySelector('video#recorded');
recordedVideo.srcObject = stream;
recordedVideo.onloadedmetadata = function(e) {
log("Label: " + stream.label);
//音轨,PCM
log("AudioTracks" , stream.getAudioTracks());
//视频图像
log("VideoTracks" , stream.getVideoTracks());
};
}
function handleError(error) {
console.log(