Web前端WebRTC攻略(二) 音视频设备及数据采集

let buffer = new Uint8Array([255, 255, 255, 255]).buffer;
let dataView = new DataView(buffer);

一开始生成的 buffer 是不能被直接访问的。只有将 buffer 做为参数生成一个具体的类型的新对象时（如 Uint32Array 或 DataView），这个新生成的对象才能被访问。

ArrayBufferView

ArrayBufferView 并不是一个具体的类型，而是代表不同类型的 Array 的描述。这些类型包括：Int8Array、Uint8Array、DataView 等。也就是说 Int8Array、Uint8Array 等才是 JavaScript 在内存中真正可以分配的对象。

Blob

浏览器为我们提供了一个录制音视频的类，即 MediaRecorder。

var mediaRecorder = new MediaRecorder(stream[, options]);

参数解释：

• stream：通过 getUserMedia 获取的本地视频流或通过 RTCPeerConnection 获取的远程视频流。

• options：可选项，指定视频格式、编解码器、码率等相关信息，如

  mimeType: ‘video/webm;codecs=vp8’。

录制流

var buffer;


//当该函数被触发后，将数据压入到blob中
function handleDataAvailable(e) {
  if (e && e.data && e.data.size > 0) {
    buffer.push(e.data);
  }
}


function startRecord() {
  buffer = [];
  //设置录制下来的多媒体格式
  var options = {
    mimeType: "video/webm;codecs=vp8",
  };


  //判断浏览器是否支持录制
  if (!MediaRecorder.isTypeSupported(options.mimeType)) {
    console.error(`${options.mimeType} is not supported!`);
    return;
  }


  try {
    //创建录制对象
    mediaRecorder = new MediaRecorder(window.stream, options);
  } catch (e) {
    console.error("Failed to create MediaRecorder:", e);
    return;
  }


  //当有音视频数据来了之后触发该事件
  mediaRecorder.ondataavailable = handleDataAvailable;
  //开始录制
  mediaRecorder.start(10);
}
...

播放录制文件

首先根据 buffer 生成 Blob 对象；然后，根据 Blob 对象生成 URL，并通过 video标签进行播放。

<video id="playback"></video>

 var blob = new Blob(buffer, {type: 'video/webm'});
 playback.src = window.URL.createObjectURL(blob);
 playback.srcObject = null;
 playback.controls = true;
 playback.play();

屏幕分享

由于 WebRTC 不包含控制部分，因此他的处理过程只使用了视频方式，而不需要信令控制。因此它和 RDP/VNC 还是存在差异。

1. 桌面数据的采集

   在桌面数据采集上，和 VNC 一样是通过各平台提供的 API 实现的。BitBlt、Hook、DirectX 等。最新的 WebRTC 都是使用的这种方式 GetWindowDC：可以通过它来抓取窗口。

2. 桌面数据的编码

   WebRTC 对桌面的编码使用的是视频编码技术，即 H264/VP8 等（好处就是压缩率高）；但 RDP/VNC 则不一样，它们使用的是图像压缩技术。

3. 传输

   WebRTC

   有根据网络情况的调节能力，网络差时会进行丢数据保证实时性。

4. 解码渲染

   解码同第二点，渲染一般会通过 OpenGL/D3D 等 GPU 进行渲染。

通过  getDisplayMedia  API 来采集桌面：

特别注意：在桌面采集的参数里，不能设置音频的constraint，也就是说，不能在采集桌面的同时采集音频。

//get桌面数据流
function getDeskStream(stream) {
  localStream = stream;
}


//采集桌面
function shareDesktop() {
  //只有在 PC 下才能抓取桌面
  if (utils.isPC) {
    //开始捕获桌面数据
    navigator.mediaDevices
      .getDisplayMedia({ video: true })
      .then(getDeskStream)
      .catch(handleError);


    return true;
  }
  return false;
}

最后，桌面分享的展示与录制和前文提到的实现方式基本相同的，这里不再赘述了。

以上就是浏览器端 WebRTC 通过设备采集音视频数据及其播放与录制的相关介绍。有了数据，接下来才可以使用 WebRTC 来实现实时音视频通讯。

紧追技术前沿，深挖专业领域

扫码关注我们吧！