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

0 Like 0 留言 3376 瀏覽

鐵人賽 Modern Web DAY 2

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

技術 Day02 WebRTC 簡介

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

Nick Yu ‧ 2021-09-16

1 Like 0 留言 1422 瀏覽

鐵人賽 Modern Web DAY 1

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

技術 Day01 前言

自我介紹大家好，我是 Nick，15年開始接觸 iOS App 的開發，在學習的過程中獨立完成一個 App 的設計、撰寫及上架獲得滿滿的成就感，開始喜歡鑽研...

Nick Yu ‧ 2021-09-15

1 Like 0 留言 2889 瀏覽

鐵人賽 Mobile Development DAY 4

如何用下班時間開發App經營副業系列第 4 篇

技術聊天軟體上的 WebRTC

為什麼要用 WebRTC 我們的 App 是聊天軟體，一開始只有文字對話，那時用 socket.io 就夠了。後來要加上一對一語音的功能。因為 socket.i...

ggwu ‧ 2021-09-04

0 Like 0 留言 2422 瀏覽

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

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

kangshaojun ‧ 2021-08-08

0 Like 1 留言 2673 瀏覽

鐵人賽 Software Development DAY 30

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

技術 WebRTC之旅：終

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

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

0 Like 0 留言 14682 瀏覽

鐵人賽 Software Development DAY 29

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

技術 [知識篇]WebRTC - ICE(STUN/TURN)

新手入門，如有錯誤，歡迎指正～～～系列文章同步更新於部落格在整個 RTCPeerConnection 建立連線的步驟中，如果要到正式環境使用的話，必定...

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

0 Like 2 留言 3376 瀏覽

鐵人賽 Software Development DAY 28

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

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

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

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

0 Like 0 留言 5084 瀏覽

鐵人賽 Software Development DAY 27

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

技術 [實作篇]WebRTC - Video Chat 之事件監聽

新手入門，如有錯誤，歡迎指正～～～系列文章同步更新於部落格目標上一章節已經完成一對一視訊聊天室的功能，本章會帶點之前沒提到的事件監聽，來更了解整...

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

0 Like 0 留言 7336 瀏覽

鐵人賽 Software Development DAY 26

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

技術 [實作篇]WebRTC - Video Chat

新手入門，如有錯誤，歡迎指正～～～系列文章同步更新於部落格目標上一章節已經完成 Signaling server 的部分，本章會實作簡易一對一視訊聊...

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

0 Like 0 留言 3955 瀏覽

鐵人賽 Software Development DAY 25

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

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

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

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

1 Like 0 留言 5275 瀏覽

鐵人賽 Software Development DAY 24

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

技術 [實作篇]WebRTC Signaling Server - Express x Socket.io

新手入門，如有錯誤，歡迎指正～～～系列文章同步更新於部落格專案嘗試利用express加上socket.io來建構 Signaling Server...

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

0 Like 0 留言 3966 瀏覽

鐵人賽 Software Development DAY 23

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

技術 [知識篇]WebRTC - Signaling Server

新手入門，如有錯誤，歡迎指正～～～系列文章同步更新於部落格 What is signaling WebRTC主要能夠實現即時點對點的數據傳輸，而點對點間...

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

0 Like 0 留言 5897 瀏覽

鐵人賽 Software Development DAY 22

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

技術 [知識篇]網路通訊協定 - WebRTC protocol stack

WebRTC 使用了哪些協定我們最熟悉的網路傳輸協定TCP與UDP，作為傳輸層，兩者都有各自的優缺點，而在WebRTC中，需要能夠實現即時串流應用，在影音傳輸...

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

0 Like 0 留言 4867 瀏覽

鐵人賽 Software Development DAY 19

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

技術 [知識篇]JS Global Objects - ArrayBuffer

首先看到Buffer，有寫過NodeJS等後端語言，應該對此比較熟悉，而這邊只先了解一下它是用來處理跟memory相關的效能議題，而在前端領域上，近來 Canv...

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

0 Like 1 留言 14021 瀏覽

鐵人賽 Software Development DAY 18

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

技術 [知識篇]WebAPIs - Blob

在WebRTC APIs - RTCDataChannel中，傳輸數據時只能傳輸Blob與ArrayBuffer，剛好藉此機會，來了解開發時常用於檔案上傳處理(...

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

0 Like 0 留言 2549 瀏覽

鐵人賽 Software Development DAY 17

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

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

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

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

0 Like 0 留言 3933 瀏覽

鐵人賽 Software Development DAY 16

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

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

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

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

0 Like 0 留言 2645 瀏覽

鐵人賽 Software Development DAY 15

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

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

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

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

2 Like 0 留言 7761 瀏覽

鐵人賽 Software Development DAY 14

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

技術 [知識篇]WebRTC - Session Description Protocol (SDP)

學習目標前一章講了關於SDP offer/answer 的重要性與作用，但 SDP 究竟是什麼，那就是本章的目的。了解SDP SDP Session...

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

0 Like 0 留言 5269 瀏覽

鐵人賽 Software Development DAY 13

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

技術 [知識篇]WebRTC APIs - RTCPeerConnection object (SDP offer/answer)

學習目標了解 RTCPeerConnection 中 SDP offer/answer 流程延續上章節的實作，這裡會繼續講解每個步驟 SDP off...

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

0 Like 0 留言 3754 瀏覽

鐵人賽 Software Development DAY 12

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

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

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

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

0 Like 1 留言 8399 瀏覽

鐵人賽 Software Development DAY 11

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

技術 [實作篇]WebRTC APIs - RTCPeerConnection 實作 P2P

學習目標了解 peer-to-peer 串流機制如何使用 RTCPeerConnection 在單一頁面上實作 P2P 機制因為概念資訊越來越多，我...

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

0 Like 0 留言 3559 瀏覽

鐵人賽 Software Development DAY 10

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

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

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

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

0 Like 0 留言 5651 瀏覽

鐵人賽 Software Development DAY 9

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

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

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

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

0 Like 0 留言 4625 瀏覽

鐵人賽 Software Development DAY 8

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

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

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

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

0 Like 0 留言 7665 瀏覽

鐵人賽 Software Development DAY 7

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

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

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

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

0 Like 0 留言 6592 瀏覽

鐵人賽 Software Development DAY 6

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

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

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

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

0 Like 1 留言 15261 瀏覽

鐵人賽 Software Development DAY 5

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

技術 [知識篇] MediaStreams API - getUserMedia 介紹

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

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

0 Like 0 留言 9341 瀏覽

鐵人賽 Software Development DAY 4

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

技術 [知識篇]WebRTC - JavaScript APIs

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

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

3 Like 0 留言 13190 瀏覽

鐵人賽 Software Development DAY 3

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

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

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

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