技術 [Day22] 實作 - WebRTC ICE 候選者處理

在點對點連接前需要先收集 ICE 找到最適合的連線方式再交換 SPD 資訊，上篇先完成了 SDP 交換，接著這篇會完成 ICE 候選人的收集。 collectI...

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

WebRTC 核心功能之一是 RTCPeerConnection，其中相關的 SDP（Session Description Protocol）協定的 Offe...

技術 [Day27] 實作 - styled-component & 部署

部署專案 複習 🚀[Day18] 實作 - Firebase 創建專案 & 部署 在這篇文章有說到如何部署專案，完成後可以再輸入 npm run bui...

技術 [Day1] 簡介與開發框架

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

技術 [Day9] MediaStreams - getTracks、addTrack 取得 MediaStream

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

技術 [Day14] RTCDataChannel 資料傳輸

終於說到第三個重要 WebRTC 重要 API RTCDataChannel，用於實現資料傳輸的 API。 什麼是 RTCDataChannel？ RTCDat...

技術 [Day11] RTCPeerConnection - RTCIceServer NAT 網絡地址轉換

這篇文章主要是要通過學習 NAT 了解在不同設備之間進行連接時可能遇到的挑戰。 NAT是什麼 NAT，全稱為 Network Address Translat...

技術 [Day24] 實作 - WebRTC 音訊和視訊控制

完成了視訊&音訊的通訊，接下來會開始進行優化，因此這篇就先了解在視訊過程中控制媒體的功能：開啟關閉音訊、視訊、關閉對方音訊。 首先新增一個 state...

技術 [Day15] RTCDataChannel - createDataChannel 發送和接收數據

上一篇概述了 RTCDataChannel ，這篇也接續說明這個 API 該怎麼使用。如果有寫過 WebSocket 的人可能會覺得非常熟悉，這之 API 除了...

技術 [Day25] 實作 - WebRTC 結束通話

實作篇即將結束! 在前一部分，我們已經看到如何建立視訊通話應用程式，但是現在讓我們來處理一個重要的問題：結束視訊通話。 當用戶完成通話或離開應用程式時，應確保的...