iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 1 留言 809 瀏覽

鐵人賽 Modern Web DAY 29

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

技術 [Day29] 延伸討論 - Peer.js 視訊通話套件

WebRTC（Web Real-Time Communication）可以實現瀏覽器之間的即時音視訊通信，但對於初學者來說，有一定的學習曲線。特別是在處理 S...

Yumy ‧ 2023-10-11 ‧團隊來啊！打摳啊！第二年！

0 Like 0 留言 539 瀏覽

鐵人賽 Modern Web DAY 28

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

技術 [Day28] 延伸討論 - 一對多、多人視訊通話

透過 WebRTC 實現一對一的連線，那麼也能完成多人通話嗎？這篇就來討論 WebRTC 能否實現多人視訊通話、會遇到什麼問題、有沒有其他方法。一對多直播若...

Yumy ‧ 2023-10-10 ‧團隊來啊！打摳啊！第二年！

0 Like 0 留言 330 瀏覽

鐵人賽 Modern Web DAY 27

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

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

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

Yumy ‧ 2023-10-09 ‧團隊來啊！打摳啊！第二年！

0 Like 0 留言 301 瀏覽

鐵人賽 Modern Web DAY 25

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

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

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

Yumy ‧ 2023-10-07 ‧團隊來啊！打摳啊！第二年！

0 Like 0 留言 324 瀏覽

鐵人賽 Modern Web DAY 24

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

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

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

Yumy ‧ 2023-10-06 ‧團隊來啊！打摳啊！第二年！

0 Like 0 留言 400 瀏覽

鐵人賽 Modern Web DAY 23

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

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

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

Yumy ‧ 2023-10-05 ‧團隊來啊！打摳啊！第二年！

0 Like 0 留言 388 瀏覽

鐵人賽 Modern Web DAY 22

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

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

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

Yumy ‧ 2023-10-04 ‧團隊來啊！打摳啊！第二年！

0 Like 0 留言 665 瀏覽

鐵人賽 Modern Web DAY 21

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

技術 [Day21] 實作 - WebRTC SDP Offer 和 Answer 交換

複習一下 👉 現在獲取了使用者的資訊要開始交換 SDP，需要完成下圖1~8個步驟，並且創建的offer、answer 需放在 Slignaling Server...

Yumy ‧ 2023-10-03 ‧團隊來啊！打摳啊！第二年！

1 Like 0 留言 430 瀏覽

鐵人賽 Modern Web DAY 20

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

技術 [Day20] 實做 - Firebase Cloud Firestore 創建視訊間

完成網頁的部署後，也捕捉到 local 端的 stream 。這篇會引入 Firebase SDK 並嘗試使用 Cloud Firestore 的功能讓使用者點...

Yumy ‧ 2023-10-02 ‧團隊來啊！打摳啊！第二年！

0 Like 0 留言 376 瀏覽

鐵人賽 Modern Web DAY 19

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

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

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

Yumy ‧ 2023-10-01 ‧團隊來啊！打摳啊！第二年！

0 Like 0 留言 484 瀏覽

鐵人賽 Modern Web DAY 18

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

技術 [Day18] 實作 - Firebase 創建專案 & 部署

終於來到實作篇啦 🎉🎉🎉 ~ 本次會先建立的 Firebase 專案當作第一次交換資訊的 server。 create-react-app 先建立一個專案! n...

Yumy ‧ 2023-09-30 ‧團隊來啊！打摳啊！第二年！

0 Like 0 留言 437 瀏覽

鐵人賽 Modern Web DAY 17

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

技術 [Day17] Firebase Cloud Firestore 資料庫

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

Yumy ‧ 2023-09-29 ‧團隊來啊！打摳啊！第二年！

0 Like 0 留言 723 瀏覽

鐵人賽 Modern Web DAY 16

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

技術 [Day16] 介紹 Firebase

前幾篇文章都是在介紹通訊協定，WebRTC 如何通訊也有提到雖然通過瀏覽器的點對點連線不需要像 WebSocket 使用 server ，但在一開始交換資訊時仍...

Yumy ‧ 2023-09-28 ‧團隊來啊！打摳啊！第二年！

0 Like 0 留言 359 瀏覽

鐵人賽 Modern Web DAY 15

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

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

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

Yumy ‧ 2023-09-27 ‧團隊來啊！打摳啊！第二年！

0 Like 0 留言 368 瀏覽

鐵人賽 Modern Web DAY 14

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

技術 [Day14] RTCDataChannel 資料傳輸

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

Yumy ‧ 2023-09-26 ‧團隊來啊！打摳啊！第二年！

0 Like 0 留言 425 瀏覽

鐵人賽 Modern Web DAY 13

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

技術 [Day13] RTCPeerConnection - ICE RTCIceCandidate ICE 協議

前幾篇文章中，簡述了連接建立中的 NAT 穿越問題以及使用 STUN 和 TURN 來解決這些問題。而在這篇文我們來進一步介紹 WebRTC 在連線上最終的解決...

Yumy ‧ 2023-09-25 ‧團隊來啊！打摳啊！第二年！

0 Like 0 留言 505 瀏覽

鐵人賽 Modern Web DAY 12

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

技術 [Day12] RTCPeerConnection - RTCIceServer STUN/TURN 穿越 NAT 防火牆

上篇說到 NAT 將內部 IP 與外部 IP 互相轉換以達到連線，但不同的 NAT 也會面臨一些連線問題，這種時候穿越防火牆/NAT技術 STUN 和 TURN...

Yumy ‧ 2023-09-24 ‧團隊來啊！打摳啊！第二年！

0 Like 0 留言 360 瀏覽

鐵人賽 Modern Web DAY 11

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

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

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

Yumy ‧ 2023-09-23 ‧團隊來啊！打摳啊！第二年！

0 Like 0 留言 391 瀏覽

鐵人賽 Modern Web DAY 10

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

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

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

Yumy ‧ 2023-09-22 ‧團隊來啊！打摳啊！第二年！

0 Like 0 留言 376 瀏覽

鐵人賽 Modern Web DAY 9

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

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

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

Yumy ‧ 2023-09-21 ‧團隊來啊！打摳啊！第二年！

0 Like 0 留言 505 瀏覽

鐵人賽 Modern Web DAY 8

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

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

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

Yumy ‧ 2023-09-20 ‧團隊來啊！打摳啊！第二年！

0 Like 0 留言 532 瀏覽

鐵人賽 Modern Web DAY 7

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

技術 [Day7] WebRTC 重要 API

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

Yumy ‧ 2023-09-19 ‧團隊來啊！打摳啊！第二年！

0 Like 0 留言 592 瀏覽

鐵人賽 Modern Web DAY 6

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

技術 [Day6] 介紹 WebRTC

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

Yumy ‧ 2023-09-18 ‧團隊來啊！打摳啊！第二年！

1 Like 0 留言 601 瀏覽

鐵人賽 Modern Web DAY 5

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

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

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

Yumy ‧ 2023-09-17 ‧團隊來啊！打摳啊！第二年！

0 Like 0 留言 485 瀏覽

鐵人賽 Modern Web DAY 4

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

技術 [Day4] 媒體傳輸協議 RTP

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

Yumy ‧ 2023-09-16 ‧團隊來啊！打摳啊！第二年！

0 Like 0 留言 548 瀏覽

鐵人賽 Modern Web DAY 3

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

技術 [Day3] Transport 傳輸層 TCP/UDP

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

Yumy ‧ 2023-09-15 ‧團隊來啊！打摳啊！第二年！

0 Like 0 留言 517 瀏覽

鐵人賽 Modern Web DAY 2

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

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

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

Yumy ‧ 2023-09-14 ‧團隊來啊！打摳啊！第二年！

0 Like 3 留言 493 瀏覽

鐵人賽 Modern Web DAY 1

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

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

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

Yumy ‧ 2023-09-13 ‧團隊來啊！打摳啊！第二年！

0 Like 0 留言 995 瀏覽

鐵人賽 DevOps DAY 26

IoT Cloud Computing on robotic vehicle 系列第 26 篇

技術 [虛實整合]FRC前端介面設計與控制

同樣我們藉由web介面搭配WebRTC去控制FRC車子的輪軸轉動，確定我們可以用前面幾篇提到的方式，將整個從雲端至地端的控制，串接起來。 Python程式主要...

Ivan ‧ 2022-10-11 ‧團隊台南巷弄美食獵人

0 Like 0 留言 1414 瀏覽

鐵人賽 DevOps DAY 14

IoT Cloud Computing on robotic vehicle 系列第 14 篇

技術 [DEMO] 實體小車的遠端操控 + WebRTC

為了要讓用戶們都可以看到整個DEMO雲端操控地端的過程．我們在地端架設Camera，並透過WebRTC(peer to peer)將影像傳至其他一樣透過brow...

Ivan ‧ 2022-09-29 ‧團隊台南巷弄美食獵人