webrtc基础及相关api

什么是webrtc

WebRTC (Web Real-Time Communications) 是一项实时通讯技术，它允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点（Peer-to-Peer）的连接，实现视频流和（或）音频流或者其他任意数据的传输。

使用node搭建https服务

出于安全考虑，WebRTC只允许在HTTPS环境下使用，否则浏览器将不允许页面获取音频或视频设备 所以在开始之前我们要先搭建https服务 centos使用node搭建https服务

获取音视频设备

api enumerateDevices//获取音视频设备 语法

var Promise = navigator.mediaDevices.enumerateDevices();

我们通过navigator.mediaDevices.enumerateDevices()获取设备的信息，他返回的是一个Promise。在返回的Promise中有一个结构体MediaDevicesInfo，MediaDevicesInfo中存放着设备的信息包括

属性描述label设备的名字（内置音频输入设备，内置音频输出设备，耳机等）deviceId设备idkind设备种类（音频设备，视频设备）groupId组id

示例

'use strict' //先判断是否支持 if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices){ console.log("你的设备不支持enumerateDevices!"); }else{ navigator.mediaDevices.enumerateDevices() .then(gotDevices) .catch(handleError); } // 成功 function gotDevices(deviceInfos) { deviceInfos.forEach(function (deviceInfo) { //成功后进行相应的操作 console.log(deviceInfo.kind + ": label" + deviceInfo.label + ":id= " + deviceInfo.deviceId + ": groupId = " + deviceInfo.groupId ); } // 出错 function handleError(err) { console.log(err.name + " : " + err.message); }

采集音视频数据

api getUserMedia//采集音视频数据 getDisplayMedia //获取桌面音视频数据 语法

var promise = navigator.mediaDevices.getUserMedia(constraints); var promise = navigator.mediaDevices.getDisplayMedia(constraints);

navigator.mediaDevices.getUserMedia()也是返回一个Promise，返回的结果中包含视频音频流 navigator.mediaDevices.getUserMedia(constraints)有一个参数constraints 是对音视频的配置

var constraints={ audio: true, //bollean 或者MediaStrackConstraints（可以设置具体的控制 分辨率、帧率等） video: true //bollean 或者MediaStrackConstraints（可以设置具体的控制 音量大小、单声道或者双声道等） }

复杂配置

var constraints = { video : { width: 640, height: 480, frameRate:15, facingMode: 'enviroment',//强制使用后置摄像头 deviceId : ****** }, audio : { echoCancellation:true,//回音消除 noiseSuppression:true,//降噪 } }

具体使用

//html <video autoplay playsinline id="player"></video> //autoplay拿到视频源世界播放 //playsinline在浏览器页面中播放 //js 'use strict' if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) { console.log("你的浏览器不支持getUserMedia") } else { var constraints = { video: true, audio: true } navigator.mediaDevices.getUserMedia(constraints) .then(gotMediaStream) .catch(handleError); } function gotMediaStream(stream) { var videoplay = document.getElementById('player'); videoplay.srcObject = stream;//将获取到的流赋给video标签 } function handleError(err) { console.log(err.name + " : " + err.message); }

getUserMedia()适配

getUserMedia() w3c webkitgetUserMedia() 谷歌 mozgetUserMedia()火狐 自己实现 var getUserMedia() =navigator.getUserMedia()|| navigator.webkitgetUserMedia（）|| navigator.mozgetUserMedia()（）|| 使用谷歌开源库adapter.js

https://webrtc.github.io/adapter/adapter-latest.js