WebRTC二部曲-RTCPeerConnection-下部(實作)

平台

• Visual studio 2012
• adapter.js(WebRTC跨平台的shim)

目的

這次實作我們要在同一個視窗中開啟兩個視訊畫面，當我們按下Start鍵時我們可以在第一個畫面(Caller)將webcam抓到的畫面顯示，而當我們按下Call鍵時會利用RTCPeerConnection連線取得Stream顯示在第二個畫面(Callee)，而HangUp鍵就是關閉連線，雖然這樣做實際性不高，但這樣的Demo可以很清楚地了解RTCPeerConnection的運作原理。

實作

Step 0 : adapter.js

在開始之前，我們要先解決一個擾人的問題-跨平台，就想我們在Demo getUserMedia的時候因為不同的Browser有不同的函式名稱，導致我們要去做一些處理才能確保他能在各個平台上運作，為了省去這樣的麻煩我們將使用adapter.js來cover這些問題。

Step 1 : html

我們一開始先設置需要的js及tag

Step2 : RTCPeerConnectionDemo.js

添加onclick事件給每個Button

Start : 利用webcam取得畫面(聲音)

Call : 設置RTCPeerConnection

1.設置Local跟Remote的Connection的handler

•  onicecandidate : 還記得上次的圖中的送信人(candidate)嗎?onicecandidate就是在將找到的送信人給記起來

• onaddstream(我們的demo中local peer並不需要接收stream所以local peer沒有此handler) : 當接收到stream時所要做的動作，在這裡我們將stream放到id為videoRemote的<video>中

2.將要傳送的stream放入connection中
3.建立offer及answer

• local Peer建立offer
• 將自己(local)的地址(local description)記下來
• 當對方(remote)收到地址(remote description)時記下來
• 對方(remote)也會把自己的地址(local description)記下來
• 對方(remote)發送answer給自己(local)
• 自己(local)會把對方的地址(remote description)記下來

HangUp : 關閉連線