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

0 Like 0 留言 5254 瀏覽

鐵人賽 Software Development DAY 8

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

技術 [知識篇]MediaStreams API - MediaStreamTrack Object

學習目標了解 MediaStreamTrack 物件包含了哪些屬性及功能還不知道如何取得MediaStreamTrack 物件的話，可以先觀看該章節...

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

1 Like 1 留言 5245 瀏覽

技術 Safari瀏覽器也要支援WebRTC

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

純真的人 ‧ 2015-09-14

0 Like 0 留言 5132 瀏覽

鐵人賽 Software Development DAY 16

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

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

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

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

0 Like 0 留言 5042 瀏覽

鐵人賽 Modern Web DAY 6

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

技術 Day06 WebRTC 中的 Signaling Server

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

Nick Yu ‧ 2021-09-20

1 Like 1 留言 4985 瀏覽

技術實測Webrtc網頁內建視訊執行情況(多人聊天)

Microsoft Edge 在這場Webrtc的麻將桌上缺角呀..-.- Edge 支援 getUserMedia() 的啟動但是不支援RTCPeerCon...

純真的人 ‧ 2015-08-23

0 Like 0 留言 4818 瀏覽

鐵人賽 Modern Web DAY 5

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

技術 Day05 媒體協商與SDP

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

Nick Yu ‧ 2021-09-19

0 Like 0 留言 4690 瀏覽

鐵人賽 Modern Web DAY 3

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

技術 Day03 WebRTC 架構

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

Nick Yu ‧ 2021-09-17

0 Like 0 留言 4646 瀏覽

鐵人賽 Software Development DAY 25

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

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

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

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

1 Like 0 留言 4426 瀏覽

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

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

nickhuang9527 ‧ 2022-04-02

0 Like 0 留言 4167 瀏覽

鐵人賽 Software Development DAY 10

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

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

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

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

0 Like 0 留言 4099 瀏覽

鐵人賽 Software Development DAY 12

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

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

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

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

0 Like 0 留言 4095 瀏覽

鐵人賽 Modern Web DAY 11

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

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

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

Nick Yu ‧ 2021-09-25

0 Like 0 留言 4090 瀏覽

鐵人賽 Modern Web DAY 14

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

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

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

Nick Yu ‧ 2021-09-28

1 Like 0 留言 4090 瀏覽

鐵人賽 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 留言 4074 瀏覽

鐵人賽 Modern Web DAY 10

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

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

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

Nick Yu ‧ 2021-09-24

0 Like 2 留言 4054 瀏覽

鐵人賽 Software Development DAY 28

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

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

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

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

0 Like 0 留言 3971 瀏覽

鐵人賽 Modern Web DAY 2

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

技術 Day02 WebRTC 簡介

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

Nick Yu ‧ 2021-09-16

0 Like 0 留言 3949 瀏覽

鐵人賽 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

0 Like 0 留言 3926 瀏覽

鐵人賽 Modern Web DAY 16

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

技術 [Day16] 介紹 Firebase

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

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

0 Like 0 留言 3837 瀏覽

鐵人賽 Modern Web DAY 29

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

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

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

Nick Yu ‧ 2021-10-13

0 Like 0 留言 3517 瀏覽

鐵人賽 Modern Web DAY 26

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

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

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

Nick Yu ‧ 2021-10-10

0 Like 0 留言 3298 瀏覽

鐵人賽 Software Development DAY 15

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

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

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

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

0 Like 1 留言 3254 瀏覽

鐵人賽 Software Development DAY 30

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

技術 WebRTC之旅：終

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

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

0 Like 0 留言 3241 瀏覽

鐵人賽 Modern Web DAY 9

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

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

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

Nick Yu ‧ 2021-09-23

0 Like 0 留言 3148 瀏覽

鐵人賽 Software Development DAY 17

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

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

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

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

0 Like 0 留言 3027 瀏覽

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

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

kangshaojun ‧ 2021-08-08

0 Like 0 留言 3027 瀏覽

鐵人賽 Modern Web DAY 20

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

技術 Day20 Socket.io 常用的 API

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

Nick Yu ‧ 2021-10-04

0 Like 0 留言 2972 瀏覽

鐵人賽 Modern Web DAY 16

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

技術 Day16 RTCPeerConnection: Offer / Answer

在前面的文章中，已經對 WebRTC 相關的重點進行了介紹，包含網絡協商、媒體協商、如何進行網路穿透等，以及使用 WebRTC API 獲取設備及音視訊，今天我...

Nick Yu ‧ 2021-09-30

1 Like 0 留言 2848 瀏覽

鐵人賽 Modern Web DAY 13

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

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

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

Nick Yu ‧ 2021-09-27

0 Like 0 留言 2839 瀏覽

鐵人賽 Modern Web DAY 23

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

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

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

Nick Yu ‧ 2021-10-07