webRtc

webRtc web端架构

github开源地址：fugang1996/videochat: webrtc实现视频聊天以及简单sdk集成 (github.com)

graph TD
webRTC  --> WebApiC++APi  --> 会话管理信令-->音频
会话管理信令-->视频
会话管理信令-->媒体传输

graph TD

音频-->OPUS/G.711PCM编码
音频-->回音消除
音频-->降噪
音频-->音频采集

graph TD

视频-->vp8/H264编码
视频-->JitteryBuffer
视频-->图像增强
视频-->视频采集

graph TD

媒体传输-->RTP/SRTR
媒体传输-->TURN/STUN
媒体传输-->ICE/SDP/DTLS/UDP
媒体传输-->DTLS/UDP
媒体传输-->网络I/O

WebRTC的网络结构

• Mesh网络结构： 每个参与者都向其他所有的参与者发送媒体流，同时接受其他所有参与者发送的流媒体
• MCU网络结构：所有参与者仅与中心mcu媒体服务器连接，mcu合并所有参与者视频流（视频聊天九宫格）
• SFU网络结构：中心节点媒体服务器只负责转发

视频直播

屏幕共享

电子白板

切换设备

demo

• 获取摄像头与话筒对应的媒体流

  
  const promsie = navigator.mediaDevices.getUserMedia({{audio:true,video:true}})
  

• 新的媒体轨道加入

      MediaStream.addTrack()
  

• 媒体轨道被移除

    MediaStream.removeTrack()

• 指定帧率，分辨率，回音消除

    const constraints={ width:{min:640,idea:1280},height:{min:640,ideal:720},aspectRatio:{ideal:1.77777777778} }
    navigator.mediaDevices.getUserMedia({video:true}).then(mediaStream=>{
        const track = mediaStream.getVideoTracks()[0] // 第一个视频轨道
        track.applyConstraints(constranints) // 添加约束
        .then(()=>{}
    )

• 静音以及黑频

let audioTrack = mediaStream.getAudioTracks()[0];
audioTrack.enabled = false; // 静音

let videoTrack = mediaStream.getVideoTracks()[0];
videoTrack.enabled = false; //黑频

• 停止播放视频

    const tracks = stream.getTracks()
    tracks.forEach(track=>{
        track.stop() // 遍历媒体轨道数组，调用stop() 一一停止
    })

• 屏幕共享

let constranins // 约束需求
// 举例子
cursor //鼠标光标显示
displaySurface //选择的屏幕内容
logicalSurface //逻辑显示面
const promise = navigator.mediaDevices.getDisplayMedia(constranins)
    

• 查询所有媒体设备

    const enumeratorPromise= navigator.mediaDevieds.enumerateDevices() //返回所有媒体设备

后续要使用到的api太多了 我直接封装成sdk 然后写一个sdk文档 sdk 文档会单独发，然后这个会持续更新 做一个虚拟会议室