纯前端集成方案
不想开发服务器接口？
那么可以试试face2face提供的纯前端集成方案，只使用前端代码在自己的网站中集成face2face网络教室（一对多）、face2face一对一直播教室。
请注意：在较复杂的应用场景中，推荐使用“前后端结合”的集成方案，采用“前后端结合”的方案能使您的系统获得更大的控制权。实现方式请参考以下文档：
但若您的系统的应用场景没那么复杂，或不想开发服务器接口的话，那么使用“纯前端”的方案也是一种非常好的选择。并且，使用“纯前端”的集成方案能使您的开发量更少、也更简单。
该文档即适用于face2face网络教室（一对多），也适用于face2face一对一教室。
第一步：创建教室
登入face2face后，创建一个教室，根据你自己的需求选择创建“网络教室”或“1对1教室”。
创建完成后，系统会提示是否继续对教室的学员进行管理，可以不用理会，跳过即可。某个用户是否能进入您创建的教室，由您自己的前端代码来控制。
使用“纯前端”的方式，不用像使用“前后端结合”的方式那样配置verifyUrl。
第二步：给教室排课
排课完成后，每个排课都有一个“通行证”。
至此，你需要记下教室的“教室编号”，以及排课的“通行证”，在后面的开发中会用到它们。
做好以上操作后，退出登录，开始为自己的网站开发前端代码。
第三步：开发前端，将face2face教室集成到你自己的网站中
根据你自己的需要做好前端的布局，其中需有个元素用来呈放“教室”，这个元素的空间应该尽可能大一点，以给用户更好的体验。face2face教室将占据这个元素的整个空间。
在页面中引入官方提供的 open.js 文件：
https://face2face.net.cn/js/open.js
然后调用 $F.open.init 方法初始化教室。
具体实现方式请参考以下示例（以下示例的文件名设为了a.htm，你当然可以随意命名它）：
/a.htm
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>face2face一对一教室测试，纯Web前端实现</title>
<style type="text/css">
html, body {
width:100%;
height:100%;
margin:0px;
padding:0px;
overflow:hidden;
}
#divRoom {
width:100%;
height:100%;
display:none;
}
</style>
</head>
<body>
<div id="divStart">
appid:
<input id="txtAppId"/><br/>
pass:
<input id="txtPass"/><br/>
uid:
<input id="txtUid"/><br/>
uname:
<input id="txtUName"/><br/>
ismaster:
<select id="selIsMaster">
<option value="0">No</option>
<option value="1">Yes</option>
</select>
<br/>
vdo:
<select id="selVdo">
<option value="0">Screen</option>
<option value="1">Camara</option>
</select>
<br/>
<button id="btnEnter">Enter</button>
</div>
<div id="divRoom"></div>
<script type="text/javascript" src="/js/open.js?t=500"></script>
<script type="text/javascript">
document.getElementById('btnEnter').addEventListener('click', function () {
var appid = document.getElementById('txtAppId').value,
pass = document.getElementById('txtPass').value,
uid = document.getElementById('txtUid').value,
uname = document.getElementById('txtUName').value,
ismaster = document.getElementById('selIsMaster').value,
vdo = document.getElementById('selVdo').value;
if (appid && pass && uid && uname) {
document.getElementById('divStart').style.display = 'none';
document.getElementById('divRoom').style.display = 'block';
$F.open.init({
container: document.getElementById('divRoom'), // 呈现face2face教室的容器
ty: 3, // 1表示一对多网络教室；3表示一对一教室；
appid: appid, // 你创建的教室的编号
pass: pass, // 你为教室创建的“排课”的“通行证”
uid: uid, // 进入教室的用户ID，由你自己设定，建议用数字表示
uname: uname, // 进入教室的用户的名字
ismaster: ismaster, // 是否是该教室的老师。1表示是；0表示不是
vdo: vdo // 用户进入教室后默认分享的视频。0表示电脑屏幕；1表示摄像头；
});
}
}, false);
document.getElementById('btnEnter').click();
</script>
</body>
</html>
注意 $F.open.init 的参数：
container: 用来呈现face2face教室的容器。
ty: 1表示这是“一对多网络教室”；3表示这是“1对1教室”；
appid: 教室的编号。
pass: 你为教室创建的“排课”的“通行证”。
uid: 进入教室的用户的ID，由你自己指定。建议是一个数字。
uname: 进入教室的用户的名称，由你自己指定。
ismaster: 进入教室的用户是否是该教室的老师。由你自己指定。0表示不是；1表示是。进入教室的所有用户中，必须有一个、且只能有一个是老师。
vdo: 用户进入教室后，默认分享的视频。0表示电脑屏幕；1表示摄像头。如果是“一对多网络教室”，该值还可以是2，表示要求老师播放视频文件。
以上示例运行后是这样子的：
在页面的 appid 中输入你创建的教室的教室编号。pass中输入你为教室创建的“排课”的“通行证”。uid中输入任意一个数字，比如“100”。uname中输入用户的名字，比如“我是100”。ismaster选择“Yes”，表示这是教室的老师。vdo选择screen，表示进入教室后默认分享电脑屏幕。
当然，在实际开发中，你可以根据实际情况用代码来设置以上的部分配置、或所有配置。
点击页面中的“Enter”，如果一切正常的话，face2face教室将会呈现在你的页面中：
接着再用另一个浏览器模拟另一个用户打开此网页，假如你刚才用的是Chrome，那么就改用Firefox打开此网页。（你不可能在同一个浏览器上登录两个用户吧？）。输入、选择各项，uid和uname输入与刚才不相同的值，比如“100”、“我是100”，ismaster选择“No”，因为刚才进入的那个用户已经被设置为“老师”了，也可以尝试将vdo设置为“Camara”，即让这个用户分享摄像头，点击“Enter”进入。稍等一会后，两个浏览器就能相互看到对方了。
如果条件许可，你可以在两台不同的电脑上做以上测试，这样效果会更好一点。
小技巧
如果你希望监控用户从教室内退出的行为，可以给 $F.open.init 方法配置 redirect 参数：
$F.open.init({
container: document.getElementById('divRoom'), // 呈现face2face教室的容器
ty: 3, // 1表示一对多网络教室；3表示一对一教室；
appid: appid, // 你创建的教室的编号
pass: pass, // 你为教室创建的“排课”的“通行证”
uid: uid, // 进入教室的用户ID，由你自己设定，建议用数字表示
uname: uname, // 进入教室的用户的名字
ismaster: ismaster, // 是否是该教室的老师。1表示是；0表示不是
vdo: vdo, // 用户进入教室后默认分享的视频。0表示电脑屏幕；1表示摄像头；
redirect: 'http://YOUR_DOMAIN/face2face_back.htm' // 用户从教室内退出后跳转到的页面
});
redirect参数的值应该设置为你的网站中的一个网页的URL。在此网页中加入以下javascript代码：
<script>
window.opener.exited();
</script>
这段代码调用了呈现教室的网页中的 exited 方法。
接着在呈现教室的网页（a.htm）中定义 exited 方法：
<script>
var exited = function(){
document.getElementById('divStart').style.display = 'block';
document.getElementById('divRoom').style.display = 'none';
alert('从教室退出了');
};
</script>
其它
你可能已经注意到了，使用“纯前端”的集成方案，需要在face2face平台上为教室创建一个“排课”，获得了“排课”的“通行证”后才可使用。在逻辑较复杂的应用场景中，这样的形式可能并不太适用。在较复杂的应用场景中，官方推荐的集成方案是“前后端结合”的方式，“前后端结合”的方案能使你更方便地对教室进行控制。
注意：如果部署到外网，您的网页需用 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的下载地址。