iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Software Development

新手也能打造網路電話系統-WebRTC入門與活用 系列

因為疫情的關係,我們無法經常見面,但我對你的關心少不了,打一通視訊電話讓我看看你過的好不好,待在家裡是否胖了些。你說:「視訊軟體百百種,我有選擇障礙」,我說:「沒關係,我親手打造一個送給你」。
本系列將帶領新手了解WebRTC技術,並實作一套網路電話系統給你最親愛的人。你擔心沒有相關的專業知識?別怕!新手都能學會了,你還在等什麼?趕快訂閱起來,把本系列文章看完吧!

鐵人鍊成 | 共 30 篇文章 | 16 人訂閱 訂閱系列文 RSS系列文
DAY 11

Day 11 - 應用篇 - 建構WebSocket聊天室(架構總覽)

了解WebSocket的概念後,我們要練習用Socket.IO來打造一個聊天室系統,藉此了解WebSocket的使用方式與概念,在日後實作WebRTC網路電話時...

2021-09-25 ‧ 由 Jo6678 分享
DAY 12

Day 12 - 應用篇 - 建構WebSocket聊天室(Client端)

上一篇介紹了WebSocket聊天室系統的整體架構,本篇我們要打造系統的Client端。 Client端有以下的功能: 提供輸入視窗讓使用者輸入名稱。 連線至...

2021-09-26 ‧ 由 Jo6678 分享
DAY 13

Day 13 - 應用篇 - 建構WebSocket聊天室(Server端)

上一篇我們完成Client端的程式碼,而本篇我們要打造系統的Server端。 Server端有以下的功能: 提供API讓使用者取得聊天室系統的網頁。 提供So...

2021-09-27 ‧ 由 Jo6678 分享
DAY 14

Day 14 - 觀念篇 - WebRTC協商流程

本篇要介紹在WebRTC協商流程,有了這個流程我們才能成功進行WebRTC通話。WebRTC協商流程是指雙方建立WebRTC通話前的必要過程,過程中會傳遞一些重...

2021-09-28 ‧ 由 Jo6678 分享
DAY 15

Day 15 - 應用篇 - 建構WebRTC網路電話(架構總覽)

了解WebRTC的協商流程後,我們要練習打造一個網路電話系統。本篇會先介紹網路電話的功能、專案架構、系統流程,讓大家大致了解我們接下來要做的事情有哪些。 網路電...

2021-09-29 ‧ 由 Jo6678 分享
DAY 16

Day 16 - 應用篇 - 建構WebRTC網路電話(Client端)

上一篇介紹了WebRTC網路電話系統的整體架構,本篇我們要打造系統的Client端。 Client端有以下的功能: 通話前顯示自己的影像。 通話後顯示對方的影...

2021-09-30 ‧ 由 Jo6678 分享
DAY 17

Day 17 - 應用篇 - 建構WebRTC網路電話(Server端)

上一篇完成Client端的程式碼,而本篇我們要打造系統的Server端。 Server端有以下的功能: 提供API讓使用者取得網路電話系統的網頁。 提供Soc...

2021-10-01 ‧ 由 Jo6678 分享
DAY 18

Day 18 - 應用篇 - 搭建ICE Server

先前有介紹過WebRTC在傳遞多媒體資訊時所需的協定,而在上一篇我們完成了一個基本的網路電話系統,但過程中我們僅使用STUN協議,這樣在特定類型的NAT下會無法...

2021-10-02 ‧ 由 Jo6678 分享
DAY 19

Day 19 - 應用篇 - 雙方影像顯現與鏡像

我們已經完成一個能進行視訊通話的專案,接下來後續幾篇文章會陸續為系統添加一些常見的功能。 雙方影像顯現 在視訊過程中,除了看到對方的影像之外,第二個重要的事情是...

2021-10-03 ‧ 由 Jo6678 分享
DAY 20

Day 20 - 應用篇 - 音視訊啟用與關閉

視訊過程中,使用者可能會有關閉麥克風或攝影機的需求,而這樣的功能可藉由控制MediaStream中的MediaStreamTrack來完成。 取得音視訊軌道 從...

2021-10-04 ‧ 由 Jo6678 分享