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

6 Like 0 留言 26712 瀏覽

鐵人賽 Software Development DAY 2

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

技術 [知識篇] 何謂 WebRTC

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

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

4 Like 0 留言 23262 瀏覽

鐵人賽 Software Development DAY 26

30天之即時網路影音開發攻略(小白本) 系列第 26 篇

技術 30-26之 WebRTC 的 P2P 即時通信與小範例

黑色好看版 - 傳送門正文開始在很前面的文章中，咱們有簡單的介紹如何使用 WebRTC 來採集聲音與影像，但那時只是很簡單的介紹一下而以，所以接下來的幾篇...

馬克 ‧ 2018-11-10

5 Like 1 留言 23186 瀏覽

鐵人賽 Software Development DAY 29

30天之即時網路影音開發攻略(小白本) 系列第 29 篇

技術 30-29之 WebRTC 的 P2P 打洞術 ( ICE )

黑色好看版 - 傳送門正文開始上一篇文章中，咱們已經理解了為什麼 P2P 連線如此的困難，接下來這篇文章咱們將要學習： WebRTC 是如何進行打洞與連...

馬克 ‧ 2018-11-13

0 Like 1 留言 15251 瀏覽

鐵人賽 Software Development DAY 5

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

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

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

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

0 Like 0 留言 14660 瀏覽

鐵人賽 Software Development DAY 29

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

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

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

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

0 Like 1 留言 13995 瀏覽

鐵人賽 Software Development DAY 18

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

技術 [知識篇]WebAPIs - Blob

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

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

3 Like 0 留言 13186 瀏覽

鐵人賽 Software Development DAY 3

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

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

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

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

1 Like 0 留言 12698 瀏覽

鐵人賽 Modern Web DAY 7

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

技術 Day07 NAT 類型

NAT 網路位址轉換(英語：Network Address Translation，縮寫：NAT)是一種實現內網主機與外網通訊的方法，它會在IP封包通過路由器...

Nick Yu ‧ 2021-09-21

6 Like 6 留言 11738 瀏覽

鐵人賽 IT技術 DAY 28

且戰且走HTML5 系列第 28 篇

技術且戰且走HTML5(28) 建立視訊會議

今天先建立起簡單的視訊會議做驗證。建立視訊會議的方式，基本上就是昨天描述的過程的實作。連線資訊的傳遞，則透過之前包裝好的ws.io模組。首先看一下伺服器：...

fillano ‧ 2012-11-05

3 Like 0 留言 11720 瀏覽

鐵人賽 Software Development DAY 27

30天之即時網路影音開發攻略(小白本) 系列第 27 篇

技術 30-27之 WebRTC 的 Signaling Server

黑色好看版 - 傳送門正文開始上一篇文章中，咱們已經學習完了 WebRTC 的一些基本知識，接下來咱們要針對 Signaling Server 這東東來做...

馬克 ‧ 2018-11-11

2 Like 0 留言 11306 瀏覽

鐵人賽 Software Development DAY 7

30天之即時網路影音開發攻略(小白本) 系列第 7 篇

技術 30-07之Web 如何進行語音與影像採集 ?

黑色好看版 - 傳送門正文開始前面幾篇咱們已經學習了聲音與影像的採集相關知識，那接下咱們來學習一下如何在 Web 上進行聲音與影像的採集。如何在...

馬克 ‧ 2018-10-22

0 Like 0 留言 9332 瀏覽

鐵人賽 Software Development DAY 4

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

技術 [知識篇]WebRTC - JavaScript APIs

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

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

1 Like 0 留言 8935 瀏覽

鐵人賽 Software Development DAY 8

30天之即時網路影音開發攻略(小白本) 系列第 8 篇

技術 30-08之 WebRTC 採集的詳細說明與聲音的加工

黑色好看版 - 傳送門正文開始前一篇文章『30-07 Web 如何進行語音與影像採集 ?』咱們已經學習到如何使用 WebRTC 來進行聲音與影像的採集，...

馬克 ‧ 2018-10-23

0 Like 1 留言 8393 瀏覽

鐵人賽 Software Development DAY 11

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

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

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

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

2 Like 0 留言 7754 瀏覽

鐵人賽 Software Development DAY 14

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

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

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

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

0 Like 0 留言 7664 瀏覽

鐵人賽 Software Development DAY 7

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

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

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

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

0 Like 0 留言 7325 瀏覽

鐵人賽 Software Development DAY 26

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

技術 [實作篇]WebRTC - Video Chat

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

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

0 Like 0 留言 6584 瀏覽

鐵人賽 Software Development DAY 6

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

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

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

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

1 Like 0 留言 6064 瀏覽

鐵人賽 Modern Web DAY 8

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

技術 Day08 NAT 穿透 ICE、STUN、TURN

ICE ICE（Interactive Connectivity Establishment，互動式連接建立）是用於 Offer/Answer 模式下的 NAT...

Nick Yu ‧ 2021-09-22

0 Like 0 留言 5892 瀏覽

鐵人賽 Software Development DAY 22

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

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

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

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

0 Like 1 留言 5724 瀏覽

技術 WebRTC的createObjectURL影像讀取失效

其實我對WebRTC有再追蹤.https://ithelp.ithome.com.tw/questions/10192363大致上了解問題~以前WebRTC的教...

純真的人 ‧ 2019-01-29

0 Like 0 留言 5709 瀏覽

鐵人賽 Modern Web DAY 19

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

技術 Day19 部署 STUN / TURN server

安裝 coturn 使用 apt 安裝 ❯ sudo apt update ❯ sudo apt install coturn ❯ turnserver -...

Nick Yu ‧ 2021-10-03

0 Like 0 留言 5644 瀏覽

鐵人賽 Software Development DAY 9

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

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

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

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

1 Like 0 留言 5271 瀏覽

鐵人賽 Software Development DAY 24

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

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

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

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

0 Like 0 留言 5263 瀏覽

鐵人賽 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 留言 5078 瀏覽

鐵人賽 Software Development DAY 27

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

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

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

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

0 Like 1 留言 4932 瀏覽

鐵人賽 Modern Web DAY 15

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

技術 Day15 [實作] 使用 Socket.io 建立聊天室

實作聊天室 server 端，使用 SSL 聊天室 client 端，使用 SSL 為什麼要使用 Socket.io 使用webSocket 建立在...

Nick Yu ‧ 2021-09-29

0 Like 0 留言 4856 瀏覽

鐵人賽 Software Development DAY 19

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

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

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

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

0 Like 0 留言 4621 瀏覽