webRtc
webRtc web端架构
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 文档会单独发,然后这个会持续更新 做一个虚拟会议室