WebRTC音视频采集约束

最新推荐文章于 2024-04-20 13:48:57 发布

-jieshi

最新推荐文章于 2024-04-20 13:48:57 发布

阅读量421

点赞数

文章标签： webrtc javascript

本文链接：https://blog.csdn.net/qq_38166944/article/details/120719819

版权

一：视频相关

1.width 宽

2.height 高（宽高一般就两种比例 4 : 3 和 16 : 9）

3.aspectRatio 比例一般情况只设置宽高就可以设置好分辨率

4.frameRate 帧率

5.facingMode 控制摄像头一般用于手机
5-1.user:前置摄像头
5-2.environment:后置摄像头
5-3.left:前置左侧摄像头
5-4.right:前置右侧摄像头

6.resizeMode 采集画面裁剪

二：音频相关

1.volume 音量（从 0-1）

2.sampleRate 采样率（8000 16000 32000 ......）

3.sampleSize 采样大小（每一个采样由多少位表示一般用 16位也就是2个字节）

4.echoCancellation 是否开启回音消除（就是采集数据之后是否要开启回音消除）

5.autoGainControl 是否自动增益（是否在原有的音频上是否自动增加音量）

6.noiseSuppression 是否开启降噪功能

7.latency 延迟大小单位ms 设置小的好处是在实时通讯的时候延迟通讯小，但是当网络质量不好的时候，会出现卡顿花屏之类的问题。设置大的好处是画面和声音更平滑，但是即时性没那么好。一般来说最好是 200-500ms

8.channelCount 声道设置单声道 1 立体声 2

三：其他（音频和视频都有）

1.deviceID 当存在多个输入输出设备的时候可以进行设备的切换，改变deviceID 就行

2 groupID 代表同一个物理设备，比如音频的输入和输出就是同一个物理设备

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>WebRTC capture video and audio</title>
	</head>
	<body>
		<div>
			<label>audio input device</label><select id="audioinput"></select>
		</div>
		<div>
			<label>audio output device</label><select id="audiooutput"></select>
		</div>
		<div>
			<label>video input device</label><select id="videoinput"></select>
		</div>
		<video autoplay playsinline id="player"></video>
		<!-- 
			autoplay:拿到视频源的时候直接播放
			playsinline:表示在浏览器中播放，而不是调用第三方工具
		-->
		<script>
			var audioSource = document.querySelector("select#audioinput");
			var audiooutput = document.querySelector("select#audiooutput");
			var videoinput = document.querySelector("select#videoinput");
			
			function gotDevices(deviceInfos){
				deviceInfos.forEach(item => {
					console.log(item);
					var option = document.createElement('option');
					option.text = item.label;
					option.value = item.deviceId;
					if(item.kind === "audioinput"){
						audioSource.appendChild(option);
					}else if(item.kind === "audiooutput"){
						audiooutput.appendChild(option);
					}else if(item.kind === "videoinput"){
						videoinput.appendChild(option);
					}
				})
			}
			function gotMediaStream(stream){
				var videoplay = document.getElementById('player');
				videoplay.srcObject = stream;
				return navigator.mediaDevices.enumerateDevices();
			}
			
			function handleError(err){
				console.log("error:"+err);
			}
			
			function start(){
				if(!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia){
					console.log('getUserMedia is not support');
					return;
				}else{
					var deviceId = videoinput.value;
					console.log(deviceId);
					var constrains = {
						video : {
							width:640,
							height:480, 
							frameRate:30,
							//宽高帧率可以设置成对象 {max：XX，min：XX} 这样系统会在你设置的范围内自动选择一个较好的
							facingMode:'enviroment',
							deviceId : deviceId ? deviceId : undefined
						},
						audio : {
							echoCancellation : true,
							noiseSuppression : true
						}
						
					}
					navigator.mediaDevices.getUserMedia(constrains)
						.then(gotMediaStream)
						.then(gotDevices)
						.catch(handleError);
				}
			}
			start();
			videoinput.onchange = start;
		</script>
	</body>
</html>