WebRTC

简述

WebRTC 简述

• 音视频处理 + 即时通讯的开源库
• 2010 年 Google 将其开源
• 它是一个非常优秀的多媒体框架，主要用于浏览器，并且是跨平台
• 与 ffmpeg 类似，但是侧重点不一样，ffmpeg 主要是处理多媒体文件的编译、音视频的编解码、对文件的处理等，而 WebRTC 主要是处理网络的抖动、丢包、评估、回音消除、降噪等

WebRTC 能做啥？

• 音视频实时互动
• 游戏、即时通讯、文件传输等
• 它是一个百宝箱，传输、音视频处理（回音消除、降噪等）

主要内容

• 音视频设备访问与管理
• 音视频数据的采集
• 数据的传输与实时互动
• WebRTC 的工作机制
• 涉及到的 API
  • navigator.mediaDevices.enumerateDevices // 获取用户设备信息
  • navigator.mediaDevices.getUserMedia // 采集设备信息流
  • navigator.mediaDevices.getDisplayMedia // 采集桌面信息流
  • new MediaRecorder // 录制音视频

设备管理

• navigator.mediaDevices.enumerateDevices()
• 在调用此方法前，需要用户授权允许，浏览器会弹窗提示，但是直接调用此方法并不会触发弹窗，需要调用 getUserMedia 才会，也就是说可以先调用 getUserMedia，然后授权后，再调用此方法就能获取到对应的设备，当然有些浏览器不需要授权就可以直接调用成功，如 Chrome，而 Safari 则需要

音视频数据的采集

• navigator.mediaDevices.getUserMedia({ video: true, audio: true })

• video 和 audio 的类型除了可以是 boolean 外，还可以是一个对象

  video: {
      width: number
      height: number
      aspectRatio: number // 宽高的比例
      frameRate: number // 帧率
      facingMode: 'user' | 'environment' | 'left' | 'right' // 使用哪个摄像头
      resizeMode: string // 裁剪
  }
  audio: {
      volume: number // 音量
      sampleRate: number // 采样率
      sampleSize: number // 采样大小，位深
      echoCancellation: boolean // 是否开启回音消除
      autoGainControl: boolean // 增加音量
      noiseSuppression: boolean // 是否开启降噪功能
      latency: number // 延迟大小
      channelCount: number // 声道数
      deviceID: number // 设备ID，当有多个设备进行切换时使用，通过上面的 enumerateDevices 获取
      groupID: number // 物理设备
  }
  

• getUserMedia 返回流相关的 API，MediaStream 可以直接作为参数给 video.srcObject 进行播放

  • MediaStream.addTrack() // 增加轨
  • MediaStream.removeTrack() // 删除轨
  • MediaStream.getVideoTracks() // 获取所有的视频轨
  • MediaStream.getAudioTracks() // 获取所有的音频轨
  • MediaStream.onaddtrack // 监听增加轨事件
  • MediaStream.onremovetrack // 监听删除轨事件
  • MediaStream.onended // 监听结束事件

浏览器适配

• adapter.js 主要是对 API 做兼容，增加了如 webkit、moz 等前缀

浏览器视频特效

• 使用 CSS filter ==> 底层调用的是 OpenGL
• 支持的特效种类
  • grayscale 灰度
  • sepia 褐色
  • saturate 饱和度
  • hue-rotate 色相旋转
  • invert 反色
  • opacity 透明度
  • brightness 亮度
  • contrast 对比度
  • blur 模糊
  • drop-shadow 阴影
• 在 video 播放的时候，可以使用 canvas.drawImage(video) 进行截图，截图中可以含有 filter 的效果，但是实际保存到本地的图片并没有此效果

录制媒体流

• const mediaRecorder = new MediaRecorder(stream[, options])
  • stream 表示媒体流，可以从 getUserMedia、<video>、<audio>、<canvas> 获取
  • options 表示限制选项
    • mimeType 录制的格式
      • video/webm;codecs=h264
      • video/mp4;codecs=vp8
      • audio/webm;codecs=opus
    • audioBitsPerSecond 音频码率
    • videoBitsPerSecond 视频码率
    • bitsPerSecond 整体码率
• mediaRecorder API
  • mediaRecorder.start(timeslice) // 开始录制媒体， timeslice 是可选的，如果设置了按会时间切片存储数据
  • mediaRecorder.stop() // 停止录制，此时会触发包括最终 Blob 数据的 dataavailable 事件
  • mediaRecorder.pause() // 暂停录制
  • mediaRecorder.resume() // 恢复录制
  • mediaRecorder.isTypeSupported() // 检查支持的录制格式
• mediaRecorder 事件
  • mediaRecorder.ondataavailable // 每次记录一定时间的数据时（如果没有指定时间片，则记录整个数据时）会定期触发
  • mediaRecorder.onerror // 错误事件，录制会被停止
• js 存储数据的方式
  • 字符串
  • Blob
  • ArrayBuffer
  • ArrayBufferView // 带类型的 Buffer

作者：chenjie
链接：https://webchenjie.cn
来源：ChenJieBlog