https://blog.gtwang.org/tags/webrtc/ Recent content in WebRTC on G. T. Wang Hugo -- 0.156.0 zh-tw G. T. Wang Wed, 17 Sep 2014 11:17:55 +0800 https://blog.gtwang.org/web-development/webrtc-media-stream/ Wed, 17 Sep 2014 11:17:55 +0800 https://blog.gtwang.org/web-development/webrtc-media-stream/ <p>這裡介紹如何使用 WebRTC 在網頁中擷取本地端的多媒體影像串流，包含聲音與影像。</p> <p>在過去有許多的網頁應用程式都有即時溝通（real time communication，簡稱 RTC）的需求，也就是遠端視訊聊天的功能，例如早先的 Google Talk 的視訊聊天、Facebook 聊天與後來發展的 Google Hangouts 等，這些都是用來讓人及時溝通的工具，但是在以前若要使用這樣的功能都要另外下載與安裝一些外掛程式，而安裝這些外掛的程序通常都很麻煩，甚至容易出問題，而最重要的問題是使用者可能一開始就不想安裝它了。</p> https://blog.gtwang.org/web-development/webrtc-peer-connection/ Wed, 17 Sep 2014 11:07:20 +0800 https://blog.gtwang.org/web-development/webrtc-peer-connection/ <p><a href="https://blog.gtwang.org/web-development/webrtc-media-stream/">上一篇</a>文章中我們已經可以使用 <code>MediaStream</code> 擷取本地端的多媒體串流，現在我們要利用 <code>RTCPeerConnection</code> 建立連線，準備將串流傳送出去。</p> <h2 id="ice-架構">ICE 架構</h2> <p>在建立連線之前，我們要先討論一下，peer-to-peer 連線建立上的問題，理論上來說只要電腦都有連上網路，就可以透過網路建立一條連線直接溝通，不過很多時候因為 NAT 或是防火牆等問題，會讓您無法直接建立這樣的連線，這時候可以使用 <a href="https://en.wikipedia.org/wiki/Interactive_Connectivity_Establishment">ICE</a> 的架構來幫助我們建立一個 peer-to-peer 的連線。</p>