使用WebRTC技術搭建小型的影片聊天頁面

半截肥皂發表於2024-11-19

目錄

  • 目錄
  • 參考資料
  • 什麼是WebRTC?
  • 能做什麼?
  • 架構圖
  • 個人理解(類比)
    • 核心知識點
    • 核心知識點類比
      • ICE框架
      • STUN(協議)
      • NAT(網路地址轉換)
      • TURN
      • SDP(會話描述協議)
      • WebRTC的核心API
  • 現在開始做飯
  • 準備階段
    • 環境準備
    • 伺服器搭建
    • Coturn TURN server(開源服務) 部署
    • Signal Server信令服務
    • 信令服務與客戶端原始碼
    • 測試
  • 總結
  • 常見問題

參考資料

  • WebRTC詳細文件
  • WebRTC samples(官方)
  • 如何搭建一個簡單的webrtc伺服器(其他博主文件)
  • WebRTC官方Demo
  • webRTC開源庫
  • coturn Server部署和Docker
  • WebRTC伺服器測試地址

什麼是WebRTC?

  • WebRTC(Web實時通訊)技術
  • 瀏覽器之間交換任意資料,而無需中介
  • 不需要使用者安裝外掛或任何其他第三方軟體

能做什麼?

與Media Capture和Streams API一起
  • 支援音訊和視訊會議
  • 檔案交換
  • 螢幕共享
  • 身份管理
  • 以及與傳統電話系統的介面,包括支援傳送DTMF(按鍵撥號)訊號

架構圖

個人理解(類比)

官方文件晦澀難懂,所以按照自己的思路,整理總結。

核心知識點

先整理官方核心知識點,這裡不理解,沒關係,我們繼續按自己的思路總結
  • ICE(框架)允許您的Web瀏覽器與對等端連線
  • STUN(協議)用於發現您的公共地址並確定路由器中阻止與對等體直接連線的任何限制
  • NAT 用於為您的裝置提供公共IP地址
  • TURN 是指透過開啟與TURN伺服器的連線並透過該伺服器中繼所有資訊來繞過對稱NAT限制
  • SDP 從技術上講會話描述協議(SDP並不是一個真正的協議,而是一種資料格式)

核心知識點類比

我們使用餐廳(或者其他)來類比WebRTC核心概念, 想象一下,你現在正在餐廳裡面。顧客(使用者)可以直接與廚房(伺服器)進行交流,而不需要透過服務員(中介)。在這個餐廳裡,顧客可以點菜(傳送音影片請求)享用美食(接受音影片流)還可以與其他顧客(其他使用者)直接交流(資料傳輸),而這一切都不要額外的工具或裝置(外掛)

備註:如果你明白,上面描述,那我們就繼續。

ICE框架

想象一下ICE就像餐廳整體佈局和設計,它確保顧客(使用者)能夠順利找到座位並與廚房(對等端)建立聯絡。ICE負責協調顧客和廚房之間的所有連線方式,確保他們能順利交流。

STUN(協議)

STUN就像餐廳門口接待員,負責幫助顧客找到餐廳的公共入口。接待員會告訴顧客他們的公共地址(公共IP地址),並幫助他們瞭解是否有任何障礙(比如路由器的限制、防火牆等)阻止他們直接進入餐廳(與對等端直接連線)

NAT(網路地址轉換)

NAT就像餐廳外牆,它為餐廳提供一個公共門牌號(公共IP地址)。雖然餐廳內部有很多桌子(裝置),但外面的人只知道這個公共門牌號,而不知道內部具體位置。

TURN

TURN就像餐廳的外賣服務。如果顧客無法直接進入餐廳(由於對稱NAT限制),他們可以選擇透過外賣服務(TURN伺服器)來獲取食物。所有的訂單和交流透過外賣服務進行,這樣即使顧客無法直接到達餐廳,他們仍然可以享用美食。

SDP(會話描述協議)

SDP就像餐廳的選單,它描述了可供選擇的菜品和飲料(音影片流的格式和引數),雖然選單本身不是一個真正協議,但它提供顧客和廚房之間所需的資訊,以便他們能達成共識,確保顧客點的菜品能夠被廚房正確準備。

WebRTC的核心API

  • getUserMedia(點菜):

這個API就像顧客在餐廳裡點菜。顧客告訴廚房他們想要什麼(音訊或影片),廚房就會準備好這些食材(獲取使用者的音訊和影片流)。

  • RTCPeerConnection(廚房的工作臺):

這個API就像廚房的工作臺,負責處理顧客的訂單(建立連線)。它確保顧客和廚房之間的交流順暢,處理音影片流的傳輸,就像廚房準備和傳送食物一樣。

  • RTCDataChannel(顧客之間的交流):
    這個API就像顧客之間的對話。顧客可以直接與其他顧客交流(傳輸資料),比如分享他們的用餐體驗或交換食譜,而不需要透過服務員。
    總結
    在這個餐廳的類比中,WebRTC就像一個高效的餐廳,顧客可以直接與廚房和其他顧客交流,享受美食和分享資訊,而不需要中介的干預。核心API則是實現這一切的工具,幫助顧客點菜、廚房準備食物和顧客之間的交流。這樣,WebRTC使得實時通訊變得簡單而高效。

現在開始做飯

如果你看到這裡,恭喜你,我們達成共識,現在開始做飯。

準備階段

環境準備

安裝Docker、Nginx、Nodejs等,請查詢其他文件
  • 一臺伺服器
  • Debian 12 x86_64 作業系統
  • Docker
  • Nginx
  • Nodejs

伺服器搭建

首先我們需要兩個服務,STUN/TURN、Signal Server, What's Signal Server? 別緊張我待會,會解釋現在我們先專注與STUN/TURN,再次之前我們需要了解  Coturn TURN server(開源框架,感謝開發人員)
  • STUN/TURN
  • Signal Server 信令服務

Coturn TURN server(開源服務) 部署

對的你沒有看錯,就一行命令,這就是我為什麼推薦使用Docker的原因,詳細的Dockerfile請看 參考資料
docker run -d --network=host coturn/coturn

測試

開啟我們的測試網站 https://webrtc.github.io/samples/src/content/peerconnection/trickle-ice/ 新增伺服器,等等我們的密碼哪裡來的?

使用者名稱和密碼

使用者名稱和密碼在Dockerfile檔案裡面,我使用的是預設配置,沒設定任何配置檔案,所以密碼是預設密碼,自己可以修改
https://github.com/coturn/coturn/blob/master/docker/coturn/debian/Dockerfile

Signal Server信令服務

想象一下,在這個餐廳中,顧客(使用者)需要與廚房(對等端)進行交流,但他們並不能直接看到廚房內部情況,信令伺服器就像餐廳的接待員或前臺,負責協調顧客之間的交流和資訊傳遞。
  • 傳遞訊息,比如顧客A想與顧客B進行視訊通話,顧客A請求會先傳送到信令伺服器,然後由信令伺服器轉發給顧客B

信令服務與客戶端原始碼

注意事項: WebRTC需要使用 SSL/TLS 證書,也就是https 協議。
  • 原始碼

測試

總結

  • 搭建Signal Server信令服務
  • 搭建STUN/TURN 服務
  • Docker 部署Coturn TURN server(節省大量部署時間)

常見問題

  • 稍後補充

原始碼

  • 信令服務和客戶端

相關文章