目前現今比較常被使用的串流協定有 HLS, RTMP, WebRTC HLS 全名 HTTP Live Streaming，是目前最普及的串流協定之一，因為透過...
WebRTC 全名 Web Real-Time Communication，是一個支援網頁瀏覽器進行即時語音對話或影片對話的 API WebRTC Wiki...
上一篇我們使用 addTransceiver 單向接收串流 ，但是卻不能兩個人一起接收，今天我們要來改善這一點，主要問題是因為我們在啟動時就建立了單一的 RTC...
前面我們使用 RTCPeerConnection.addTrack() 來把我們的音視訊傳送給對方 const stream = await navigator...
前面的實作中，我們都是使用 google 提供的 STUN server，在 後疫情時代的 WebRTC 微學習系列 第 19 篇 中我們使用 coturn 來...
首先我們需要有 Docker 環境，如果還沒有可以參考 Docker 安装 製作 Dockerfile 製作 dockerfile 我們需要先了解我們的程式是如...
我們在視訊通話中很常用的一個功能就是關閉鏡頭或是麥克風，今天我們將實作此功能 1. 在 index.html 中增加 <div> <but...
如果我們的電腦有兩個攝影機，就會有切換裝置的需求，今天我們就來加入這個功能 在 index.html 增加兩個 select 用來選擇設備 <div&...
結合前兩篇我們已經實現了 MVP（Minimum Viable Product；最小可行產品），完成了最簡單的一對一通話，後續我們會慢慢強化他的功能，今天我們會...
昨天我們把 Signaling server 完成了，今天我們要繼續完成 Client 端： 細部分解 完整程式碼 測試 index.html 上一篇為...
今天我們要實作 Signaling server 的部分： 建立文件 # 進入要放專案的路徑 ❯ cd ~/Desktop/WebRTC/sample #...
接下來幾天，我們會實作一個一對一視訊通話的案例，我們會建立一個 client 端給使用者視訊使用 以及一個 signaling server用於信令的傳輸，最後...
接下來我們要把前面的東西組合起來，拼湊成一個一對一的視訊系統，不過我今天們先來看看，Socket.io 有哪些常用的api。 訂閱訊息 socket.on(&q...
安裝 coturn 使用 apt 安裝 ❯ sudo apt update ❯ sudo apt install coturn ❯ turnserver -...
我們可以使用 GCP的免費方案 https://cloud.google.com/free/docs/gcp-free-tier?hl=zh-tw#free-t...
上一篇我們通過簡單的例子了解 Offer / Answer 的機制，今天我們要加上視訊： Bob 通過 addTrack 把自己的音視訊軌道加入 PeerCo...
在前面的文章中，已經對 WebRTC 相關的重點進行了介紹，包含網絡協商、媒體協商、如何進行網路穿透等，以及使用 WebRTC API 獲取設備及音視訊，今天我...
實作 聊天室 server 端，使用 SSL 聊天室 client 端，使用 SSL 為什麼要使用 Socket.io 使用webSocket 建立在...
快速測試一次分享畫面的功能 在瀏覽器的console中輸入 navigator.mediaDevices.getDisplayMedia() 實作 常常需要...
本篇我們將實作音視訊的錄製並下載，內容包含: 錄製影片 回放影片 下載影片 複製上一篇程式碼 cp -r take-a-photo video-...
上一篇嘗試了 WebRTC 的切換設備並顯示自己的影像，今天我們將通過上一次的程式碼來做拍照的功能並且加上一些濾鏡處理，我們將實作： 在視訊中取得畫面截圖...
建立開發環境 我們需要一個 http server，安裝 http-server ，安裝方式如文檔 建立一個資料夾 WebRTC ，裡面包含一個 ind...
上一篇我們使用 getUserMedia 來獲取使用者裝置權限，不過他的實際功能如其名，是用來取得使用者的媒體流(Media stream)，裡面包含了要求的影...
前幾篇介紹了 WebRTC 是如何連線的，今天我們要開始在瀏覽器上使用 WebRTC 的 API。 使用瀏覽器 + WebRTC 可以快速實現即時影音通訊，而且...
ICE ICE（Interactive Connectivity Establishment，互動式連接建立）是用於 Offer/Answer 模式下的 NAT...
NAT 網路位址轉換(英語：Network Address Translation，縮寫：NAT)是一種實現內網主機與外網通訊的方法，它會在IP封包通過路由器...
Signaling server 在 WebRTC 中扮演什麼角色 前面說到 WebRTC 使用 Signaling server 來交換媒體資訊與網路候選者的...
媒體協商 上一篇提到，要進行 WebRTC的連線需要處理以下兩個問題，今天我們就來看看媒體協商的部分。 必須要先知道要如何與對方連線 必須了解彼此支援哪些媒體...
WebRTC 通訊 WebRTC 最常見的應用場景就是一對一的視訊通話，當我們準備和另一端的人進行點對點的連線，會遇到哪些問題呢? 必須要先知道要如何與對方連...
WebRTC整體架構圖取自官網如下 https://webrtc.github.io/webrtc-org/architecture/# 上方三個箭頭...
sixwings
Nick Yu
iThome鐵人賽
看影片追技術