HTML5纯Web前端也能开发直播，不用开发服务器（使用face2face）
前段時(shí)間轉(zhuǎn)載了某位大神的一篇文章，開發(fā)Web版一對(duì)一遠(yuǎn)程直播教室只需30分鐘 - 使用face2face網(wǎng)絡(luò)教室。非常有意思。看起來非常簡(jiǎn)單，但作為一名前端開發(fā)人員來說，還是有難度。因?yàn)橐_發(fā)服務(wù)器端的接口，這對(duì)我這種前端初學(xué)者來說就無能為力了。
無意中注意到，在face2face的官方文檔上，其實(shí)還介紹了一種純前端的開發(fā)方式，使用這種方式，不用寫任何服務(wù)器代碼，也能做直播。
face2face的文檔在這里：http://face2face.net.cn/help/1710.htm 。
下面我就介紹一下是如何用HTML5純Web前端開發(fā)直播的。
?
首先進(jìn)入face2face的官網(wǎng)，登錄后（不用注冊(cè)也行，用QQ登錄就行了），點(diǎn)擊頂部的“1對(duì)1教室”，然后創(chuàng)建一個(gè)教室（因?yàn)閒ace2face是專門做直播教室的，所以是“創(chuàng)建教室”）。創(chuàng)建完成后，會(huì)提示繼續(xù)為教室添加學(xué)員，可以不用理會(huì)，直接跳過就行了。
可以將一個(gè)教室當(dāng)成是一個(gè)直播間。
記住創(chuàng)建的教室的“教室編號(hào)”，在后面開發(fā)時(shí)有用。然后點(diǎn)擊“排課”，就是設(shè)置用戶什么時(shí)候可以進(jìn)入這個(gè)直播間。
在排課時(shí)設(shè)置一個(gè)時(shí)間，為了方便測(cè)試，這個(gè)時(shí)間不要設(shè)置得太遠(yuǎn)了，最好是在當(dāng)前時(shí)間附近。
排課完成后，會(huì)在頁面中顯示剛剛創(chuàng)建的排課，有一個(gè)“通行證”，記住它，在后面開發(fā)時(shí)有用。
準(zhǔn)備工作完畢了，可以開始開發(fā)自己的網(wǎng)頁了。
<!DOCTYPE html> <html> <head><meta charset="utf-8" /><title>HTML5純Web前端開發(fā)直播</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">進(jìn)入</button></div></div><div id="room"></div> </body> </html>在上面的代碼中，start是用戶打開網(wǎng)頁后見到的內(nèi)容，提示用戶輸入用戶ID和通行證。room是用來放直播間的，剛開始是隱藏的，當(dāng)用戶輸入完成，并點(diǎn)擊“進(jìn)入”后，才將它顯示出來。
頁面運(yùn)行后是這樣子的：
然后在頁面中引入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>這樣就算開發(fā)完畢了，哈哈，非常簡(jiǎn)單。
下面對(duì)上面的代碼解釋一下。
當(dāng)用戶點(diǎn)擊enter后，先判斷用戶是否有輸入用戶ID和通行證，并且在這里我限制了用戶ID只能是1或者2。
如果用戶輸入的數(shù)據(jù)正確，就將start隱藏，同時(shí)將room顯示出來。
然后再調(diào)用$F.open.init初始化直播間。
它的幾個(gè)參數(shù)中，container 是用來放直播間的DOM元素，我用的是room。
ty 在這里必須傳3，因?yàn)槲覄倓?chuàng)建的教室是1對(duì)1教室，它就必須是3。
appid 是剛剛創(chuàng)建的教室的“教室編號(hào)”。
pass 是用戶輸入的通行證，就是前面為教室創(chuàng)建排課后得到的通行證。
uid 也是用戶輸入的用戶ID，我這里限制了只能是1或者2。
ismaster 的值要么是1，要么是0，如果是1，表示這個(gè)用戶是這個(gè)直播間的老師。在face2face的官方文檔中，要求每個(gè)直播間必須有一個(gè)老師，并且只能有一個(gè)老師。在我的代碼中，將用戶ID是1的用戶當(dāng)作老師。
vdo 我這里傳的是0，表示用戶進(jìn)入直播間后默認(rèn)分享電腦屏幕。這里的值還可以是1，表示用戶進(jìn)入直播間后默認(rèn)分享攝像頭。
運(yùn)行后，在用戶ID中輸入1，在通行證中輸入之前創(chuàng)建的排課的通行證，點(diǎn)擊enter按鈕后，頁面將會(huì)是這樣子的：
轉(zhuǎn)載于:https://www.cnblogs.com/mafengzi/p/10513987.html
總結(jié)
以上是生活随笔為你收集整理的HTML5纯Web前端也能开发直播，不用开发服务器（使用face2face）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python基础 协程
- 下一篇： (前端)html与css，css 4 、