CSS 符号及解释

  • <section>:

和 div 一样, 逻辑上的分段, 可以为其定义 css ,例如

  • @media 代表网页如何适应不用的浏览器或者手机尺寸

w3schools 的例子:  Change the background color of the <body> element to “lightblue” when the browser window is 600px wide or less:


opentok-rtc 的例子:


  • 各种 div 的用法

a)   index.ejs 右边容器的css定义为 :

在 html 中 :

在 less


enterroom 按钮的定义

 

 

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  函数 :

 

 

 

 

 

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 ?

 

javascript 笔记

  •  reduce()       ES5 新增

 

  • promise  ES6 新增

 

  • 变量定义的非常灵活

a)

 


opentok-rtc 点击 enterroom 之后, 会转到这个网址

http://47.52.61.15:3000/room/11?userName=22

11是会议名, 22是用户名

 

javascript promise 详解

Promise is an object representing the eventual completion or failure of an asynchronous operation

promise 代表一个异步事件的完成或失败。


Essentially, a promise is a returned object to which you attach callbacks, instead of passing callbacks into a function.

本质上, promise 是一个 被返回的object ,  在这个object 内可以附加回调函数 ,以代替原来的在函数中指定回调函数 。


 

Imagine a function, createAudioFileAsync(), which asynchronously generates a sound file given a configuration record and two callback functions, one called if the audio file is successfully created, and the other called if an error occurs.

Here’s some code that uses createAudioFileAsync():

在原先的写法,  当调用一个异步函数的时候, 需要在参数位置指定它的回调函数, 比如异步生成一个语音文件时,指定它的成功和失败的回调 ,代码如下:

 


在现代的javascript 当中, 是返回一个promise

上一句代码是以下2句的简写形式:

 


.then 代表promise 确实返回了什么东西, 即使是 null ,

以 opentok-rtc 为例, 它从永久设备取数的方法是调用 swagger-boilerplate的 getKey 方法

在 swagger-boilerplate的 serverPersistence.js 文件

也就是说, 如果没有这个key , 返回 null , 但这并不会触发 promise 的 catch , 而是触发 resolve, 因为确实返回了什么


promise 和事件(event) 有点像, 但是, promise 只能成功或者失败一次, event可以发生多次。

A promise can only succeed or fail once. It cannot succeed or fail twice, neither can it switch from success to failure or vice versa.

If a promise has succeeded or failed and you later add a success/failure callback, the correct callback will be called, even though the event took place earlier.

promise 可以在发生之后很久被调用, event不可以


A promise can be:

  • fulfilled – The action relating to the promise succeeded
  • rejected – The action relating to the promise failed
  • pending – Hasn’t fulfilled or rejected yet
  • settled – Has fulfilled or rejected

promise可以有以上四种状态


如何处理 promise 的成功和失败


怎么理解这几句 :

变量= resolve是什么意思 ?


 

 

 

参考文章 :

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises   —– how to use promise


https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise    — introduce promise


 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve

专门讲  resolve

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 测试环境的搭建

注册账号 ,然后新建一个project , 这样就得到了 api key , 和 secret , 如图

  • 第二步,建server , 以 python 为例 :

sample 程序在  https://github.com/opentok/Opentok-Python-SDK

先建立一个 python 虚拟目录, 这样得到干净的初始环境 。

然后, 安装 flask 和 opentok 库:


安装完成后把例子程序的helloworld项目的 helloworld.py, 根据自己的情况修改为

然后在虚拟环境内执行 ,本机的虚拟环境目录在: F:\Programs\Python\py37virtualenvs\tokbox

如果能出现下图就说明服务启动成功了

有一个常见的错误就是: 当试图 create session时 , 出现

tokbox Failed to create session, invalid credentials 的错误, 这可能是因为测试机器时间和标准时间不一致 ,解决方法是:  setting–>datetime setting –>set time automatically on


成功启动服务后, http://127.0.0.1:5000

如果有摄像头, 就能看到图像。

服务启动后会在页面显示 sessionid 和 生成的  token

 


首先找出刚才建立的server 的 api_key , session_id 和 token  :

46419702

1_MX40NjQxOTcwMn5-MTU2ODI3MTIwOTMzNH5QcEY4aE0ra0owaC9DTTAzdnRoRTlxK2J-UH4

T1==cGFydG5lcl9pZD00NjQxOTcwMiZzaWc9ZDJmZmRmMGU1MmE4YjBkMmQyOTEzMjgzNDBmZjZjYzMwN2EwY2U0ZTpzZXNzaW9uX2lkPTFfTVg0ME5qUXhPVGN3TW41LU1UVTJPREkzTVRJd09UTXpOSDVRY0VZNGFFMHJhMG93YUM5RFRUQXpkblJvUlRseEsySi1VSDQmY3JlYXRlX3RpbWU9MTU2ODI3MjU4OCZleHBpcmVfdGltZT0xNTY4MzU4OTg4JnJvbGU9cHVibGlzaGVyJm5vbmNlPTIwNTQyNiZpbml0aWFsX2xheW91dF9jbGFzc19saXN0PQ==

打开例子程序的 Basic Video Chat 子项目

修改 /js/config.js , 把 api_key , session_id 和 token 等都修改为和之前服务器建立的一致 ,并且把 server_url 的那句注释掉:

 

然后打开  Basic Video Chat 的 index.html 程序, 就可以与服务器互通视频和语音。