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 | 设备id |
kind | 设备种类(音频设备,视频设备) |
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