WebRTC 輕鬆上手 – 使用 conversat.io 實際玩！（Part 2）

接續文章：http://blog.mozilla.com.tw/posts/2152/

——-

發訊伺服器 (Signaling server)

上面提到的範例，會連接到現成的發訊伺服器。這個是由我們自己維護的伺服器，且我們隨時都在注意其是否順暢運作。

我們的後續目標，是要讓大家都能透過這個伺服器而玩玩看 SimpleWebRTC。當然，我們以後並不會真正永久運轉這組伺服器，所以隨時會關閉或重新開機。

如果你要根據這組程式碼而實際建立 App，那你也可以自己運作 1 組伺服器。如果你不想再多接觸太麻煩的東西而且想隨時更新，我們也可以協助你運作或調整伺服器。這組伺服器的程式碼就放在 on github。

在開始啟動自己的 webrtc 物件時，只要送出 1 組「url」選項，就可將 1 組URL 傳送至不同的 signaling server，作為 config 的一部分。

所以檯面下到底會做些什麼？

你可以看看用戶端函式庫的完整原始碼：https://github.com/HenrikJoreteg/SimpleWebRTC/blob/master/simplewebrtc.js

signaling server 的則是：

https://github.com/andyet/signalmaster/blob/master/server.js

在 conversat.io 中啟動視訊電話的過程，應該要像這樣：

1. 先連線至發訊伺服器。使用 socket.io 就會連至我們現成的發訊伺服器，位於：

   http://signaling.simplewebrtc.com:8888

2. 針對「具備個別瀏覽器前置字串的 getUserMedia」，在呼叫之後即可請求存取本端視訊相機。

建立或取得本端視訊元素，再將我們從 getUserMedia 所取得的串流，附加到視訊元素上即可。

firefox:

element.mozSrcObject = stream; element.play();

webkit:

element.autoplay = true; element.src = webkitURL.createObjectURL(stream);

1. 若 joinRoom 負責傳送 socket.io 訊息至發訊伺服器，則一旦呼叫此 joinRoom，等於告知其所要連接的聊天室名稱。若聊天室不存在，則發訊伺服器將建立聊天室；若聊天室已存在，就會加入該聊天室。這裡我所說的「聊天室」，就是以聊天室名稱所聚集而成的特定 socket.io session ID。接著針對已連上聊天室的用戶端，我們即可廣播「加入/離開聊天室」的相關訊息。
2. 在我們等其他人加入聊天室的時候，還可以順便玩一下 @fritzy 所撰寫的好玩火箭遊戲：
3. 一旦有人加入這個聊天室，我們就會廣播告知其他已連線的使用者。而我們所建立的 Conversation 物件，其中將包含可連接雙方瀏覽器的 peerConnection。你可能已經猜到這個 peerConnection 所代表的，其實就是你和對方之間的連線。
4. 針對新的 socket.io session ID，signaling server 將廣播給聊天室中的所有使用者。而進入聊天室中的其他人，各使用者的用戶端另將建立 Conversation 物件。
5. 在此時，我們可以知道應連接哪位使用者，並可分別對他們的階段直接送出訊息。
6. 現在我們使用 peerConnection 建立 1 組「offer」，儲存我們本端的「offer」之後，再於我們的 peerConnection 中將之設定為本端描述 (Local description)；其中的資訊，將說明其他用戶端是如何找到並溝通我們的瀏覽器。
7. 只要用戶端接收到，且我們將「offer」新增至我們的 peerConnection 之後：

   就會呼叫 peerConnection.createAnswer() 而產生 1 組應答，接著再將應答送回用戶端 (此用戶端為我們所取得「offer」的源頭)。

11. 收到應答之後，我們將之設定為遠端描述 (Remote description)。接著再以類似方式建立/傳送 ICE Candidates。如此將會交涉 (Negotiate) 連線並連上我們。
12. 如果這些過程順利，我們就會收到 peerConnection 所發出的 onaddstream 事件，接著即可建立視訊元素並附加上串流。此時應已開始執行視訊呼叫。

若要再進一步了解，可至 SimpleWebRTC project，針對 github 發出 Pull request 與檔案問題。

未來展望

這些不過是剛開始。幫我們一起改善這個程式吧！

我們希望看到更多的可能：

1. 往後能標準化所有發訊部位。一旦建立了標準，往後大家只要更改某些必要的部份，整體都不會有太大的問題。
2. 新支援視訊與音訊的暫停/恢復功能。
3. 讓大家知道目前正在發言的人，且一旦換人發言，即可發出事件以通知聊天室中的其他人。
4. 能更妥善控制後續需求的處理 (Handling)/拒絕 (Rejecting) 作業。
5. 以 HTML5 的連線 API 為基礎，設定最大連線數。

如果你針對這個程式做出有趣的東西、遇上任何問題，甚或想和我討論，都可以到我的 Twitter (@henrikjoreteg) 上敲我。我隨時都很樂意聽到任何訊息。

讓我們這些熱心的網民們，繼續提供有趣的網路小工具吧！

英文原文: https://hacks.mozilla.org/2013/03/making-webrtc-simple-with-conversat-io/

—

作者介紹：

Henrik Joreteg 是 &yet 的合作夥伴，已經用十幾種方法撰寫了幾十種即時 App。他在 &yet 上主持 And Bang，針對 JavaScript 與 HTML5 應用提供相關的諮詢和訓練服務。

Robert 身為 Mozilla 的技術傳教士，並負責編輯 Mozilla Hacks 內的文章。