一、介紹

WebRTC是一個支持Web端以及原生app進行實時語音、視頻和數據傳輸的開源項目。

WebRTC有幾個JavaScript API - 單擊鏈接查看演示。

  • getUserMedia(): 音頻和視頻捕獲
  • MediaRecorder: 音頻和視頻錄製
  • RTCPeerConnection: 用戶之間的音頻和視頻流
  • RTCDataChannel: 用戶之間的數據通道

WebRTC 可運行設備？

在Firefox，Opera和桌面和Android上的Chrome。 WebRTC也可用於iOS和Android上的本機應用程序。

什麼是信令？

WebRTC使用RTCPeerConnection在瀏覽器之間傳遞流數據，但也需要一種協調通信和發送控制消息的機制，這一過程稱為信令。 WebRTC沒有指定信令實現的方法和協議。 在本文章中，我們將使用Socket.IO進行消息傳遞，但是還有很多選擇。

什麼是 STUN 和 TURN?

WebRTC被設計為點對點通信，因此用戶可以通過最直接的路線進行連接。 但是，WebRTC是為了應對真實世界的網路而構建的：客戶端應用程序需要穿越NAT網關和防火牆，並且在直接連接失敗的情況下需要對等網路需求回退。 作為該過程的一部分，WebRTC API使用STUN伺服器來獲取您的計算機的IP地址，並且在對等通信失敗的情況下使TURN伺服器充當中繼伺服器。（WebRTC更詳細解釋）

WebRTC是否安全？

所有WebRTC組件都必須使用加密，並且只能使用安全來源（HTTPS或本地主機）的JavaScript API。 信令機制並不是由WebRTC標準定義的，所以您必須確保使用安全的協議。

二、概述

本文章會構建一個捕獲攝像頭視頻的應用程序，然後通過WebRTC點對點分享。 在這過程中，我們將學習如何使用WebRTC 核心 API，並使用Node.js作為消息伺服器。

你會學到什麼？

  • 從您的攝像頭獲取視頻
  • 使用RTCPeerConnection傳輸視頻流
  • 使用RTCDataChannel傳輸數據流
  • 設置一個信令服務來交換消息
  • 整合信令和對等連接
  • 拍照並通過數據通道分享

你需要準備什麼？

  • Chrome 47或以上
  • Web Server for Chrome，或使用您自己的Web伺服器
  • 示例代碼
  • 一個文本編輯器
  • HTML，CSS和JavaScript的基礎知識

三、獲取示例代碼

下載代碼

如果您熟悉git，可以通過克隆來從GitHub下載這個實驗的代碼：

git clone https://github.com/googlecodelabs/webrtc-web

或者，點擊下邊的鏈接下載.zip文件的代碼

點我下載?

github.com

打開下載的zip文件。 將會看到一個項目文件夾（adaptive-web-media），該文件夾包含此實驗每一步的文件夾以及所有您需要的資源。

您將在名字為work的目錄中完成所有的編碼工作。

step-nn文件夾包含此實驗每個步驟的完成版本，以供參考。

安裝並驗證Web伺服器

雖然您可以使用自己的web伺服器，但是這個實驗還可以與Chrome Web Server配合使用。 如果您尚未安裝該應用，則可以從Chrome網上應用店安裝。

在安裝適用於Chrome的Web伺服器應用程序後，點擊新標籤頁或應用程序啟動器中的Chrome應用程序快捷方式：

點擊Web Server 圖標:

接下來，你會看到這個對話框，它允許你配置你的本地Web伺服器：

點擊CHOOSE FOLDER按鈕，然後選擇剛創建的工作文件夾。 您將能夠通過「 Web Server URL(s) 」選項中突出顯示的URL來查看Chrome中正在進行的工作。

在選項下，選中自動顯示index.html旁邊的複選框，如下所示：

停止並重新啟動伺服器，方法是滑動標有「Web Server: STARTED 」的切換按鈕到左側，然後返回到右側。

現在通過單擊突出顯示的Web伺服器URL，在Web瀏覽器中訪問您的工作站點。 應該看到一個像這樣的頁面，它對應於work/index.html：

顯然，這個應用程序還沒有做任何有趣的事情 - 到目前為止，這只是我們用來確保您的Web伺服器正常工作的最小骨架。 您將在隨後的步驟中添加功能和佈局功能。


推薦閱讀：
相關文章