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

1 Like 1 留言 4250 瀏覽

技術 Safari瀏覽器也要支援WebRTC

Safari瀏覽器也要開始玩網頁視訊了~ 改天來下載Safari試試多方視訊不過來源文章沒提到是從第幾版開始有這功能。 WebRTC和WebKit WebRT...

純真的人 ‧ 2015-09-14

0 Like 0 留言 3887 瀏覽

鐵人賽 Modern Web DAY 6

後疫情時代的 WebRTC 微學習系列第 6 篇

技術 Day06 WebRTC 中的 Signaling Server

Signaling server 在 WebRTC 中扮演什麼角色前面說到 WebRTC 使用 Signaling server 來交換媒體資訊與網路候選者的...

Nick Yu ‧ 2021-09-20

0 Like 0 留言 3741 瀏覽

鐵人賽 Modern Web DAY 5

後疫情時代的 WebRTC 微學習系列第 5 篇

技術 Day05 媒體協商與SDP

媒體協商上一篇提到，要進行 WebRTC的連線需要處理以下兩個問題，今天我們就來看看媒體協商的部分。必須要先知道要如何與對方連線必須了解彼此支援哪些媒體...

Nick Yu ‧ 2021-09-19

0 Like 0 留言 3589 瀏覽

鐵人賽 Software Development DAY 16

菜雞前端邁入網頁即時通訊(WebRTC)之旅系列第 16 篇

技術 [知識篇]WebRTC APIs - RTCDataChannel (屬性及事件)

學習目標了解 RTCDataChannel 中的 methods及作用透過前一章節的實作，本章藉由分解過程來了解RTCDataChannel中的功能...

早晨來杯咖啡 ‧ 2020-09-29 ‧團隊甘阿餒

0 Like 0 留言 3566 瀏覽

鐵人賽 Modern Web DAY 3

後疫情時代的 WebRTC 微學習系列第 3 篇

技術 Day03 WebRTC 架構

WebRTC整體架構圖取自官網如下 https://webrtc.github.io/webrtc-org/architecture/# 上方三個箭頭...

Nick Yu ‧ 2021-09-17

0 Like 0 留言 3564 瀏覽

鐵人賽 Software Development DAY 25

菜雞前端邁入網頁即時通訊(WebRTC)之旅系列第 25 篇

技術 [實作篇]Signaling Server - Socket.io Events

新手入門，如有錯誤，歡迎指正～～～系列文章同步更新於部落格目標本章將使用socket來完成 WebRTC 中基本的Signaling交換，包含off...

早晨來杯咖啡 ‧ 2020-10-08 ‧團隊甘阿餒

0 Like 0 留言 3525 瀏覽

鐵人賽 Software Development DAY 23

菜雞前端邁入網頁即時通訊(WebRTC)之旅系列第 23 篇

技術 [知識篇]WebRTC - Signaling Server

新手入門，如有錯誤，歡迎指正～～～系列文章同步更新於部落格 What is signaling WebRTC主要能夠實現即時點對點的數據傳輸，而點對點間...

早晨來杯咖啡 ‧ 2020-10-06 ‧團隊甘阿餒

0 Like 0 留言 3491 瀏覽

鐵人賽 Software Development DAY 12

菜雞前端邁入網頁即時通訊(WebRTC)之旅系列第 12 篇

技術 [知識篇]WebRTC APIs - RTCPeerConnection object = Event handlers / methods =

學習目標了解 RTCPeerConnection 中的Event handlers及methods 延續上一章節的實作，這裡會一一講解每個步驟 RTC...

早晨來杯咖啡 ‧ 2020-09-25 ‧團隊甘阿餒

0 Like 0 留言 3315 瀏覽

鐵人賽 Software Development DAY 10

菜雞前端邁入網頁即時通訊(WebRTC)之旅系列第 10 篇

技術 [實作篇]MediaStreams API - 基本應用(搭配CSS filter)

學習目標如何利用 CSS filter 搭配video element做出濾鏡效果實作接下來會展示簡單實作並搭配CSS filter屬性，注意: 這...

早晨來杯咖啡 ‧ 2020-09-23 ‧團隊甘阿餒

0 Like 0 留言 3300 瀏覽

鐵人賽 Modern Web DAY 14

後疫情時代的 WebRTC 微學習系列第 14 篇

技術 Day14 [實作] 分享畫面及錄影

快速測試一次分享畫面的功能在瀏覽器的console中輸入 navigator.mediaDevices.getDisplayMedia() 實作常常需要...

Nick Yu ‧ 2021-09-28

0 Like 0 留言 3143 瀏覽

鐵人賽 Modern Web DAY 11

後疫情時代的 WebRTC 微學習系列第 11 篇

技術 Day11 [實作] 如何在 WebRTC 中切換設備

建立開發環境我們需要一個 http server，安裝 http-server ，安裝方式如文檔建立一個資料夾 WebRTC ，裡面包含一個 ind...

Nick Yu ‧ 2021-09-25

0 Like 2 留言 3057 瀏覽

鐵人賽 Software Development DAY 28

菜雞前端邁入網頁即時通訊(WebRTC)之旅系列第 28 篇

技術 [實作篇]WebRTC - Video Chat (data channel)

新手入門，如有錯誤，歡迎指正～～～系列文章同步更新於部落格目標上一章節已經完成WebRTC基本應用的部分，本章會加入最後一部分 RTCDataCha...

早晨來杯咖啡 ‧ 2020-10-11 ‧團隊甘阿餒

0 Like 0 留言 3001 瀏覽

鐵人賽 Modern Web DAY 2

後疫情時代的 WebRTC 微學習系列第 2 篇

技術 Day02 WebRTC 簡介

一場全球大流行的 COVID-19 疫情，以及 H264、H265、VP8、VP9等影音壓縮技術加上 5G 行動網路的商用，使線上會議、線上課程成為常態，許多...

Nick Yu ‧ 2021-09-16

0 Like 0 留言 2975 瀏覽

鐵人賽 Modern Web DAY 10

後疫情時代的 WebRTC 微學習系列第 10 篇

技術 Day10 獲取攝影機及麥克風的訪問權限

上一篇我們使用 getUserMedia 來獲取使用者裝置權限，不過他的實際功能如其名，是用來取得使用者的媒體流(Media stream)，裡面包含了要求的影...

Nick Yu ‧ 2021-09-24

0 Like 0 留言 2942 瀏覽

鐵人賽 Modern Web DAY 18

後疫情時代的 WebRTC 微學習系列第 18 篇

技術 Day18 使用 GCP 免費雲端主機測試 Turn server

我們可以使用 GCP的免費方案 https://cloud.google.com/free/docs/gcp-free-tier?hl=zh-tw#free-t...

Nick Yu ‧ 2021-10-02

1 Like 0 留言 2750 瀏覽

鐵人賽 Modern Web DAY 28

後疫情時代的 WebRTC 微學習系列第 28 篇

技術 Day28 [實作] 一對一視訊通話(8): Docker compose 整合 TURN Server

前面的實作中，我們都是使用 google 提供的 STUN server，在後疫情時代的 WebRTC 微學習系列第 19 篇中我們使用 coturn 來...

Nick Yu ‧ 2021-10-12

0 Like 0 留言 2541 瀏覽

鐵人賽 Modern Web DAY 29

後疫情時代的 WebRTC 微學習系列第 29 篇

技術 Day29 使用 addTransceiver 單向接收串流

前面我們使用 RTCPeerConnection.addTrack() 來把我們的音視訊傳送給對方 const stream = await navigator...

Nick Yu ‧ 2021-10-13

0 Like 0 留言 2477 瀏覽

鐵人賽 Modern Web DAY 9

後疫情時代的 WebRTC 微學習系列第 9 篇

技術 Day09 在瀏覽器上檢查現有設備

前幾篇介紹了 WebRTC 是如何連線的，今天我們要開始在瀏覽器上使用 WebRTC 的 API。使用瀏覽器 + WebRTC 可以快速實現即時影音通訊，而且...

Nick Yu ‧ 2021-09-23

1 Like 0 留言 2426 瀏覽

技術搞懂 P2P 技術 (3) - WebRTC x AWS x KVS

WebRTC 全名 Web Real-Time Communication，是一個支援網頁瀏覽器進行即時語音對話或影片對話的 API WebRTC Wiki...

nickhuang9527 ‧ 2022-04-02

0 Like 0 留言 2409 瀏覽

鐵人賽 Modern Web DAY 20

後疫情時代的 WebRTC 微學習系列第 20 篇

技術 Day20 Socket.io 常用的 API

接下來我們要把前面的東西組合起來，拼湊成一個一對一的視訊系統，不過我今天們先來看看，Socket.io 有哪些常用的api。訂閱訊息 socket.on(&q...

Nick Yu ‧ 2021-10-04

0 Like 1 留言 2400 瀏覽

鐵人賽 Software Development DAY 30

菜雞前端邁入網頁即時通訊(WebRTC)之旅系列第 30 篇

技術 WebRTC之旅：終

轉眼間，三十天過去了～在這些日子中，練習寫文章,練習自主學習的步調,練習整理思緒,學習新知...等等回頭看看第一天開賽的自己，與現在的差異，會發現除了對於主...

早晨來杯咖啡 ‧ 2020-10-13 ‧團隊甘阿餒

0 Like 0 留言 2388 瀏覽

鐵人賽 Software Development DAY 15

菜雞前端邁入網頁即時通訊(WebRTC)之旅系列第 15 篇

技術 [實作篇]WebRTC APIs - RTCDataChannel - transfer text data

介紹 WebRTC APIs 三大核心之一 RTCDataChannel 學習目標運用 RTCDataChannel 在 peers 間傳遞資料同樣先...

早晨來杯咖啡 ‧ 2020-09-28 ‧團隊甘阿餒

0 Like 0 留言 2356 瀏覽

鐵人賽 Modern Web DAY 26

後疫情時代的 WebRTC 微學習系列第 26 篇

技術 Day26 [實作] 一對一視訊通話(6): 關閉鏡頭或麥克風

我們在視訊通話中很常用的一個功能就是關閉鏡頭或是麥克風，今天我們將實作此功能 1. 在 index.html 中增加 <div> <but...

Nick Yu ‧ 2021-10-10

0 Like 0 留言 2302 瀏覽

鐵人賽 Modern Web DAY 23

後疫情時代的 WebRTC 微學習系列第 23 篇

技術 Day23 [實作] 一對一視訊通話(3): Client

昨天我們把 Signaling server 完成了，今天我們要繼續完成 Client 端：細部分解完整程式碼測試 index.html 上一篇為...

Nick Yu ‧ 2021-10-07

0 Like 0 留言 2290 瀏覽

鐵人賽 Software Development DAY 17

菜雞前端邁入網頁即時通訊(WebRTC)之旅系列第 17 篇

技術 [實作篇]WebRTC APIs - RTCDataChannel ( 檔案傳輸 )

學習目標運用 RTCDataChannel 在 peers 間傳遞文檔(File data) 附上完整程式碼實作利用 RTCDataChannel...

早晨來杯咖啡 ‧ 2020-09-30 ‧團隊甘阿餒

0 Like 0 留言 2238 瀏覽

技術 WebRTC一对一视频通话(Flutter+React+Go+WebRTC方案)

WebRTC技术经过多年的发展，已经非常成熟，它提供了HTML5流媒体技术的一整套解决方案及API，可用来实现一对一视频通话，视频会议，远程教育以及远程会诊等应...

kangshaojun ‧ 2021-08-08

1 Like 0 留言 2122 瀏覽

鐵人賽 Modern Web DAY 13

後疫情時代的 WebRTC 微學習系列第 13 篇

技術 Day13 [實作] 把視訊及音訊內容錄製下來

本篇我們將實作音視訊的錄製並下載，內容包含: 錄製影片回放影片下載影片複製上一篇程式碼 cp -r take-a-photo video-...

Nick Yu ‧ 2021-09-27

0 Like 0 留言 2000 瀏覽

鐵人賽 Modern Web DAY 12

後疫情時代的 WebRTC 微學習系列第 12 篇

技術 Day12 [實作] 使用瀏覽器來拍照並加上濾鏡

上一篇嘗試了 WebRTC 的切換設備並顯示自己的影像，今天我們將通過上一次的程式碼來做拍照的功能並且加上一些濾鏡處理，我們將實作：在視訊中取得畫面截圖...

Nick Yu ‧ 2021-09-26

0 Like 0 留言 1988 瀏覽

鐵人賽 Modern Web DAY 24

後疫情時代的 WebRTC 微學習系列第 24 篇

技術 Day24 [實作] 一對一視訊通話(4): 加入通話及掛斷機制

結合前兩篇我們已經實現了 MVP（Minimum Viable Product；最小可行產品），完成了最簡單的一對一通話，後續我們會慢慢強化他的功能，今天我們會...

Nick Yu ‧ 2021-10-08

0 Like 1 留言 1922 瀏覽

鐵人賽 Modern Web DAY 30

後疫情時代的 WebRTC 微學習系列第 30 篇

技術 Day30 WebRTC 一對多連線

上一篇我們使用 addTransceiver 單向接收串流，但是卻不能兩個人一起接收，今天我們要來改善這一點，主要問題是因為我們在啟動時就建立了單一的 RTC...

Nick Yu ‧ 2021-10-14