HTML5純Web前端也能開發直播，不用開發服務器（使用face2face）
前段時間轉載了某位大神的一篇文章，開發Web版一對一遠程直播教室只需30分鐘 - 使用face2face網絡教室。非常有意思。看起來非常簡單，但作為一名前端開發人員來說，還是有難度。因為要開發服務器端的接口，這對我這種前端初學者來說就無能為力了。
無意中註意到，在face2face的官方文檔上，其實還介紹了一種純前端的開發方式，使用這種方式，不用寫任何服務器代碼，也能做直播。
face2face的文檔在這裏：http://face2face.net.cn/help/1710.htm 。
下面我就介紹一下是如何用HTML5純Web前端開發直播的。
首先進入face2face的官網，登錄後（不用註冊也行，用QQ登錄就行了），點擊頂部的“1對1教室”，然後創建一個教室（因為face2face是專門做直播教室的，所以是“創建教室”）。創建完成後，會提示繼續為教室添加學員，可以不用理會，直接跳過就行了。
可以將一個教室當成是一個直播間。
記住創建的教室的“教室編號”，在後面開發時有用。然後點擊“排課”，就是設置用戶什麽時候可以進入這個直播間。
在排課時設置一個時間，為了方便測試，這個時間不要設置得太遠了，最好是在當前時間附近。
排課完成後，會在頁面中顯示剛剛創建的排課，有一個“通行證”，記住它，在後面開發時有用。
準備工作完畢了，可以開始開發自己的網頁了。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HTML5純Web前端開發直播</title> <style type="text/css"> html, body { width:100%; height:100%; margin:0px; padding:0px; } #start { padding:50px 0px; text-align:center; } #room { width:100%; height:100%; display:none; } </style> </head> <body> <div id="start"> <div> 用戶ID：<input id="uid"/> </div> <div> 通行證：<input id="pass"/> </div> <div> <button id="enter">進入</button> </div> </div> <div id="room"></div> </body> </html>
在上面的代碼中，start是用戶打開網頁後見到的內容，提示用戶輸入用戶ID和通行證。room是用來放直播間的，剛開始是隱藏的，當用戶輸入完成，並點擊“進入”後，才將它顯示出來。
頁面運行後是這樣子的：
然後在頁面中引入face2face的open.js，並給enter按鈕添加click事件。
<script src="https://face2face.net.cn/js/open.js"></script> <script> document.getElementById(‘enter‘).addEventListener(‘click‘, function () { var div_start = document.getElementById(‘start‘), div_room = document.getElementById(‘room‘), txt_uid = document.getElementById(‘uid‘), txt_pass = document.getElementById(‘pass‘), uid = txt_uid.value, pass = txt_pass.value; if (uid && pass && (uid == 1 || uid == 2)) { div_start.style.display = ‘none‘; div_room.style.display = ‘block‘; $F.open.init({ container: div_room, ty: 3, appid: 10043, pass: pass, uid: uid, ismaster: uid == 1 ? 1 : 0, vdo: 0 }); } }, false); </script>
這樣就算開發完畢了，哈哈，非常簡單。
下面對上面的代碼解釋一下。
當用戶點擊enter後，先判斷用戶是否有輸入用戶ID和通行證，並且在這裏我限制了用戶ID只能是1或者2。
如果用戶輸入的數據正確，就將start隱藏，同時將room顯示出來。
然後再調用$F.open.init初始化直播間。
它的幾個參數中，container 是用來放直播間的DOM元素，我用的是room。
ty 在這裏必須傳3，因為我剛創建的教室是1對1教室，它就必須是3。
appid 是剛剛創建的教室的“教室編號”。
pass 是用戶輸入的通行證，就是前面為教室創建排課後得到的通行證。
uid 也是用戶輸入的用戶ID，我這裏限制了只能是1或者2。
ismaster 的值要麽是1，要麽是0，如果是1，表示這個用戶是這個直播間的老師。在face2face的官方文檔中，要求每個直播間必須有一個老師，並且只能有一個老師。在我的代碼中，將用戶ID是1的用戶當作老師。
vdo 我這裏傳的是0，表示用戶進入直播間後默認分享電腦屏幕。這裏的值還可以是1，表示用戶進入直播間後默認分享攝像頭。
運行後，在用戶ID中輸入1，在通行證中輸入之前創建的排課的通行證，點擊enter按鈕後，頁面將會是這樣子的：
HTML5純Web前端也能開發直播，不用開發服務器（使用face2face）