在自己的网站中集成face2face网络教室

本帮助文档将引导你如何在自己的网站中集成face2face网络教室。

若在开发中遇到问题，可与在线客服（QQ：206892640）联系。

若你不想开发服务器端接口，可以试试纯前端的集成方案。

一、创建教室

在“网络教室”中创建一个教室。如图：

二、配置

点击“网络教室”中的“集成到自己的系统中”，进行相关的配置。

verifyUrl 是你自己的网站的接口的URL，此接口用来进行身份验证。至于此接口需要做哪些处理，在后面的文档中将会讲解到。

需要注意的是，verifyUrl 不可是你开发机上的URL，否则 face2face 将无法访问。它必须是一个外部可访问的地址。

配置好后记得点击页面底部的“确定”以保存。

三、开发verify接口

verify接口用来进行身份验证，face2face 通过此接口来判断用户是否是合法的、以及其它信息。该接口需要能通过在上面配置的 verifyUrl 来访问。

它需要能通过 GET 方式调用，并接收 query 参数，输出 JSON 格式的数据。

face2face在调用此接口时会在 query 中传递两个参数，一个是 token，另一个是 appid。这两个参数都是由您自己传递给 face2face 的。至于如何传递，在后面的文档中会讲解。

在此接口中需做如下处理：

验证 token 是否合法，以及该 token 对应的用户在当前时间点是否能进入 appid 对应的教室。

如果验证成功，需以 JSON 格式输出以下数据：

uid	字符串。token 对应的用户的ID，它在您的系统中必须是唯一的。
allow	整数。是否允许进入教室。1 表示允许，0 表示不允许。
[ ismaster ]	（可选）整数。如果 token 对应的用户是该教室的导师，则为 1。若不输出此值，则默认为 0。
[ vdo ]	（可选）整数。导师进入教室后默认分享的视频。0 表示电脑屏幕；1 表示摄像头；2 表示播放录制好的视频文件（录播）。默认为 0。
[ uname ]	（可选）字符串。token 对应的用户的用户名称。它将显示在导师端，以及聊天框内。
[ avatar ]	（可选）字符串。token 对应的用户的头像URL。

可参考以下代码实现。注意：以下代码仅做参考，您需根据自己项目的逻辑实现。

        public void ProcessRequest(HttpContext context)
        {
            String token = context.Request.QueryString.Get("token");
            String appid = context.Request.QueryString.Get("appid");

            // 验证 token，并依据 token 得到对应的用户的 uid、uname、avatar

            bool token_verified = true; // token验证正确

            String uid = "";
            String uname = "";
            String avatar = "";
            bool allow = false;
            bool ismaster = false;

            if (token_verified)
            {
                // 依据token得到对应的用户的相关数据
                uid = "123";
                uname = "CYF";
                avatar = "http://xxx.com/123.jpg";

                // 判断 appid 对应的教室在当前时间点是否有课程，以及 token 对应的用户是否有上此课程的权限

                allow = true; // 允许进入

                // 判断 token 对应的用户是否是当前课程的导师

                ismaster = true; // token对应的用户是当前课程的导师
            }

            JsonData json = new JsonData();
            json.SetJsonType(JsonType.Object);
            
            // 如果 token 验证正确，并且允许进入appid对应的教室，则输出相关数据，否则输出一个空的JSON对象
            if (token_verified && allow)
            {
                json["uid"] = uid;
                json["uname"] = uname;
                json["avatar"] = avatar;
                json["allow"] = allow ? 1 : 0;
                json["ismaster"] = ismaster ? 1 : 0;
            }

            context.Response.ContentType = "text/plain";
            context.Response.Write(json.ToJSON());
        }

四、前端代码，在页面中放入 face2face 网络教室

在需要放入 face2face 网络教室的页面中引入以下 JS 文件：

https://face2face.net.cn/js/open.js

示例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>face2face test</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'), // 容器，网络教室将呈现在此Element中
            appid: 10, // 教室的编号
            ty: 1, // 网络教室此处为固定值 1
            token: '123', // 当前登录用户的身份认证标识，应该是由你自己的服务器生成的
            redirect: 'http://YOUR_DOMAIN/back.htm' // （可选）当用户退出教室后，跳转到处页面。如果不设置此值，则跳转到默认页
        });
    </script>
</body>
</html>

在引用了 open.js 文件后，调用 $F.open.init 初始化教室。

请留意上面的示例中 $F.open.init 方法每个参数后面的注释。

container 生成的网络教室将呈现在此元素内。不可是 jquery 对象，如果你用 jquery 取元素，则应该这样传给它： container: $('#divRoom')[0]。

appid 是你创建的教室的编号。

ty 值不用改动，直接传 1 即可，表示这是网络教室，而不是会议室。

token 应该是由你自己的服务器生成的一个能验证用户身份的字符串。face2face的服务器会将此值通过你配置的 verifyUrl 传递给你的服务器去验证。

小技巧：生成 token 的方式有很多，例如，可以将用户ID、时间戳、再加一个自定义的字符串，按一定的格式加在一起加密。

验证 token 时，用相同的方式解密，对比各个数据是否能对应上，比如自定义的字符串是否能对应上，以及时间戳是否在时效内（比如你可以认为超过10分钟失效）。

另外，你还可以为 token 设置一个对应的对象，将其存在全局内存或数据库中，验证 token 时，将其与内存或数据库中的数据进行对比。

redirect 是可选的，它是一个网页的URL。当用户在教室内点击“退出”，将会跳转到此 URL。如果不传此参数，将会跳转到 face2face 设定的默认页。

小技巧：将 redirect 设为你的网站同域下的一个网页的URL，然后在此网页中调用 parent 页中的某个方法，以处理用户退出教室后需要做的事。

另外，网络教室需要有较大的呈现空间，如果空间太小的话，将会导致视频太小，影响用户体验。

在上面的示例中，将容器 container 用 css 设为占据了整个网页。在你自己的网页中，也应该让容器占据尽可能大的区域，以给用户更好的体验。

网络教室的最小宽度为 600px，最小高度为 550px，如果容器小于此尺寸的话，将会被遮挡住一部分。

注意：如果部署到外网，您的网页需用 https:// 打开，因为某些浏览器有此安全限制。在本地开发中无此限制。

因为face2face网页版使用了较新的网页技术，所以不支持在较陈旧的浏览器上运行。当用户进入你的网页时，你应该先检查用户的浏览器的版本是否太低，这样能给用户较好的体验。

open.js提供了一个名为checkBrowser的方法，可以用来检查浏览器是否能支持face2face网页版。

var obj = $F.open.checkBrowser();
if(obj === true){
    alert('支持');
}else{
    alert('浏览器版本太低。chrome下载地址：' + obj.chrome + '；firefox下载地址：' + obj.firefox);
}

如上例所示，如果浏览器支持face2face网页版，$F.open.checkBrowser将返回true，否则返回一个object。

若返回了object，则其中chrome的值是chrome的下载地址，firefox的值是firefox的下载地址。