您的位置：首页 > 运维架构 > 网站架构

为网站开发远程直播教室的折腾过程及最终实现

2019-02-22 16:56 85 查看

公司将从线下培训转为线上培训，要开发网络教室。以前没接触过这方面的技术，折腾了很久终于搞定。现将折腾的过程记录下来，备忘，同时也给路过的网友提供一下参考，少走点弯路。

既然是网络教室嘛，需求就是能直播上课，因为公司是做编程培训的，因此需要老师在上课的过程中向学生分享电脑屏幕，而不是摄像头，后来老板又要求不仅能分享电脑桌面，还能在上课的过程中在电脑桌面和摄像头之间随时切换。

接到任务后，首先当然想到的是有没有现成可用的服务。Google来Google去，找到了几家提供直播服务的公司。

当然是从大牌开始试用。

首先选了大黄易提供的直播服务。懒得看官方文档，并且那文档写得也很枯涩难懂，直接找客服，客服给安排了一个负责市场的人，啥职位不记得了，暂且称之为市场经理吧。刚开始那市场经理说得很好，我们提的几点需求都说能支持。

OK，开始开发。刚开始没多久，才发现完全不是那么回事。原来大黄易提供的服务是需要在老师端安装一个推流工具的，这工具还得自己找，当然，黄易的客服给推荐了几个。而我们要的是网页版，若每个老师都需要再安装推流工具，还得自己去配置，那太麻烦了。与教学组的同事们沟通了一下，大家都不接受这种方式。放弃！

通过这次折腾得到一个教训，不要偷懒，不能太过于相信市场人员的话。还好这次折腾没花钱，只是浪费了一点时间。

然后又找到了鹅厂。这次吸取教训，事前做了详细的咨询，并详细读了他们的开发文档。当然，那文档实在是太枯涩难懂了，虽然硬着头皮啃了又啃，但还是云里雾里。只能怪自己水平太低吧。

鹅厂有很多种直播服务，实在不知道应该选哪一种。后来市场经理（同样不记得职务了，暂且这样称呼吧）给推荐了H5直播服务。然后那市场经理又拉了个鹅厂的技术人员建了一个群。感觉很好，心想这次应该没什么问题了。

不爽的是，使用鹅厂的服务一开始就要收费。可我们还在开发阶段啊，并且还不知道到底是否适用。然后那市场经理说可以申请试用，就是先试用，产生的费用到时用券来抵消。

OK，开始开发。可是，问题又来了。开发文档嘛，用过鹅厂服务的人应该都知道，没法看。只能一点一点向腾讯的技术人员请教。可鹅厂有那么多用户，他们的技术人员也忙不过来啊，因此遇到问题只能等待再等待。并且经常出现莫名其妙的bug。后来与鹅厂的那个技术人员用Q私聊的时候了解到，原来他们的那个H5直播服务还没正式推出，并且之前负责这个产品的技术人员离职了，现在这个是新加入的，很多问题他也要一点一点去摸索。天啊！原来是拿我们当小白鼠呢！

就这样折腾了大半个月，某天突然不能用了。经咨询，原来是欠费太多，不能用了。找市场经理，送了几张券，说是可以抵消费用。可在后台用券的时候，却提示不可用。再找市场经理，市场经理说了一堆理由，说是这个券不能用在这个服务中，只可用在指定的服务中，反正就是不能用。最后市场经理说先充值吧，以后再送券找补回来。

没办法，咱的开发不能停止不前啊。只能充了一千多大洋。就这样又折腾了差不多一个星期，又不能用了！还是欠费。再找市场经理，市场经理还是说没有办法，只能充值。这时老板不愿意了，老板说，这TMD产品还没上线呢，两千大洋就没了？

老板问我的意见。我想照这样开发，真不知何时才能开发完成，最终能不能完全满足我们的需求也很难说。于是放弃！

既然黄易和鹅厂这两个大厂的服务都无法满足要求（也可能是我们自己太菜），那还有什么服务可用呢？

再次四处搜寻。后来从一前同事那里听说了face2face网络教室。与客服联系，咨询了一下基本满足要求。开始开发。

也许是小厂的缘故吧，这次的市场经理帮助解决问题的速度要快多了。

用他们的服务有个好处是，需要自己开发的量很少，直接将他们的网络教室放到自己的网页上就行了。缺点是不能自定义直播间的样式。不过同时也算是省事了吧。

因为需要自己开发的量很少，不到一个星期就开发完成了。默认有几天的免费试用期，然后我找他们的市场经理，说我们的产品还在开发阶段呢，整个产品至少还需半年才能上线（这是大实话哦，没骗人~_^），于是又要了一个月的试用期。

好了，折腾的经过就是这样。接下来说说具体是如何在自己的网页中放置face2face网络教室的。

官方文档在这里：http://face2face.net.cn/help/1700.htm 。

首先需要在他们的首页登录后，点击“网络教室”，创建一个新教室。创建教室后，这个教室有一个“教室编号”，这个在后面的开发中要用到。

然后配置 verifyUrl，这个是自己网站提供的验证接口。face2face网络教室的服务器会调用此接口进行身份验证。点击“网络教室”左上角的“集成到自己的系统中”进行配置。不支持localhost地址哦，需要是一个能在外部访问的地址。

这个接口需要能用GET方式调用，接收两个参数，一个是token，一个是appid。token是自己的服务器生成的身份验证标识，appid就是教室的“教室编号”。

我们网站是用session登录的，因此还需要给每个登录用户生成一个token。我的做法比较简单。用户登录后，将uid与时间戳拼接起来，MD5加密得到token，再在内存中以token为键值保存用户的相关信息。

代码如下（我们用的nodejs）：

var TOKENS = {};

var genToken = function (uid) {
var now = Date.now();
var token = md5(uid + '_' + now); // 这个md5方法自己写哦，Google一下很多
TOKENS[token] = {
uid: uid,
date: now
};
return token;
};

token当然不能永远有效，不然容易被人滥用。设个timer每1分钟检查一次，将超过1个小时的token从内存中移除。

setInterval(function () {
var keys = Object.keys(TOKENS),
now = Date.now();
for (var i = 0; i < keys.length; i++) {
var key = keys[i],
obj = TOKENS[key];
if (now - obj.date > 3600000) {
delete TOKENS[key];
}
}
}, 60000);

生成token的方式有了，接下来写验证token的verify接口，就是前面配置的verifyUrl。它需要返回JSON格式的数据。

router.get('/verify', function (req, res) {
var token = req.query.token,
appid = req.query.appid;
var re = {};
if (token && appid) {
var obj = TOKENS[token];
if (obj) {
var uid = obj.uid;
var user = getUser(uid);// 取得用户相关的数据。这个方法是你由自己的系统提供的
var allow = checkApp(appid, uid);// 判断uid是否能在进入appid这个教室。这个方法的逻辑也是根据你自己的需求判断的
var ismaster = checkMaster(appid, uid);// 判断uid是否是appid这个教室的老师
if (allow) {
re.uid = uid;
re.uname = user.uname;
re.avatar = user.avatar;
re.allow = 1;
re.ismaster = ismaster ? 1 : 0;
re.vdo = 0; // 老师进入教室后默认分享电脑屏幕
res.send(re);
} else {
res.send(re);
}
} else {
res.send(re);
}
} else {
res.send(re);
}
});

在这里我偷了个懒，不管token验证是否正确，只要这个用户不能进入教室，就返回空的JSON。只有判断用户能进入这个教室后，才返回相关的数据。

OK，后台开发完毕，接着开发前端。

前端比较简单，只需给给网络教室一个容器，然后调用一个官方提供的js方法即可。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>face2face网络教室测试</title>
<style type="text/css">
html, body {
width:100%;
height:100%;
margin:0px;
padding:0px;
overflow:hidden;
}
.tit {
padding:8px;
background-color:black;
}
.tit a {
color:white;
margin:0px 10px;
}
#divRoom {
width:1200px;
height:700px;
}
</style>
</head>
<body>
<div class="tit">
<a href="/java">Java课程</a>
<a href="/csharp">C#课程</a>
<a href="/php">PHP课程</a>
</div>
<div id="divRoom"></div>
<script type="text/javascript" src="http://face2face.net.cn/js/open.js"></script>
<script type="text/javascript">
$F.open.init({
container: document.getElementById('divRoom'),
appid: 10,
ty: 1,
token: 'EsImV4cCI6MTU3ODM5MzA5MS44OTl9',
redirect: 'http://XXX.com/f2fback.htm'
});
</script>
</body>
</html>

在做好页面布局后，引入官方的一个js文件：open.js，然后调用

$F.open.init

方法。

其中，

container

是呈现教室的容器。这个容器要大一点，不然直播时视频太小。

appid

是教室编号。

ty

值写1即可，表示是要呈现网络教室。

token

就是用户登录后在服务器端生成的用户标识，用来做身份验证用的。

redirect

是当用户从教室退出后跳转到的页面。

我在 redirect 这个页面中写了以下 js 代码：

window.opener.exited();

然后在教室页面定义这个

exited

方法：

window.exited = function(){
document.getElementById('divRoom').style.display = 'none';
alert('已从教室退出');
};

以上只是一个示例，你当然可以根据自己的逻辑在用户体验上写得更好一点。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航