[010]音视频直播系统构建(一) | 音视频采集基本概念

基本概念
  • 摄像头。用于捕捉(采集)图像和视频。
  • 帧率。现在的摄像头功能已非常强大,一般情况下,一秒钟可以采集 30 张以上的图像,一些好的摄像头甚至可以采集 100 张以上。我们把摄像头一秒钟采集图像的次数称为帧率。帧率越高,视频就越平滑流畅。然而,在直播系统中一般不会设置太高的帧率,因为帧率越高,占的网络带宽就越多。
  • 分辨率。摄像头除了可以设置帧率之外,还可以调整分辨率。我们常见的分辨率有 2K、1080P、720P、420P 等。分辨率越高图像就越清晰,但同时也带来一个问题,即占用的带宽也就越多。所以,在直播系统中,分辨率的高低与网络带宽有紧密的联系。也就是说,分辨率会跟据你的网络带宽进行动态调整。
  • 宽高比。分辨率一般分为两种宽高比,即 16:9 或 4:3。4:3 的宽高比是从黑白电视而来,而 16:9 的宽高比是从显示器而来。现在一般情况下都采用 16:9 的比例。
  • 麦克风。用于采集音频数据。它与视频一样,可以指定一秒内采样的次数,称为采样率。每个采样用几个 bit 表示,称为采样位深或采样大小
  • 轨(Track)。WebRTC 中的“轨”借鉴了多媒体的概念。火车轨道的特性你应该非常清楚,两条轨永远不会相交。“轨”在多媒体中表达的就是每条轨数据都是独立的,不会与其他轨相交,如 MP4 中的音频轨、视频轨,它们在 MP4 文件中是被分别存储的。
  • 流(Stream)。可以理解为容器。在 WebRTC 中,“流”可以分为媒体流(MediaStream)和数据流(DataStream)。其中,媒体流可以存放 0 个或多个音频轨或视频轨;数据流可以存 0 个或多个数据轨。
1. getUserMedia 方法

在浏览器中访问音视频设备

格式:

var promise = navigator.mediaDevices.getUserMedia(constraints);
2. MediaStreamConstraints 参数

从上面的调用格式中可以看到,getUserMedia方法有一个输入参数constraints,其类型为 MediaStreamConstraints。它可以指定MediaStream中包含哪些类型的媒体轨(音频轨、视频轨),并且可为这些媒体轨设置一些限制。

官网描述:
[010]音视频直播系统构建(一) | 音视频采集基本概念_第1张图片


<html>
<head>
	<title>Realtime communication with WebRTCtitle>
head>
<body>
	<h1>Realtime communication with WebRTC h1>
	<video autoplay playsinline>video>
body>
<script>
	'use strict';
	const localVideo = document.querySelector('video');
	
	navigator.mediaDevices.getUserMedia({
	//视频的帧率最小 20 帧每秒;宽度最小是 640,理想的宽度是 1280;同样的,高度最小是 360,最理想高度是 720;此外宽高比是 16:9;对于音频则是开启回音消除、降噪以及自动增益功能。
		video: {
			frameRate: { min: 20 },
			width: { min: 640, ideal: 1280 },
			height: { min: 360, ideal: 720 },
			aspectRatio: 16 / 9
		},
		audio: {
			echoCancellation: true,
			noiseSuppression: true,
			autoGainControl: true
		}
		//详细参数看下文!!!
	}).then(
		(mediaStream) => {
			localVideo.srcObject = mediaStream;
		}
	).catch(
		(error) => {
			console.log('navigator.getUserMedia error: ', error);
		}
	);
script>
html>
MediaStreamConstraints参数

[010]音视频直播系统构建(一) | 音视频采集基本概念_第2张图片

你可能感兴趣的:([010]音视频直播系统构建)