转载自:https://blog.csdn.net/wo_shi_ma_nong/article/details/87881785
公司将从线下培训转为线上培训,要开发网络教室。以前没接触过这方面的技术,折腾了很久终于搞定。现将折腾的过程记录下来,备忘,同时也给路过的网友提供一下参考,少走点弯路。
既然是网络教室嘛,需求就是能直播上课,因为公司是做编程培训的,因此需要老师在上课的过程中向学生分享电脑屏幕,而不是摄像头,后来老板又要求不仅能分享电脑桌面,还能在上课的过程中在电脑桌面和摄像头之间随时切换。
接到任务后,首先当然想到的是有没有现成可用的服务。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):
token当然不能永远有效,不然容易被人滥用。设个timer每1分钟检查一次,将超过1个小时的token从内存中移除。
生成token的方式有了,接下来写验证token的verify接口,就是前面配置的verifyUrl。它需要返回JSON格式的数据。
在这里我偷了个懒,不管token验证是否正确,只要这个用户不能进入教室,就返回空的JSON。只有判断用户能进入这个教室后,才返回相关的数据。
OK,后台开发完毕,接着开发前端。
前端比较简单,只需给给网络教室一个容器,然后调用一个官方提供的js方法即可。
在做好页面布局后,引入官方的一个js文件:open.js,然后调用 $F.open.init 方法。
其中,container 是呈现教室的容器。这个容器要大一点,不然直播时视频太小。appid 是教室编号。ty 值写1即可,表示是要呈现网络教室。token 就是用户登录后在服务器端生成的用户标识,用来做身份验证用的。redirect 是当用户从教室退出后跳转到的页面。
我在 redirect 这个页面中写了以下 js 代码:
然后在教室页面定义这个 exited 方法:
以上只是一个示例,你当然可以根据自己的逻辑在用户体验上写得更好一点。