鐵人檔案
大家好！我又來參加 iThome 舉辦的鐵人賽了！連續 30 天不中斷每天上傳一篇文章，初探 WebRTC 加上 Firebase 讓前端也能實作視訊功能！
這篇文章主要是要通過學習 NAT 了解在不同設備之間進行連接時可能遇到的挑戰。 NAT是什麼 NAT，全稱為 Network Address Translat...
上篇說到 NAT 將內部 IP 與外部 IP 互相轉換以達到連線，但不同的 NAT 也會面臨一些連線問題，這種時候穿越防火牆/NAT技術 STUN 和 TURN...
前幾篇文章中，簡述了連接建立中的 NAT 穿越問題以及使用 STUN 和 TURN 來解決這些問題。而在這篇文我們來進一步介紹 WebRTC 在連線上最終的解決...
終於說到第三個重要 WebRTC 重要 API RTCDataChannel，用於實現資料傳輸的 API。 什麼是 RTCDataChannel？ RTCDat...
上一篇概述了 RTCDataChannel ，這篇也接續說明這個 API 該怎麼使用。如果有寫過 WebSocket 的人可能會覺得非常熟悉，這之 API 除了...
前幾篇文章都是在介紹通訊協定，WebRTC 如何通訊也有提到雖然通過瀏覽器的點對點連線不需要像 WebSocket 使用 server ，但在一開始交換資訊時仍...
這次時做會使用到 Cloud Firestore 作為第一次交換資訊的 Signaing Server，因此在開始實作前先來了解這個強大的 NoSQL 資料庫用...
終於來到實作篇啦 🎉🎉🎉 ~ 本次會先建立的 Firebase 專案當作第一次交換資訊的 server。 create-react-app 先建立一個專案! n...
首先嘗試獲取 local 端的 media stream 並將 stream 加入到 video 元素中 新增 video 在 React 中 如果要動態的將...
完成網頁的部署後，也捕捉到 local 端的 stream 。這篇會引入 Firebase SDK 並嘗試使用 Cloud Firestore 的功能讓使用者點...