转载自:https://blog.csdn.net/wo_shi_ma_nong/article/details/88110111

在“为网站开发远程直播教室的折腾过程及最终实现”中,介绍了如何使用face2face为自己的网站开发一对多网络教室。使用face2face能极大的节省开发的时间。

其实使用face2face不仅能在网页上实现一对多的网络教室,还能非常容易地为自己的网站实现1对1的远程直播功能

使用face2face,无论是开发一对多的网络教室,还是开发一对一的网络教室,都是一样简单,并且开发的方法几乎是完全一样的。

从零开始,开发一个Web版的1对1远程直播教室只需要30分钟!是的,就是这么简单!就是这么Easy!当然,首先你得有一个自己的网站。

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

步骤一:创建一个1对1教室

打开face2face的官网,登入后,点击顶部的“1对1教室”。

在打开的页面中点击“创建教室”,完成教室的创建。

创建完成后,会提示继续进行学员管理。可以不用理会,点击“以后再说”就行了,因为我们是要将face2face集成到自己的网站中,哪些学员可以使用这个教室当然是由我们自己的系统来决定。

新创建的教室会显示在网页上,每个教室都有一个“教室编号”,记住它,后面会用到。

步骤二:为将face2face集成到自己的网站中做配置

点击页面左上角的“集成到自己的系统中”,为将face2face集成到自己的网站中做准备。

在这里只有一个配置项:verifyUrl。

verifyUrl应该是你自己的网站对外提供的一个接口(API)的URL,它用来对用户的身份进行验证。至于这个接口如何开发、需要做哪些事情,在后面再做介绍,这里先将这个接口的URL地址配置在这里,比如:http://YOUR_DOMAIN/verify。 点击页面底部的“确定”以保存配置。

此URL必须是一个外部可访问的地址,不能是你本地开发用的localhost地址。

步骤三:开发verify接口

这个接口需要能通过上面配置的verifyUrl来访问。并且需要部署到外网才可使用。

这个接口是用来验证用户身份的,以及判断某个用户是否有权限进入某个教室。它必须能通过GET方式访问。

我们当然不希望任何用户在任何时候都可以进入任何教室,这就乱套了,当然是需要我们的系统认可的用户才可进入某个教室。

这个接口会接收到两个参数:token、appid。

这两个参数都是由你自己传递给face2face,再由face2face通过verify接口传递给你进行验证的。其中,token是你的系统为每个登录用户提供的身份验证标识,appid就是你创建的教室的教室编号。至于是如何将这些数据传递给face2face的,在后面会讲解到。

这个接口主要做两个方面的验证:一、验证token是否正确;二、验证token对应的用户是否可进入appid对应的教室。

本文档以nodejs的实现为例子,如果你使用的是其它的开发语言,实现逻辑也是一样的。

router.get('/verify', function(req, res){
    var token = req.query.token,
        appid = req.query.appid;

    // verifyToken方法用来验证token是否正确,
    // 如果正确,就返回token对应的用户的相关信息,包含uid、nickname、face
    // 如果不正确,则返回undefined
    var tokenObj = verifyToken(token);

    if(tokenObj){
        // isTeacherOrStudent方法用来判断token对应的用户是否是appid这个教室的老师或学生
        isTeacherOrStudent(appid, tokenObj.uid, function(yes, isTeacher){
            if(yes){
                res.send({
                    allow: 1, // 1表示允许进入
                    uid: tokenObj.uid, // token对应的用户的用户ID
                    uname: tokenObj.nickname, // token对应的用户的昵称
                    avatar: tokenObj.avatar, // token对应的用户的头像的URL
                    ismaster: isTeacher ? 1 : 0, // 如果token对应的用户是appid这个教室的老师,则为1,若是学生,则为0
                    vdo: 0 // 进入教室后默认分享的视频,0表示电脑屏幕,1表示摄像头
                });
            }else{
                res.send({});
            }
        });
    }else{
        res.send({});
    }
});

若token验证失败,或不允许进入这个教室,则直播返回一个空的JSON对象即可。否则返回allow、uname、ismaster、等数据。留意代码中的注释。

其中,allow为1表示允许进入教室。ismaster为1表示token对应的用户是这个教室的老师。vdo为0表示进入教室后默认分享电脑屏幕。

当然,我代码中的verifyTokenisTeacherOrStudent这两个方法你需要根据自己的逻辑去实现。

为了测试方便,可先将此接口部署到服务器。

步骤四:开发前端,将face2face一对一教室放入网页中

在需要呈现face2face一对一教室的网页中引入face2face官方提供的open.js文件:
https://face2face.net.cn/js/open.js

在我的示例中,我准备用ID为divRoom的DIV来呈现教室。我将它用CSS设置为占满整个窗口,因为是做直播教室,空间大一点会使用户的体验好一点。

<!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;
        }
        #divRoom {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="divRoom"></div>
    <script type="text/javascript" src="https://face2face.net.cn/js/open.js"></script>
    <script type="text/javascript">
    $F.open.init({
        container: document.getElementById('divRoom'),
        appid: 10, // 教室编号
        ty: 3, // 3表示这是1对1教室
        token: 'EsImV4cCI6MTU3ODM5MzA5MS44OTl9', // 由你的服务器为当前登录用户生成的身份验证标识
        redirect: 'http://XXX.com/f2fback.htm' // 用户从教室退出后需要跳转到的网页的URL,可以不设置
    });
    </script>
</body>
</html>

然后调用 $F.open.init 方法初始化教室,这方法是由 open.js 提供的。

它需要提供几个参数,其中,container是用来呈现教室的元素。appid是你创建的教室的编号。ty值传3即可,表示这是1对1教室。redirect是当用户从教室退出后应该跳转到的页面的URL,可以不传。

token是由你的服务器为每个登录用户生成的身份验证标识。face2face会调用你的verify接口将这个tokenappid传递给你的服务器进行验证。

步骤五:运行示例

开发完成,运行后是这样子的:

需要注意的是,如果部署到外网,这个网页需要使用 https 访问,这是浏览器的安全限制。

小技巧

在上面的 $F.open.init 方法中,参数 redirect 虽然是可选的,但建议传递,可通过它来监控用户退出教室的行为。

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

    // 调用父窗口的 exited 方法
    window.opener.exited();

然后在呈现教室的页面定义这个 exited 方法:

    window.exited = function(){
        alert('已从教室退出');
    };

看,是不是很简单?

是不是只花了30分钟?
与使用黄易和鹅厂等提供的直播服务相比,使用face2face的开发量要少得多。
黄易和鹅厂提供的直播服务,仅提供了基本的服务接口,其它所有的逻辑都需要自己实现,单就前端直播间的布局就要花不少时间,更何况还有大量的后端代码呢?
当然,各有各的优势和劣势。使用face2face虽然几乎没什么开发量,但是对直播间的样式的控制是有限的。但若使用黄易或鹅厂提供的直播服务,则能完全控制前端的样式。
另外还需要考虑的一点是,使用黄易和鹅厂的直播服务,一年随随便便就能花掉你几十万大洋,但若是集成face2face的网络教室,最低每年才几百大洋,完全不在一个层次。

本文转载自:http://www.nooong.com/docs/face2face_classroom_1v1.htm
本人在转载时对文章内容做了小小修改。

开发Web版一对一远程直播教室只需30分钟 - 使用face2face网络教室的更多相关文章

  1. 只需2分钟!PC端的报表即可转换成手机报表

    转: 只需2分钟!PC端的报表即可转换成手机报表 手机制作报表,这个大家不知有没有尝试过,虽然我们平时都用电脑做,但是电脑要是不在身边了,手机就可以用来应应急.但其实小编并没有在手机上制作报表的实践经 ...

  2. 基于easyui开发Web版Activiti流程定制器详解(五)——Draw2d详解(一)

    背景: 小弟工作已有十年有余,期间接触了不少工作流产品,个人比较喜欢的还是JBPM,因为出自名门Jboss所以备受推崇,但是现在JBPM版本已经与自己当年使用的版本(3.X)大相径庭,想升级也不太容易 ...

  3. 只需2分钟,简单构建velocity web项目

    Velocity是一个基于java的模板引擎(template engine).它允许任何人仅仅简单的使用模板语言(template language)来引用由java代码定义的对象 velocity ...

  4. js只需5分钟创建一个跨三大平台纯原生APP

    DeviceOne之前介绍过了,现在来介绍一下DeviceOne快速开发到什么程度 使用js只需要5分钟就可以打出垮Android.ios.windows三大平台的纯原生UI的安装包. 只需要6个小时 ...

  5. Spring Boot 学习系列(01)—从0到1,只需两分钟

    此文已由作者易国强授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 快速构建 如果我们想基于spring mvc 提供一个简单的API查询服务,传统的方式,首先需要我们引入sp ...

  6. 中小企业自建云WAF有多难?只需20分钟!而且:全程免费!

    以往,运营型的web为了安全目的,才使用WAF进行安全防护. 而现如今,WAF对企业web来说,已然成了刚需.为何?等保.网络安全法的硬性要求! 当然,这样要求显然是对的:没有网络安全,就没有国家安全 ...

  7. 基于easyui开发Web版Activiti流程定制器详解(四)——页面结构(下)

    题外话: 这两天周末在家陪老婆和儿子没上来更新请大家见谅!上一篇介绍了调色板和画布区的页面结构,这篇讲解一下属性区的结构也是定制器最重要的一个页面. 属性区整体页面结构如图:  在这个区域可以定义工作 ...

  8. 基于easyui开发Web版Activiti流程定制器详解(三)——页面结构(上)

    上一篇介绍了定制器相关的文件,这篇我们来看看整个定制器的界面部分,了解了页面结构有助于更好的理解定制器的实现,那么现在开始吧! 首先,我们来看看整体的结构: 整体结构比较简单,主要包括三个部分: 1. ...

  9. 【转】基于easyui开发Web版Activiti流程定制器详解(一)——目录结构

    题外话(可略过): 前一段时间(要是没记错的话应该是3个月以前)发布了一个更新版本,很多人说没有文档看着比较困难,所以打算拿点时间出来详细给大家讲解一下,由于本人平时要工作还要陪老婆和孩子而且还经营着 ...

随机推荐

  1. ubuntu16 下安装redis 以及设置其为开机启动

    1.下载redis安装包 sudo wget http://download.redis.io/releases/redis-3.2.6.tar.gz 2.解压 tar -zxvf  redis-3. ...

  2. Java容器之HashMap源码分析

    在java的容器框架中,hashMap是最常用的容器之一,下面我们就来深入了解下它的数据结构和实现原理 先看下HashMap的继承结构图 下面针对各个实现类的特点进行下说明:1)HashMap: 它是 ...

  3. 哪个HTML5内建对象用于在画布上绘制?()

    哪个HTML5内建对象用于在画布上绘制?() getContent getContext getGraphics getCanvas 我的理解: A.C.D不存在HTML5,,js方法中 HTML 5 ...

  4. sql查询学习和实践点滴积累

    https://blog.rjmetrics.com/2008/10/28/correlated-subqueries-in-mysql/ http://www.mysqltutorial.org/m ...

  5. Python 爬虫练习项目——异步加载爬取

    项目代码 from bs4 import BeautifulSoup import requests url_prefix = 'https://knewone.com/discover?page=' ...

  6. [翻译] AJProgressPanel

    AJProgressPanel Animated progress panel 可做动画的进度条 No images needed, all CoreGraphics code 不需要图片,使用Cor ...

  7. 点开无线显示"已连接 安全",但是点击下面无线图标却显示"无法连接internet",解决方案

    管理员权限运行“命令提示符” 输入:netsh winsock reset 然后重启电脑即可

  8. C++ 异常处理机制的实现

    http://blog.jobbole.com/103925/ 本文深入讨论了VC++编译器异常处理的实现机制.附件源代码包含了一个VC++的异常处理库. 下载源代码 – 19 Kb 介绍 相对于传统 ...

  9. 死磕salt系列-salt入门

    saltstack简介 SaltStack是一种新型的基础设施管理软件,简单易部署,可伸缩的足以管理成千上万的服务器,和足够快的速度控制,与他们交流,以毫秒为单位.SaltStack提供了一个动态基础 ...

  10. jq页面加载问题

    Window.onload=function(){ //页面加载,不能同时编写多个,最后面的会覆盖前面的 }   $(document).ready(function(){ //页面加载,能同时编写多 ...