webrtc 一------相关api获取音视频设备采集音视频数据

webrtc基础及相关api

什么是webrtc

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

使用node搭建https服务

出于安全考虑，WebRTC只允许在HTTPS环境下使用，否则浏览器将不允许页面获取音频或视频设备

所以在开始之前我们要先搭建https服务

centos使用node搭建https服务

获取音视频设备

api

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