iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
Modern Web

前端工程師30天 WebRTC + Firebase 視訊通話原理到實作 系列

大家好!我又來參加 iThome 舉辦的鐵人賽了!連續 30 天不中斷每天上傳一篇文章,初探 WebRTC 加上 Firebase 讓前端也能實作視訊功能!

鐵人鍊成 | 共 30 篇文章 | 20 人訂閱 訂閱系列文 RSS系列文 團隊來啊!打摳啊!第二年!
DAY 1

[Day1] 簡介與開發框架

[Day1] 簡介與開發框架 主題緣由 由於在前陣子開發個人專案時想要使用 WebRTC 的技術完成線上直播讀書會的功能,過程中到處爬文,發現網路上大多是使用...

2023-09-13 ‧ 由 Yumy 分享
DAY 2

[Day2] 網際網路協議 OSI、TCP/IP

網路的層級 當我們按下 enter 後 Internet 會經過許多過程才能將資訊傳遞到另一端,而每種訊息格式依照規範模型分布在不同的層級,並協議好各層級的溝通...

2023-09-14 ‧ 由 Yumy 分享
DAY 3

[Day3] Transport 傳輸層 TCP/UDP

上一篇提到了網路通訊協定 OSI、TCP/IP,將通訊時不同資料的傳輸方式制定一套標準,而這篇會提到其中的傳輸層,WebRTC又是使用哪個傳輸層協議及原因。 T...

2023-09-15 ‧ 由 Yumy 分享
DAY 4

[Day4] 媒體傳輸協議 RTP

上一篇說到 WebRTC 在傳輸層是使用 UPD 協議達到即時且重複快速發送封包的機制而這篇會提到同樣也是在傳輸層的 RTP 媒體傳輸協議。 媒體傳輸協議 R...

2023-09-16 ‧ 由 Yumy 分享
DAY 5

[Day5] 即時網頁通訊技術 Polling, Long Polling, WebSocket, WebRTC

上一篇我們探討了媒體傳輸協議RTP,現在讓我們深入研究網路通信中更多的技術和協議。在進入 WebRTC 前,需要了解 Polling、Long Polling...

2023-09-17 ‧ 由 Yumy 分享
DAY 6

[Day6] 介紹 WebRTC

前面花了很多篇幅說明通訊協定,以及各種通訊技術,這篇終於要說到主題 WebRTC! 什麼是 WebRTC WebRTC(Web Real-Time Commun...

2023-09-18 ‧ 由 Yumy 分享
DAY 7

[Day7] WebRTC 重要 API

終上篇概述了 WebRTC 及他的架構,接下來我們針對架構中 WebRTC API 做一些介紹,也可以了解我們可以透過這些 API 做到什麼事 重要API We...

2023-09-19 ‧ 由 Yumy 分享
DAY 8

[Day8] MediaStreams - getUserMedia 獲取使用者的視訊與音訊

Media Capture and Streams API (Media Stream) 也可以稱為 MediaStream API,他代表著音訊與視訊的媒體流...

2023-09-20 ‧ 由 Yumy 分享
DAY 9

[Day9] MediaStreams - getTracks、addTrack 取得 MediaStream

上篇我們用 navigator.mediaDevices.getUserMedia(constraints)取得了使用者的媒體流看並把內容 console 出來...

2023-09-21 ‧ 由 Yumy 分享
DAY 10

[Day10] RTCPeerConnection - SDP 與建立連線✨

WebRTC 核心功能之一是 RTCPeerConnection,其中相關的 SDP(Session Description Protocol)協定的 Offe...

2023-09-22 ‧ 由 Yumy 分享