JS浏览器端音视频通讯直播

随着 WebRTC 1.0 规范的推出，现在主流浏览器 Chrome、Firefox、Safari 以及 Edge 都已经支持了 WebRTC 库。换句话说，在这些浏览器之间进行实时音视频通信已经很成熟了

WebRTC处理过程

image.png

WebRTC 终端，负责音视频采集、编解码、NAT 穿越、音视频数据传输。
Signal 服务器，负责信令处理，如加入房间、离开房间、媒体协商消息的传递等。
STUN/TURN 服务器，负责获取 WebRTC 终端在公网的 IP 地址，以及 NAT 穿越失败后的数据中转。

音视频采集基本概念

摄像头。用于捕捉（采集）图像和视频。
帧率。现在的摄像头功能已非常强大，一般情况下，一秒钟可以采集 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 个或多个数据轨。

音视频采集简单的实现


    const localVideo = document.querySelector('video');

    function gotLocalMediaStream(mediaStream) {
      localVideo.srcObject = mediaStream;
    }

    function handleLocalMediaStreamError(error) {
      console.log('navigator.getUserMedia error: ', error);
    }

    navigator.mediaDevices.getUserMedia({
      video: {
        frameRate: { min: 20 },
        width: { min: 640, ideal: 200 },
        height: { min: 360, ideal: 200 },
        aspectRatio: 16 / 9,
      },
      audio: {
        echoCancellation: true,
        noiseSuppression: true,
        autoGainControl: true,
        noiseSuppression: true,
      }
    }).then(gotLocalMediaStream).catch(
      handleLocalMediaStreamError
    );

音视频设备的检测

音频设备的基本原理：音频输入设备的主要工作是采集音频数据，而采集音频数据的本质就是模数转换（A/D），即将模似信号转换成数字信号。
1.你也知道，人类听觉范围的频率是 20Hz～20kHz 之间。对于日常语音交流（像电话），8kHz 采样率就可以满足人们的需求。但为了追求高品质、高保真，你需要将音频输入设备的采样率设置在 40kHz 以上，这样才能完整地将原始信号保留下来。例如我们平时听的数字音乐，一般其采样率都是 44.1k、48k 等，以确保其音质的无损。
2.采集到的数据再经过量化、编码，最终形成数字信号，这就是音频设备所要完成的工作。在量化和编码的过程中，采样大小（保存每个采样的二进制位个数）决定了每个采样最大可以表示的范围。如果采样大小是 8 位，则它表示的最大值是就是 28 -1，即 255；如果是 16 位，则其表示的最大数值是 65535
视频设备的基本原理：与音频输入设备很类似。当实物光通过镜头进行到摄像机后，它会通过视频设备的模数转换（A/D）模块，即光学传感器，将光转换成数字信号，即 RGB（Red、Green、Blue）数据。
获得 RGB 数据后，还要通过 DSP（Digital Signal Processer）进行优化处理，如自动增强、白平衡、色彩饱和等都属于这一阶段要做的事情。
通过 DSP 优化处理后，你就得到了 24 位的真彩色图片。因为每一种颜色由 8 位组成，而一个像素由 RGB 三种颜色构成，所以一个像素就需要用 24 位表示，故称之为 24 位真彩色。另外，此时获得的 RGB 图像只是临时数据。因最终的图像数据还要进行压缩、传输，而编码器一般使用的输入格式为 YUV I420，所以在摄像头内部还有一个专门的模块用于将 RGB 图像转为 YUV 格式的图像
如何检测当前支持的设备：

// 获取音频设备列表
//判断浏览器是否支持这些 API
if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
  console.log("enumerateDevices() not supported.");
  return;
}

// 枚举 cameras and microphones.
navigator.mediaDevices.enumerateDevices()
.then(function(deviceInfos) {

  //打印出每一个设备的信息
// 可以根据kind区分音频设备还是视频设备
// 可以指定deviceId来用指定的设备获取音频数据
  deviceInfos.forEach(function(deviceInfo) {
    console.log(deviceInfo.kind + ": " + deviceInfo.label +
                " id = " + deviceInfo.deviceId);
  });
})
.catch(function(err) {
  console.log(err.name + ": " + err.message);
});

音视频的编码

编码帧相对于非编码帧，通过编码器（如 H264/H265、VP8/VP9）压缩后的帧称为编码帧。这里我们以 H264 为例，经过 H264 编码的帧包括以下三种类型。

I 帧：关键帧。压缩率低，可以单独解码成一幅完整的图像。
P 帧：参考帧。压缩率较高，解码时依赖于前面已解码的数据。
B 帧：前后参考帧。压缩率最高，解码时不光依赖前面已经解码的帧，而且还依赖它后面的 P 帧。换句话说就是，B 帧后面的 P 帧要优先于它进行解码，然后才能将 B 帧解码。

如何视频截图下载

var videoplay = document.querySelector('video#player');
var picture = document.querySelector('canvas#picture');
picture.getContext('2d').drawImage(videoplay, 0, 0, picture.width, picture.height);
unction downLoad(url){
   var oA = document.createElement("a"); oA.download = 'photo';
  // 设置下载的文件名，默认是'下载'
   oA.href = url; 
  document.body.appendChild(oA); oA.click(); oA.remove();
   // 下载之后把创建的元素删除
}
document.querySelector("button#save").onclick = function (){           
     downLoad(canvas.toDataURL("image/jpeg"));
  }

直播系统

image.png

使用 webRTC 录制视频基本流程是：

调用 window.navigator.webkitGetUserMedia() 获取用户的PC摄像头视频数据
利用 webscoket 将视频流数据传输到服务端
服务端推送给进入直播间的客户端

对于视频播放，可以使用 HLS(HTTP Live Streaming)协议播放直播流，iOS和 Android 都天然支持这种协议，配置简单，直接使用 video 标签即可