WebRTC初识

WilliamLuo
277 阅读2分钟

简介

是什么？

  • 音视频处理+即使通讯的开源库
  • 2010年Google将其开源
  • 多媒体，跨平台

能做什么？

  • 音视频事实互动
  • 游戏、即时通讯、文件传输等
  • 音视频处理（回声消除，降噪）

主要内容

  • 音视频设备访问与管理
  • 音视频数据的采集
  • 数据的传输与实时互动
  • WebRTC的工作机制

WebRTC原理与架构

架构

整体架构

image.png

源码目录

image.png

image.png

image.png

image.png

运行机制

主要概念

  • Track
  • MediaStream
  • RTCPeerConnection
  • RTCDataChannel

调用过程

image.png

image.png

设备管理

API

enumerateDevices

  • 基本格式

      var devices=navigator.mediaDevices.enumerateDevices();

  • MedidaDevicesInfo

属性说明
deviceID设备ID
label设备的名字
kind设备的种类
groupID两个设备groupID相同，说明是一个物理设备
  • promise（另外）

image.png

  • 注

在http中label是不显示的，只有在https中才显示，因为浏览器的安全策略。

音视频数据采集

API

getUserMedia

  • 基本格式

    var promise=navigator.mediaDevices.getUserMedia(constraints)

  • MediaStreamConstraints

video

属性
height高
width长
aspectRatio屏幕宽高比
frameRate帧率
facingModeuser,environment,left,right
resizeMode裁剪画面

audio

属性涵义
volume音量大小
sampleRate采样率
sampleSize采样大小
echoCancellation回声消除
autoFainControl自动增益
noiseSuppression降噪
latency延迟
channelCount声道
deviceID设备编号
groupID是否一个设备

  • 适配

      使用adapter.js

视频特效

核心

操作css

  • CSS filter,-webkit-filter/filter
  • video与filter关联
  • OpenGL/Metal/...

支持的特效种类

css中去操作

特效说明
grayscale灰度
sepia褐色
saturate饱和度
hue-retate色相旋转
invert透明度
opacity清晰度
brightness亮度
contrast对比度
blur模糊
drop-shadow阴影

从视频中获取图片

使用canvas 获取

拿到流后

canvas.getContext('2d').drawImage(video,0,0,canvas.width,canvas.height)

MediaStream API

MediaStream function

  • MediaStream.addTrack()
  • MediaStream.removeTrack()
  • MediaStream.getVideoTracks()
  • MediaStream.getAudioTracks()

MediaStream event

  • MediaStream.onaddtrack
  • MediaStream.onremovetrack
  • MediaStream.onended

音视频录制媒体流

重要概念

MediaRecoder

  • 基本格式

      var meidaRecoder=new MediaRecoder(stream[options])

  • 参数说明

参数说明
stream媒体流可从getUserMedia,,,等获取
options限制项目

详见

options说明
mimeTypevideo/webm,audio/webm,video/webm(codecs=vp8/h264),audio/webm(codecs=opus)
audioBitsPerSecond音频码率
videdoBitsPerSecond视频码率
bitsPerSecond整体码率

  • API

    1.start(timeslice)
//timeslice为可选项，如果设置了会按时间切片存储数据
2.stop()
//停止时，触发Blob数据的dataavailable事件
3.pause
4.resume
5.isTypeSupported

  • 事件

      1.ondataavaiable
  2.error

JavaScript存储数据的方式

  • 字符串
  • Blob
  • ArrayBuffer
  • ArrayBufferView

录制视频

  • 主要使用bufer存储数据
  • 使用createObjectURL来做url便于下载和播放

采集桌面数据

getDisplayMedia

  • 基本格式

      var promise=navigator.mediaDevices.getDisplayMedia(constraints)

  • constraints

avatar
文章
阅读
粉丝