iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

後疫情時代的 WebRTC 微學習 系列

後疫情時代的 WebRTC 微學習

鐵人鍊成 | 共 30 篇文章 | 11 人訂閱 訂閱系列文 RSS系列文
DAY 21

Day21 [實作] 一對一視訊通話(1): 運作說明

接下來幾天,我們會實作一個一對一視訊通話的案例,我們會建立一個 client 端給使用者視訊使用 以及一個 signaling server用於信令的傳輸,最後...

2021-10-05 ‧ 由 Nick Yu 分享
DAY 22

Day22 [實作] 一對一視訊通話(2): Signaling server

今天我們要實作 Signaling server 的部分: 建立文件 # 進入要放專案的路徑 ❯ cd ~/Desktop/WebRTC/sample #...

2021-10-06 ‧ 由 Nick Yu 分享
DAY 23

Day23 [實作] 一對一視訊通話(3): Client

昨天我們把 Signaling server 完成了,今天我們要繼續完成 Client 端: 細部分解 完整程式碼 測試 index.html 上一篇為...

2021-10-07 ‧ 由 Nick Yu 分享
DAY 24

Day24 [實作] 一對一視訊通話(4): 加入通話及掛斷機制

結合前兩篇我們已經實現了 MVP(Minimum Viable Product;最小可行產品),完成了最簡單的一對一通話,後續我們會慢慢強化他的功能,今天我們會...

2021-10-08 ‧ 由 Nick Yu 分享
DAY 25

Day25 [實作] 一對一視訊通話(5): 切換設備

如果我們的電腦有兩個攝影機,就會有切換裝置的需求,今天我們就來加入這個功能 在 index.html 增加兩個 select 用來選擇設備 <div&...

2021-10-09 ‧ 由 Nick Yu 分享
DAY 26

Day26 [實作] 一對一視訊通話(6): 關閉鏡頭或麥克風

我們在視訊通話中很常用的一個功能就是關閉鏡頭或是麥克風,今天我們將實作此功能 1. 在 index.html 中增加 <div> <but...

2021-10-10 ‧ 由 Nick Yu 分享
DAY 27

Day27 [實作] 一對一視訊通話(7): 使用 Docker 封裝

首先我們需要有 Docker 環境,如果還沒有可以參考 Docker 安装 製作 Dockerfile 製作 dockerfile 我們需要先了解我們的程式是如...

2021-10-11 ‧ 由 Nick Yu 分享
DAY 28

Day28 [實作] 一對一視訊通話(8): Docker compose 整合 TURN Server

前面的實作中,我們都是使用 google 提供的 STUN server,在 後疫情時代的 WebRTC 微學習系列 第 19 篇 中我們使用 coturn 來...

2021-10-12 ‧ 由 Nick Yu 分享
DAY 29

Day29 使用 addTransceiver 單向接收串流

前面我們使用 RTCPeerConnection.addTrack() 來把我們的音視訊傳送給對方 const stream = await navigator...

2021-10-13 ‧ 由 Nick Yu 分享
DAY 30

Day30 WebRTC 一對多連線

上一篇我們使用 addTransceiver 單向接收串流 ,但是卻不能兩個人一起接收,今天我們要來改善這一點,主要問題是因為我們在啟動時就建立了單一的 RTC...

2021-10-14 ‧ 由 Nick Yu 分享