一、前言
WebRTC – 是 「Web Real-Time Communication」 的縮寫，是用於瀏覽器進行實時對話交流的 API ，但是如果直接用 WebRTC 原生的 API 工作的話，有很多複雜的工作要自己來，因此也有高手開發 WebRTC 相關的 Library ，而本次要介紹的就是 Temasys 公司的 SkylinkJS！
＊補充：simpleWebRTC – Library 之一
二、申請 App Key
Temasys 基本上就是一家提供網路通訊解決方案的一家公司，而 SkylinkJS 就是該公司開發的 Library ，背後當然也有使用自家的伺服器資源等等，所以我們在使用 SkylinkJS 之前，需要先到官方網站註冊帳號並申請 App Key ，不用擔心一開始就需要付錢，我們還是有免費方案可以玩一玩的！
第一步：申請帳號或登入

第二步：到 「My Apps」 頁面，點選 「Create App Key」

第三步：填入資料並送出

第四步：取得自己的 App Key

到這邊就完成第一步的準備工作了，讓我們開始使用 SkylinkJS 吧！
三、載入 SkylinkJS
其實可以用 npm 或 bower 來安裝，不過這邊方便起見，我們就用老套簡單的方法，直接在 HTML 的 head 載入 SkylinkJS 吧，以下是先準備好了 HTML 檔：
<html>
<head>
<title>玩轉 WebRTC - with SkylinkJS</title>
<!-- 載入 SkylinkJS -->
<script src="//cdn.temasys.com.sg/skylink/skylinkjs/0.6.x/skylink.complete.min.js"></script>
</head>
<body>
<!-- 用於顯示執行訊息 -->
<p id="status">讀取房間資訊中 ...請稍候</p>
<div id="startDiv">
<!-- 準備完畢，可以開始串流時顯示 -->
<button id="startBtn">Start</button>
<br/>
<!-- 建立 video 元素，準備放本地端影像 -->
<video id="selfVideo" autoplay muted></video>
</div>
<!-- 載入自己的 js 檔 -->
<script src='path/to/main.js' type='text/javascript'></script>
</body>
</html>
四、初始化
＊注意：以下程式碼會用到 jQuery 和 es2015
首先，我們要先新增一個 Skylink Object
let skylink = new Skylink()
把一開始的startDiv給隱藏起來，並為startBtn綁上click事件，最後，為了之後方便起見，先用 jQuery 把status先選取起來，方便以後顯示訊息。
$('#startDiv').hide();
$('#startBtn').on('click', function(event) {
$(this).hide();
/* 該 Button 會執行 start function */
/* 之後會定義 start function */
start();
});
let $status = $('#status');
五、串流本地端視訊
接著把我們本地端鏡頭的影像， attach 到我們一開始 HTML 的 video 元素。
/*
將本地端影像 attach 到對應的 video element
skylink 會聽取 mediaAccessSuccess 事件
使用者如果允許使用視訊攝影機將會觸發
*/
skylink.on('mediaAccessSuccess', function(stream) {
let $video = $('#selfVideo')[0]; //要選到我們一開始建立的 video 元素
attachMediaStream($video, stream);
});
六、串流遠端視訊
弄好本地端之後，就是準備遠端的串流了，我們要準備以下事件：
1. peerJoined – 遠端使用者加入時
2. incomingStream – 接收遠端影像資訊時
3. peerLeft – 遠端使用者離開時
//遠端使用者加入，建立video element給他
skylink.on('peerJoined', function(peerId, peerInfo, isSelf) {
if (isSelf) return;
let $video = $(`<video muted autoplay id='${peerId}'></video>`);
$('body').append($video);
});
//將video stream attach到正確的peer_id的video element上
skylink.on('incomingStream', function(peerId, stream, isSelf) {
if (isSelf) return;
let $video = $(`#${peerId}`)[0];
attachMediaStream($video, stream);
});
//遠端使用者離開，則銷毀該video element
skylink.on('peerLeft', function(peerId) {
let $video = $(`#${peerId}`)[0];
$video.remove();
});
以上程式碼，如果有遠端使用者加入，會自動在 <body> append 一個新的 video element 來顯示該遠端使用者的影像資訊。
＊補充：在寫這篇文章時，還沒完全了解 isSelf 的用意為何，推測可能是「如果偵測到已經有該 peer_id 的 video 元素存在，則不執行 append video element 的動作」。
七、skylink init
最後，我們需要設定 Room Id 和 App Key ， 同樣的 Room Id 才能夠看到彼此的影像，就像 Line 同一個群組才會看到互相的發言這樣， App Key 則是一開始我們申請的那一組字串。
skylink.init({
apiKey: APP_KEY, //填入自己的App Key
defaultRoom: 'Johlmike' //自己隨便建立一個 Room Id
}, function(error, success) {
if (error) {
$status.html(`載入房間資訊失敗<br>錯誤訊息: ${error.error.message || error.error}`);
} else {
$status.html(`房間資訊載入成功，可以開始進行通訊。`);
$('#startDiv').show();
}
});
八、開始串流
一切已經準備就緒了，就剩下最後的 start function ，我們要用這個 function 執行 skylink.joinRoom()。
function start() {
skylink.joinRoom({
audio: true,
video: true
}, function(error, success) {
if (error) {
$status.html(`加入房間失敗<br>錯誤訊息: '${error.error.message || error.error}`);
} else {
$status.html(`加入房間成功，房間ID：${ROOM_ID}`);
}
});
}
這邊啟動的話需要一個 Server 來開啟 index.html 檔，這邊就不多加贅述，如果有需要協助可以在留言處提問喔！
一切順利的話，一打開網頁應該會看到這個畫面：

按下 Start 之後，就大功告成啦！！！

之後只要開新的分頁，就會自動像下圖這樣，增加其他人的影像喔！之後只要能夠放上線就能建立一個私人聊天網路應用程式，感覺就超酷的，希望這篇文章能幫助到有興趣的朋友喔！

發佈留言