音視頻通信加餐 —— WebRTC一肝到底

最近需要搭建一個(gè)在線課堂的直播平臺(tái)，考慮到清晰度和延遲性，我們一致認(rèn)為使用 WebRTC 最合適。

原因有兩點(diǎn)：首先是“點(diǎn)對(duì)點(diǎn)通信”非常吸引我們，不需要中間服務(wù)器，客戶端直連，通信非常方便；再者是 WebRTC 瀏覽器原生支持，其他客戶端支持也很好，不像傳統(tǒng)直播用 flv.js 做兼容，可以實(shí)現(xiàn)標(biāo)準(zhǔn)統(tǒng)一。

然而令我非常尷尬的是，社區(qū)看了好幾篇文章，理論架構(gòu)寫了一堆，但沒(méi)一個(gè)能跑起來(lái)。WebRTC 里面概念很新也很多，理解它的通信流程才是最關(guān)鍵，這點(diǎn)恰恰很少有描述。

于是我就自己搗鼓吧。搗鼓了幾天，可算是整明白了。下面我結(jié)合自己的實(shí)踐經(jīng)驗(yàn)，按照我理解的關(guān)鍵步驟，帶大家從應(yīng)用場(chǎng)景的角度認(rèn)識(shí)這個(gè)厲害的朋友 —— WebRTC。

線上預(yù)覽本地通信 Demo:https://example.ruims.top/local/

大綱預(yù)覽

本文介紹的內(nèi)容包括以下方面：

• 什么是 WebRTC？
• 獲取媒體流
• 對(duì)等連接流程
• 本地模擬通信源碼
• 局域網(wǎng)兩端通信
• 一對(duì)多通信
• 我想學(xué)更多

什么是 WebRTC？

1. 較高的延遲
2. 清晰度難以保證

獲取媒體流

var stream = await navigator.mediaDevices.getUserMedia()

var stream = await navigator.mediaDevices.getDisplayMedia()

• 域名是 localhost
• 協(xié)議是 https

let stream = await navigator.mediaDevices.getDisplayMedia({
  audio: false,
  video: true
})

var stream = await navigator.mediaDevices.getDisplayMedia({
  audio: false,
  video: {
    width: 1920,
    height: 1080
  }
})

// 視頻軌道
let videoTracks = stream.getVideoTracks()
// 音頻軌道
let audioTracks = stream.getAudioTracks()
// 全部軌道
stream.getTracks()

const getNewStream = async () => {
  var stream = new MediaStream()
  let audio_stm = await navigator.mediaDevices.getUserMedia({
    audio: true
  })
  let video_stm = await navigator.mediaDevices.getDisplayMedia({
    video: true
  })
  audio_stm.getAudioTracks().map(row => stream.addTrack(row))
  video_stm.getVideoTracks().map(row => stream.addTrack(row))
  return stream
}

對(duì)等連接流程

第一步：創(chuàng)建連接實(shí)例

var peerA = new RTCPeerConnection()
var peerB = new RTCPeerConnection()

var stream = await navigator.mediaDevices.getUserMedia()
stream.getTracks().forEach(track => {
  peerA.addTrack(track, stream)
})

peerB.ontrack = async event => {
  let [ remoteStream ] = event.streams
  console.log(remoteStream)
})

第二步：建立對(duì)等連接

var offer = await peerA.createOffer()
var answer = await peerB.createAnswer()

await peerB.setRemoteDescription(offer)
await peerB.setLocalDescription(answer)

await peerA.setRemoteDescription(answer)
await peerA.setLocalDescription(offer)

peerA.onicecandidate = event => {
  if (event.candidate) {
    peerB.addIceCandidate(event.candidate)
  }
}

peerA.onconnectionstatechange = event => {
  if (peerA.connectionState === 'connected') {
    console.log('對(duì)等連接成功！')
  }
  if (peerA.connectionState === 'disconnected') {
    console.log('連接已斷開(kāi)！')
  }
}

本地模擬通信源碼

上一步我們梳理了點(diǎn)對(duì)點(diǎn)通信的流程，其實(shí)主要代碼也就這么多。這一步我們?cè)侔堰@些知識(shí)點(diǎn)串起來(lái)，簡(jiǎn)單實(shí)現(xiàn)一個(gè)本地模擬通信的 Demo，運(yùn)行起來(lái)讓大家看效果。

<div class="local-stream-page">
  <video autoplay controls muted id="elA"></video>
  <video autoplay controls muted id="elB"></video>
  <button onclick="onStart()">播放</button>
</div>

var peerA = null
var peerB = null
var videoElA = document.getElementById('elA')
var videoElB = document.getElementById('elB')

const onStart = async () => {
  try {
    var stream = await navigator.mediaDevices.getUserMedia({
      audio: true,
      video: true
    })
    if (videoElA.current) {
      videoElA.current.srcObject = stream // 在 video 標(biāo)簽上播放媒體流
    }
    peerInit(stream) // 初始化連接
  } catch (error) {
    console.log('error：', error)
  }
}

const peerInit = stream => {
  // 1. 創(chuàng)建連接實(shí)例
  var peerA = new RTCPeerConnection()
  var peerB = new RTCPeerConnection()
  // 2. 添加視頻流軌道
  stream.getTracks().forEach(track => {
    peerA.addTrack(track, stream)
  })
  // 添加 candidate
  peerA.onicecandidate = event => {
    if (event.candidate) {
      peerB.addIceCandidate(event.candidate)
    }
  }
  // 檢測(cè)連接狀態(tài)
  peerA.onconnectionstatechange = event => {
    if (peerA.connectionState === 'connected') {
      console.log('對(duì)等連接成功！')
    }
  }
  // 監(jiān)聽(tīng)數(shù)據(jù)傳來(lái)
  peerB.ontrack = async event => {
    const [remoteStream] = event.streams
    videoElB.current.srcObject = remoteStream
  }
  // 互換sdp認(rèn)證
  transSDP()
}

const transSDP = async () => {
  // 1. 創(chuàng)建 offer
  let offer = await peerA.createOffer()
  await peerB.setRemoteDescription(offer)
  // 2. 創(chuàng)建 answer
  let answer = await peerB.createAnswer()
  await peerB.setLocalDescription(answer)
  // 3. 發(fā)送端設(shè)置 SDP
  await peerA.setLocalDescription(offer)
  await peerA.setRemoteDescription(answer)
}

局域網(wǎng)兩端通信

// peerA 端
let offer = await peerA.createOffer()
await peerA.setLocalDescription(offer)
await peerA.setRemoteDescription(answer)

// peerA 端
const transSDP = async () => {
  let offer = await peerA.createOffer()
  // 向 peerB 傳輸 offer
  socketA.send({ type: 'offer', data: offer })
  // 接收 peerB 傳來(lái)的 answer
  socketA.onmessage = async evt => {
    let { type, data } = evt.data
    if (type == 'answer') {
      await peerA.setLocalDescription(offer)
      await peerA.setRemoteDescription(data)
    }
  }
}

// peerA 端
peerA.onicecandidate = event => {
  if (event.candidate) {
    socketA.send({ type: 'candid', data: event.candidate })
  }
}

// peerB 端，接收 peerA 傳來(lái)的 offer
socketB.onmessage = async evt => {
  let { type, data } = evt.data
  if (type == 'offer') {
    await peerB.setRemoteDescription(data)
    let answer = await peerB.createAnswer()
    await peerB.setLocalDescription(answer)
    // 向 peerA 傳輸 answer
    socketB.send({ type: 'answer', data: answer })
  }
  if (type == 'candid') {
    peerB.addIceCandidate(data)
  }
}

一對(duì)多通信

// 發(fā)起端
var offer = null
var Peers = [] // 連接實(shí)例數(shù)組

// 接收端請(qǐng)求連接，傳來(lái)標(biāo)識(shí)id
const newPeer = async id => {
  // 1. 創(chuàng)建連接
  let peer = new RTCPeerConnection()
  // 2. 添加視頻流軌道
  stream.getTracks().forEach(track => {
    peer.addTrack(track, stream)
  })
  // 3. 創(chuàng)建并傳遞 SDP
  offer = await peerA.createOffer()
  socketA.send({ type: 'offer', data: { id, offer } })
  // 5. 保存連接
  Peers.push({ id, peer })
}

// 監(jiān)聽(tīng)接收端的信息
socketA.onmessage = async evt => {
  let { type, data } = evt.data
  // 接收端請(qǐng)求連接
  if (type == 'join') {
    newPeer(data)
  }
  if (type == 'answer') {
    let index = Peers.findIndex(row => row.id == data.id)
    if (index >= 0) {
      await Peers[index].peer.setLocalDescription(offer)
      await Peers[index].peer.setRemoteDescription(data.answer)
    }
  }
}