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

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

技術 [Day14] RTCDataChannel 資料傳輸

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

技術 [Day19] 實作 - getUserMedia 獲取使用者媒體並顯示

首先嘗試獲取 local 端的 media stream 並將 stream 加入到 video 元素中 新增 video 在 React 中 如果要動態的將...

技術 [Day17] Firebase Cloud Firestore 資料庫

這次時做會使用到 Cloud Firestore 作為第一次交換資訊的 Signaing Server，因此在開始實作前先來了解這個強大的 NoSQL 資料庫用...

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

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

技術 [Day23] 實作 - WebRTC 遠端視訊顯示

前幾篇我們處理了 SDP 與 ICE 的交換，已經達成了連線，接下來只要把遠端視訊顯示出來就好🫶 ontrack 此方法接收一個 RTCTrackEvent...

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

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

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

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

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

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

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

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