使用WebRTC建立一個網絡攝像頭通訊 App

10 月 24 日- 25 日，一票難求的 RTC 2019 實時互聯網大會將在北京舉行，次日將舉行「WebRTC 工做坊」，大會邀請了 Janus 開源項目做者，以及資深音視頻工程師，分享 WebRTC 應用的開發實踐與各個環節的邁坑經驗，並與聽衆小範圍深刻交流，名額有限，如今便可報名。

WebRTC是一個協議，容許人們使用JavaScript在兩點之間建立實時通信。

咱們能夠用這個結構使兩個或更多瀏覽器之間實現直接交流，而不須要中心服務器。

服務器只須要在鏈接的時候被使用，所以每一個客戶端知道如何鏈接彼此。

咱們可使用這個特性建立什麼類型的App呢？例如，直接網絡攝像頭鏈接。點對點通話，文件共享，還有更多。

本教程我會介紹一個當你第一次使用的時候，會發出驚呼的App：一個網絡攝像頭通訊App.

咱們不會使用原始WebRTC API,然而，咱們須要注意不少細節。這就是library的做用，它們作出了很好的抽象，人們能夠集中精力建立App而不是將精力花費的底層API上。

其中一個library是PeerJS,它使得實時通訊變得很是簡單。簡單來講就是WebRTC,它的抽象使得結果獲取更快，以後你能夠學習內部是如何運做的。

建議：當你創建一個App時候使用Bit分享到一個可重複利用的集合中，而且在你全部的項目中同步它們！不妨試一下，能夠加快你的工做速度。

後端 首先咱們須要建立後端。儘管咱們會實現直接點對點通訊，起初的握手和合做須要中心服務器。

一旦握手完成，點點之間會直接交流，而再也不須要依靠後端。

PeerJS爲咱們提供了這樣一個服務器，安裝過程很簡單，容易運行。

在一個文件夾下，初始化一個npm項目使用npm init命令，使用npm install peer指令安裝PeerJS，接着你可使用npx運行它：

Npx peerjs –port 9000

使用npx peerjs –help查看更多選擇。

這就是你的後端。

如今咱們能夠建立一個最簡單的App，咱們設置一個接收端和一個發送端。

前端 首先建立一個接收端，鏈接PeerJS服務器，等待接收信息。第一個參數new Peer()爲咱們的端點名稱，咱們叫作receiver，使得表意更清晰。： 導入PeerJS客戶端：

<script src="https://cdnjs.cloudflare.com/ajax/libs/peerjs/0.3.16/peer.min.js"></script>
複製代碼

接着初始化Peer對象。當另外一個端點鏈接咱們的時候，Connection事件被調用。當接收到一些信息以後，data事件被調用：

const peer = new Peer('receiver', { host: 'localhost', port: 9000, path: '/' })
peer.on('connection', (conn) => {
  conn.on('data', (data) => {
    console.log(data);
  })
})

複製代碼

讓咱們建立通訊的另外一端。咱們稱做sender，由於它會鏈接併發送信息到接收端。

初始化Peer對象，接着請求端點鏈接receiver端，接收端咱們以前已經建立好。一旦鏈接創建，open事件啓動，接着調用send()方法來向接收端發送信息：

const peer = new Peer('sender', { host: 'localhost', port: 9000, path: '/' })
const conn = peer.connect('receiver')
conn.on('open', () => {
  conn.send('hi!')
})
複製代碼

這就是最簡單的例子。

首先打開接收端，接着打開發送端。接受者從發送者直接獲取信息，不須要中心服務器。服務器只須要交換信息，確保兩端鏈接。以後，就不會干預兩端之間的交流。

這是一個很是基礎的信息鏈接。

下一步，咱們不會發送信息，而是讓兩端彼此共享網絡攝像頭流。

在客戶端，咱們沒有使用peer.connect()鏈接，而是使用了peer.call():

const call = peer.call('receiver', localStream)
})
複製代碼

在接收端，當接收到一個通話事件反饋以後，必須對此做出應答：

peer.on('call', call => {
  call.answer(localStream)
})
複製代碼

就像電話交流同樣，咱們不能自動回覆每一個來電，必須明確的做出應答。

每一個通話中的LocalStream是什麼？它是網絡攝像頭產生的流，咱們必須經過調用navigator.mediaDevices.getUserMedia()獲得它，這是一個瀏覽器API。

這是一個異步通信，所以咱們使用async/await來等待執行，咱們須要將通話包裹在一個異步函數中，首先：

const startChat = async () => {
  const localStream = await navigator.mediaDevices.getUserMedia({
    video: true
  })
}
startChat()
複製代碼

一旦咱們獲得了localStream對象，能夠將它分配給HTML網頁中的一個video元素。咱們能夠建立本地和遠程視頻元素：

333

將流分配給video#local元素：

document.querySelector('video#local').srcObject = localStream
複製代碼

調用receiver端，傳遞localStream對象：

const call = peer.call('receiver', localStream)
複製代碼

接收端的代碼以下：

peer.on('call', call => {
  call.answer(localStream)
})
複製代碼

咱們也須要獲得媒體流。代碼很是簡單，和發送端相似，只是咱們把全部代碼包裹在call事件反饋中：

peer.on('call', call => {
  const startChat = async () => {
    const localStream = await navigator.mediaDevices.getUserMedia({
      video: true
    })
    document.querySelector('video#local').srcObject = localStream
    call.answer(localStream)
  }
  startChat()
})
複製代碼

展現遠程流 咱們還須要添加最後一部分到發送端和接收端中。一旦從call對象的stream事件中獲得遠程流，咱們須要將它附加在video#remote元素上。

call.on('stream', remoteStream => {
  document.querySelector('video#remote').srcObject = remoteStream
})
複製代碼

接收端代碼以下：

peer.on('call', call => {
  const startChat = async () => {
    const localStream = await navigator.mediaDevices.getUserMedia({
      video: true
    })
    document.querySelector('video#local').srcObject = localStream
    call.answer(localStream)
    call.on('stream', remoteStream => {
      document.querySelector('video#remote').srcObject = remoteStream
    })
  }
  startChat()
})

複製代碼

發送端代碼以下：

const startChat = async () => {
  const localStream = await navigator.mediaDevices.getUserMedia({
    video: true
  })
  document.querySelector('video#local').srcObject = localStream
  const call = peer.call('receiver', localStream)
  call.on('stream', remoteStream => {
    document.querySelector('video#remote').srcObject = remoteStream
  })
}
startChat()
複製代碼

當其中一端經過導向新網頁或關閉瀏覽器標籤關閉了鏈接以後，另外一端中止接收流，遠程視頻流中止。

總結 咱們使用WebRTC建立了一個很是簡單的網絡攝像頭通訊App。建立了兩個文件來處理兩端通訊，可是不必這樣作。你能夠創建一個用戶接口，容許用戶本身決定是否須要調用，更重要的是，他們想與誰通話。能夠容許用戶輸入用戶名或者從列表中選擇來實現這個功能。