iT邦幫忙

鐵人檔案

第 12 屆 iThome 鐵人賽
回列表
Software Development

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

即時通訊時代的來臨,許多應用如: Youtube、Instagram、twitch、各式直播平台等,加上今年疫情關係,衍生出許多遠端作業的新流程及相應的工具,Zoom、Google meet 等視訊會議工具 ; 在即時通訊技術上,可分為兩大主軸:影音視頻處理及網路傳輸技術,藉此機會初探領域中影音處理的基礎原理及深化對網路傳輸協定的理解及應用~

鐵人鍊成 | 共 30 篇文章 | 76 人訂閱 訂閱系列文 RSS系列文 團隊甘阿餒
DAY 1

WebRTC之旅:始

前言 自從新冠病毒疫情爆發後,疫情持續延燒,Amazon、Microsoft、Facebook、Google 等科技巨頭為了員工健康與社會安全紛紛呼籲員工在家...

DAY 2

[知識篇] 何謂 WebRTC

將由淺入深來了解 WebRTC 的面貌 WebRTC (Web Real-Time Communication) WebRTC (Web Real-Time...

DAY 3

[知識篇]淺談即時網頁通訊技術 - Polling / WebSocket / WebRTC

即時網頁通訊技術 以平常我們熟知的HTTP協定(HTTP protocol)為例,溝通方式是必須由Client主動通知Server,但Server是無法主動發送...

DAY 4

[知識篇]WebRTC - JavaScript APIs

學習目標 主要了解 WebRTC 包含了哪些 JavaScript APIs,才能用來為網頁提供更多的多媒體應用,如:音視訊會議,檔案傳輸等。 APIs 這邊...

DAY 5

[知識篇] MediaStreams API - getUserMedia 介紹

學習目標 本章你將會了解到: getUserMedia 包含哪些功能 如何使用getUserMedia來擷取本機影音流(Video/Audio stream...

DAY 6

[知識篇]MediaStreams API - getUserMedia 相容性處理

MediaStreams APIs經過演變更新下,新舊版api略微不同,getUserMedia也是其中之一,包含其參數constraints,因為是基於Med...

DAY 7

[知識篇] MediaStreams API - MediaStream Object

學習目標 了解 MediaStream 物件以及其 MediaStreamTrack object 如何利用 getUserMedia 取得 MediaStr...

DAY 8

[知識篇]MediaStreams API - MediaStreamTrack Object

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

DAY 9

[實作篇]MediaStreams API - 基本應用(搭配canvas)

學習目標 如何利用 getUserMedia API 實作簡單的canvas應用 實作 接下來會展示一些簡單實作,主要是熟悉能透過getUserMedia...

DAY 10

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

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