掌握 webRTC - 即時視訊和螢幕分享

使用 MediaStreams、麥克風、攝影機和螢幕工作。連線瀏覽器 – PeerConnection 和信令( Signaling )，帶 React

從這 12.5 小時的課程，你會學到

連接兩台或多台電腦的音訊/視訊串流
設定信令伺服器以中間人協商連接
如何使用 redux 將 webRTC 整合到 React 應用程式中
隨著應用程式的發展，程式碼組織可以最大程度地減少混亂
管理 4 個（是的 4 個）不同的非同步來源來創建令人難以置信的 Web 應用程式

要求

需要熟悉 getUserMedia() 或已經參加過第 1 部分
使用 JavaScript 和 Node 的經驗（不用到忍者程度，但有不錯的接觸經驗）
我們使用 socketio 來建立我們的信令伺服器。你一定知道，或是能夠關注我
對於後面的部分：存取 Linux 電腦（例如 AWS、Azure、DigitalOcean 等）

課程說明

TL;DR – 你將在本課程中學習 WebRTC – 如何僅使用 JavaScript 獲取視訊來源並在瀏覽器之間設定視訊聊天。第一部分和後面的幾個項目只是前端，連接部分和後面的專案需要 Node.js 和 Socketio。

現在是 2023 年。遠距醫療是一件事。與 6 個時區以外的人交談是一回事。你可以將用戶從你的應用程式抽像到 Zoom，因為它始終有效，但你會失去對互動的所有控制和追蹤。

輸入 webRTC。

WebRTC 是瀏覽器中必須令人興奮的 API 之一。它允許訪問麥克風、攝像頭，甚至螢幕，並透過網路套接字直接將它們共享到另一個瀏覽器。沒有伺服器（大部分）或其他中間人來增加頻寬、錯誤和混亂。

與 websockets 一起，webRTC 提供了瀏覽器即時通訊的視訊端，彌合了人類和基於網路的通訊中最後的差距之一。如果你正在閱讀本文，你很可能已經聽說過 webRTC。也許甚至還做了一個教學。但你走了多遠？根據我的經驗，網路上的絕大多數材料只不過是快速啟動的縮放克隆。你不知道任何東西是如何工作的，也不看文檔，並且卡在最後不知道現在該怎麼做。這就是 webRTC 能做的全部嗎？剩下的材料碎片就在每個人的頭上。 webRTC 與 websocket API 幾乎同時發布，但大多數開發人員仍然不知道如何使用它，這一事實證明了這一差距。

本課程是緩解這種情況的第一步！它不是 webRTC 的快速入門指南。網路上有很多這樣的內容。如果你想要 10 分鐘介紹製作基本 Zoom 克隆所需了解的 3-4 件事，那麼你絕對應該看看其他地方。另一方面，如果你想真正學習似乎沒人知道的最棒的 JavaScript API 之一，那麼你應該堅持下去。與 Express 和其他 JavaScript/Node 元件一樣，它在學習足夠的知識以達到「全端開發人員」一詞的浪潮中被忽略了。我的主要目標是幫助您弄清楚如何從優秀的開發人員轉變為出色的開發人員。理解…不僅僅是知道一些方法…WebRTC 是其中的一部分！

我第一次使用 webRTC 是在 2015 年，當時我在一家類似於遠距醫療的新創公司。從那時起我就一直在關注它，但由於 Apple 的不情願的支持，它沒有得到更多主流的關注，這讓我感到沮喪，但主要是因為開發人員不知道這一點。它為現有應用程式的許多改進開闢了道路，並為新應用程式奠定了明顯的基礎。讓我們改變這一點 🙂 準備詳細了解 webRTC 並開始進行應用程式內即時視訊/螢幕聊天。

我們涵蓋的內容：

僅前端部分

getUserMedia() – 存取瀏覽器中的麥克風和攝影機
在 <video /> 中播放提要
MediaStream 和 MediaStreamTrack – 視訊來源的組成部分
約束 – getSupportedConstraints() 和 getCapability() – 看看這個瀏覽器可以做什麼
applyConstraints – 動態變更 feed
錄影/音訊並回放
捕獲螢幕以進行螢幕分享並進行錄製
更改 Feed 中的輸入/輸出設備

需要的後端（node、socketio）

RTCPeerConnection – webRTC 的核心
建立報價和答案
設定 RTCSessionDescription
信令過程( The Signaling Process )
使用socketio 搭建信令伺服器( signaling server )
收集 ICE 候選人
建立一個使用 webRTC 的 React 應用程式

目標受眾

任何熟悉 JavaScript 和 Node 且剛接觸 webRTC 的人！
任何熟悉瀏覽器 webRTC api 的人，但似乎無法連接瀏覽器
任何想要免費將視訊會議放入其網路應用程式的人（無需第 3 方）！

講師簡介

Robert Bunch Code school 教師，軟體架構師和工程師 ( 更多講師主講課程介紹 )

Robert Bunch 自2004年以來一直是一名開發人員，為大公司的小型科技創業公司開發過複雜的應用程式。最近，他從 2015 年開始擔任 Code School 的教師，直接與學生一起工作，將他對教學和開發的熱情運用到實踐中。正如他的學生所說，他能夠分解程式碼的複雜性，揭開魔術的神祕面紗，並取得了巨大的成功。他在2001年獲得了電腦科學學位。