前言

自從新冠病毒疫情爆發後，疫情持續延燒，Amazon、Microsoft、Facebook、Google 等科技巨頭為了員工健康與社會安全紛紛呼籲員工在家工作（Work From Home, WFH），這個情況下企業如何建立因應對策變成了共同課題。

在自身經歷這次的遠端作業中，可以了解到企業在這次嚴峻的狀況下如何因應新型態的工作模式下能夠維持原本的工作效率，而其中難點之一的就是溝通方式的改變，由原本面對面溝通改為遠距的視訊會議，以及如何實時掌握各員工的作業狀況。

WFH 重點之一

即時通訊

網路時代新起後，許多即時通訊應用新起，如 Line, Telegram, WeChat, WhatApp....等最為人熟悉的通訊軟體，到後疫情時期，企業為了能夠在遠距溝通情況下還能維持工作效率紛紛引入如 Slack, 微軟的 Teams 等企業級溝通協作平台。

還有視訊會議工具，最為人所知的大概就是 Zoom，後續還有 google 推出的 google meet，而視訊會議的重要性在於能夠大幅減少遠端作業下還能保持面對面溝通，減少溝通協作平台中過多不必要的文字誤解所造成過度溝通。

可見即時通訊(RTC - real time communication) 在未來應用的重要性，其中 WebRTC 就屬在網頁領域應用上的技術之一，本系列文章將會透過實作切入理論的方式，來記錄我從零開始的WebRTC之旅，希望能藉此了解其中的原理，並深化對其技術的理解與應用。

自我介紹

大家好，我是Yass，過去從毫無相關的科系畢業後，無意間接觸到網頁開發領域，被當中的技術跟應用給深深吸引，
經歷誤打誤撞的自學過程，也成功找到工作，正式進入軟體工程師的領域。

進入後才發覺，這才是真正的開始～
琳瑯滿目的技術，日新月異，尤其前端更是有感，更新的速度非常快！
在職一陣子後，趁工作空擋，摸摸自己有興趣的技術和應用，也藉此機會，參加鐵人賽，幫助自我增進自律自學的能力～

希望拖延症能改掉ＸＤ

而這次挑的主題，算是蠻陌生的，如果對 WebRTC 或是網頁即時通訊技術有興趣的朋友，歡迎交流指正～

目錄

學習的主軸大致上會分為兩類(原理與應用)，未來會隨著文章更新目錄清單。

知識篇: 了解運作原理

• [知識篇] 何謂WebRTC
• [知識篇]淺談即時網頁通訊技術 - Polling / WebSocket / WebRTC
• [知識篇]WebRTC - JavaScript APIs
• [知識篇] MediaStreams API - getUserMedia 介紹
• [知識篇]MediaStreams API - getUserMedia 相容性處理
• [知識篇] MediaStreams API - MediaStream Object
• [知識篇]MediaStreams API - MediaStreamTrack Object
• [知識篇]WebRTC APIs - RTCPeerConnection object = Event handlers / methods =
• [知識篇]WebRTC APIs - RTCPeerConnection object (SDP offer/answer)
• [知識篇]WebRTC - Session Description Protocol (SDP)
• [知識篇]WebRTC APIs - RTCDataChannel (屬性及事件)

實作篇: 深化對技術的理解

• [實作篇]MediaStreams API - 基本應用(搭配canvas)
• [實作篇]MediaStreams API - 基本應用(搭配CSS filter)
• [實作篇]WebRTC APIs - RTCPeerConnection 實作 P2P
• [實作篇]WebRTC APIs - RTCDataChannel - transfer text data

系列文章也會一併更新到我的部落格

甘阿餒 團隊成員

這邊附上我們團隊的連結，有興趣的人也可以去看看他們的文章唷！

Dino : 菜雞用 Phaser 拾起童年遊戲

Carol : 菜雞用Canvas/Pixi動動動動動起來

Deron : 菜雞 Android APP 從安裝 Android Studio 到上架 Google Play