opentok-rtc javascript 启动流程及结构设计

  • 最开始启动于 :  rtcApp.js

用 LazyLoader 启动了  5个 js 文件 , 之后 调用 RTCApp.init()

其中  view.init();  是调用具体view的 init 函数 ,对于 room来说就是 :  roomController.js—–> init  函数。

 

在 roomController.js 的 init 函数 , 有

参数中  roomStatusHandlers 是:

 

 

调用的是 :  browser_utils.js 的 addEventsHandlers  函数 :

 

 

 

 

 

less 详解

  • how to compile

in opentok-rtc project ,  use grunt to compile less into css .

Grunt 是一个插件化的打包工具, 比如编译 less的插件就是  grunt-contrib-less,  安装方法是 :

安装之后还需要 Gruntfile.js 做配置文件 ,

Grunt的 get start 网址: https://gruntjs.com/getting-started

配置文件例子 : https://gruntjs.com/sample-gruntfile

从 opentok截取出来的一个简单的Gruntfile.js 例子 , 这里只用到了编译 less的插件

之后执行  grunt  clientBuild 即可把 less 文件 编译为 css ,clientBuild  是自定义的任务名


  • How to add bower lib

在 opentok-rtc项目中, 还包括了 bower lib的引用 ,

in Gruntfile.js , it figure out where to find source less  and where to store dest css  ,  by  :

  • use which less lib ?   in tokbox-rtc . it use bower lib

npm install bower –save

之后新建 bower.json

bower install

  • opentok-rtc  room page css 分析

a)

这个是 image  , 代码为:

以data 开头的是 html5 新增的自定义属性, 可以是 data-whatever ,  具体定义见 icons.less

b)

这个是相当于radio的按钮, 可通过点击 enable 或者 not ,   用 js 实现 ,给 click 事件加 eventlistener , 从而在 class 加 activate 或者 去掉 , 示例代码:

 

 

 

 

 

  • 参考文章 :

all  css selector explains

https://www.w3schools.com/cssref/css_selectors.asp


 

opentok-rtc修改后大致的功能和实现

1 : 用户可以用学生或者老师的身份登陆

a) 如果是老师 :  可以

进入自己发布过的session , 就是显示所有room

什么是自己的session ?

当用户以用户名登陆之后, 如果创建room, tokbox会在远端记录一个 session id , 但是不记录用户名,  所以, 将 session id 和 用户名连接起来是要实现的功能

不能把 session id 和用户名连一起, 因为tokbox网站明确说:

When possible, do not reuse session IDs between different video chat conversations. Instead, generate new session IDs for each distinct video chat on your application. 

所以, 要存的是 username 和 room number的对应关系 , 还有 room template 

存 username 和 room number的对应关系 , 用 

 

 

不对, 用 pushToKey , 因为 一个username可能有多个 room , 取时用 getKeyArray

但是 , archive 从属于 session ,  如果要列出room 的archive,只能用 session id 查 , room number 和 session id 的对应关系 ,存在于 redis数据库\

b) 如果是学生, 能看到自己所有订阅 的room

 


 

 

redis查key :

查 key的 value

 

upload , del  archive ,

invite student

enable or not student video or audio

share screen

white board

b)   如果是学生 ,  可以

看到一个 所有 teacher 的 列表页面, 并选择进入room ,  列表应表明此room的所有者是否正在线, 此room的当前在线人数 .

这就需要有一个函数能查询到所有的session ,以及session对应的room number,How To ?

 

github 其他的tokbox项目

https://github.com/opentok/opentok-node

如何用 node.js 写一个server , 包括如何创建 session , token ,  work with archive


https://github.com/opentok/opentok-web-samples

各种 web client sample, 包括angular js , vue 等


https://github.com/opentok/learning-opentok-node

学习如何用 node.js 写 server

 

 

tokbox session 讲解

From  https://tokbox.com/developer/guides/create-session/

 

session 可以理解为一个room , 测试账号创建的session 是否有限制 ?

没有限制,  但是在tokbox的设计, 每个人应该只有一个 session

session 并不过期 , 也不能被显式销毁

OpenTok sessions do not expire. However, authentication tokens do expire. Also note that sessions cannot explicitly be destroyed.

 

用户是否可以有多个session ?    No


archive 从属于 session ,


session 自带一些事件, 可以给这些事件设置回调, 比如统计room的在线人数

 


如果在 js 用 createSession 函数创建了session , 怎么取创建的session ID

 

 

room.ejs analyze

room.ejs 是 https://github.com/opentok/opentok-rtc

此项目最重要的一个页面, 涉及到全部的api  ,


  • 怎么实现的 点击 message 实现右边文本框的显隐

a) room.ejs 有

然后

roomView.js

这里应该着重理解 sendEvent这个函数,

当执行这句时:  Utils.sendEvent(‘roomView:chatVisibility’, visible);

 


CSS 部分

  • 怎么显示 icon   ,  room.ejs 有这样的片断

  • 这里的data-icon是 html5新增属性, data- attributes are attributes for private use. I.e., anybody can make up any data- attribute and do with it whatever he wants.

    也就是说, data- 后可以接自己定义的任何字符 , 参考文章:

https://johnresig.com/blog/html-5-data-attributes/

——-

in room.less :

 

in

 

 

tokbox webrtc analyze

  • login account :   mzcw2011@sina.cn
  • set tb_api_key 46419702
    set tb_api_secret b8f17a054ccde74e68453464ad6b1c879a75d030

 

  • http://lesscss.org/features/#detached-rulesets-feature — 教程

 

  • How to compile less to css , first use bower download third party component , then create own less which use above component , final use grunt compile it

  •  

     

first new a “bowe.json” file ,which content  is :

then ,  install and download bower

bower install mean install the package specified in bower.json , in this case , tokbox company use the package :

https://github.com/tef-components/

this package is a free less lib for button, theme, text-input , etc .


For how to learn less , see

https://www.tutorialspoint.com/less/nested_rules.htm

a beginner less introduce in Chinese :

https://www.tutorialspoint.com/less/nested_rules.htm

 

  • how to write rest server using swagger and node.js

a) first , how to do a simple node.js server

https://www.codementor.io/olatundegaruba/nodejs-restful-apis-in-10-minutes-q0sgsfhbd

更好的是直接去看 expressjs 的 hello world :  https://expressjs.com/en/starter/hello-world.html

b) opentok-rtc ‘s server is made by swager-boilerplate , which address is :

https://github.com/AntonioMA/swagger-boilerplate

In this site , it say : Simple implementation of a Node Express server described using a Swagger API, in JSON form.

how to make a Node Express server is in point a)

 for swagger , here is a introduce article :

https://mherman.org/blog/swagger-and-nodejs/

c)   swagger-boilerplate 用到了  .yml 文件作为 rest server api 定义文件 , yml 文件2个空格代表一个层级, 多个键值对用 – 分开 

swagger api 的在线编辑界面  http://editor.swagger.io/

如何做一个简单的 swagger api :  https://www.blazemeter.com/blog/create-your-first-openapi-definition-with-swagger-editor/

d) 怎么返回具体的页面

1)  可以在 expressjs 的js 文件 用  sendFile  返回  html , 但这里不是

2)  注意到 package.json 有   “ejs”: “^2.5.5”

3) 实际使用 的方法是 res.render(

4) how to use expressjs and ejs :

https://scotch.io/tutorials/use-ejs-to-template-your-node-application

here is a example : https://mherman.org/blog/swagger-and-nodejs/

  • How to debug node.js
  • JS 部分
  • How and where to connect redis ?

显示所有key    :


对某一个key取value

这里假定 邮箱是key , server 端口 6379


如何从 node.js 存到 redis server ?

在 serverMethods.js中, register的post方法 , 写:

server停止后 , redis 存进去的数据还在


删除


ServerPersistence 是这样被初始化的 :

 

SwaggerBP是从这里

var SwaggerBP = require(‘swagger-boilerplate’);


room 相关的 api 接口

getRoomArchive  ——– 得到room 的所有 archive ,  用 roomname 做参数

url 为 :   https://47.52.61.15:8123/room/111/archive

首先, archive存在哪里 ?

archive 可以被保存的前提是 :

Important: You can only archive sessions that use the OpenTok                                   Media Router (sessions with the media mode set to routed).

就是说只有特定类型的session, 它的archive 才可以被保存 。

如果配置了微软云或者亚马逊云, 会存到配置 ;  如果没有, 会存到 tokbox云, 只保存72小时 。

用户是否只能 record live stream as archive , 能不能上传录制好的视频

getroom 是建立一个临时的session , 以测试用户的音视频连接

getroominfo 是在 persistent store 查询房间号, 如果有, 进入

getUsableSessionInfo. 函数按房间号查询session, 如果没有, 创建新的

 

 

 

 

 

 

 

 

运行并修改 tokbox webrtc 例子程序

opentok 账号

mzcw2011@sina.cn

Passw0rd77#


api key   46419702

project secret :  b8f17a054ccde74e68453464ad6b1c879a75d030

 

环境  win10 64 位

  • dependence :

a)  node.js  ,   已安装 , 64位的

b) Redis

在这里下载 3.2.100 的 zip 版本 并启动 : https://github.com/microsoftarchive/redis/releases/tag/win-3.2.100

 

  • 下载并编译源程序 :

a) 从这里 clone : https://github.com/opentok/opentok-rtc

首先进入 config 文件夹,  修改 config-ci.json 为 :

 

这里的apikey和 apisecret改成自己的

b) 不知道是否还需要安装python, 好像是需要的,因为本机已有,未测试

c)  npm 安装package :     进入程序主目录执行

 

d) 启动服务端, 记得redis要先启动

而且,启动 redis server 之后, 再启动 redis-cli  , 并增加2个键

然后启动 server

 

——————   在 ubuntu 的安装

apt install git

git clone https://github.com/opentok/opentok-rtc.git

apt install nodejs

apt install redis-server

设置redis-server为服务 :

此后要注意 redis 的权限问题,  redis 服务的配置文件在    /etc/redis/redis.conf

其中写到 : pidfile /var/run/redis/redis-server.pid

 

新开一个 putty , 输入 :  redis-server

回到原来的putty ,   进入下载好的  opentok-rtc/config 目录 , 复制 example.json , 重命名为  config.json , 并编辑修改  key 和 secret ,改为自己的 ,

安装 npm

apt install npm

在 opentok-rtc 跟目录下, 执行 npm install

安装所有package 之后, 执行 node server 启动服务器

此时访问  ip:8123 应该可以看到页面了, 但是, 发现css没起作用 ,

a) 安装 less

apt install node-less

b) 安装 bower

执行  bower install –allow-root

c) 安装 grunt

sudo npm install -g grunt

此处要注意, 在 ali ubuntu主机, 如果 npm install grunt –save-dev  ,  会失败,不知道为什么

安装之后 , 在跟目录执行  grunt clientBuild   , 会把  less 生成对应的  css

 

  • 加载 screen-sharing extensions

第一步 , 修改  opentok-rtc-master\screen-sharing-extension-chrome\manifest.json 文件 的这一部分 , 改为 :

 

第二步, 进入 chrome://extensions/  ,  开 developer mode 开光, 选 左上角 load unpacked , 然后选中 整个  screen-sharing-extension-chrome 目录

 

第三步, 修改 服务器  /config/config.json 文件 , 将 screen – sharing 部分改为

 

chromeExtensionId 是客户端 加载 extension之后产生的, 也在 chrome:/extension能看到

最后启动服务, room 会多出一个 screen-share的选项 。