跨平臺視訊通訊專案-OpenTok
1 理論知識
1.1 OpenTok平臺簡介
即時視訊通訊日益成為主流服務，通過WebRTC，開發者可以輕鬆地將即時視訊通訊功能加入到應用中。視訊聊天創業公司TokBox推出OpenTok，可實現瀏覽器與iOS裝置間跨平臺視訊聊天。
OpenTok平臺可以輕鬆實現以下功能：
- 高質量的互動視訊
- 訊息傳遞
- 螢幕分享
1.2 基本概念
1.2.1 客戶端SDK
一組可用於Web（JavaScript），IOS和Android的程式碼庫，用於設定客戶端（處理大多數OpenTok的功能能），功能包括
- 釋出會話中的流
- 訂閱會話中的流
- 監聽會話事件
1.2.2 伺服器SDK
伺服器SDK是部署於應用伺服器上，可以使用Node,PHP,Java,.NET,Python和Ruby語言分裝OpenTok REST API，為客戶端生成新的會話和令牌。
1.2.3 OpenTok REST API
HTTP介面，通過呼叫該介面可以呼叫OpenTok伺服器SDK的許多方法，其餘建立會話和處理高階功能需要由OpenTok Cloud來完成，如歸檔和廣播。
1.2.4 OpenTok Cloud
管理會話，客戶端連線，API呼叫，信令，事件以及客戶端SDK或伺服器SDK未處理的其他所有內容。
1.3 OpenTok該平臺包含庫
- Web client libraries（瀏覽器客戶端庫）
- IOS client libraries（IOS客戶端庫）
- Android client libraries（安卓客戶端庫）
- Server-Side SDKs（伺服器端SDK）
- Server-Side REST API（伺服器端REST介面）
1.4 系統架構
1.4.1 伺服器
- 伺服器端SDK支援語言有
-- Node
-- PHP
-- Java
-- .NET
-- Python
-- Ruby
- 伺服器端功能生成憑據
1.4.2 客戶端
-- 處理大部分的OpenTok功能
-- 連線到會話
-- 將音訊視訊流釋出到會話
-- 訂閱其他客戶端的流
1.5 功能闡述
1.5.1 客戶端
-- 呼叫客戶端SDK
-- 從伺服器獲取會話ID和令牌
-- 使用令牌連線到會話
-- 訂閱音訊視訊流
-- 監聽會話事件
1.5.2 應用伺服器
- 呼叫伺服器SDK
- 在OpenTok雲中建立會話
- 為客戶端生成令牌
- 向客戶端傳送會話ID和令牌
1.5.3 會議
- OpenTok雲中的聊天室
- 將客戶端彼此連線
- 向客戶端傳送時間
1.6 OpenTok的通訊過程分析
1.6.1 連線和釋出訂閱
Step1 由應用伺服器建立會話
應用伺服器呼叫OpenTok伺服器SDK程式碼，通過OpenTok REST API在雲中建立一個會話，並取得會話ID，將會議當做視訊聊天的房間。
Step2 客戶端載入應用程式，伺服器建立令牌
當用戶載入OpenTok Client SDK構建客戶端應用程式時，客戶端（網頁或移動應用程式）從伺服器獲取會話資訊（包括伺服器建立的唯一身份驗證令牌，相當於客戶端與伺服器校驗的密碼）
step3客戶端連線並開始流會話流
- 客戶端使用會話ID和令牌建立會話連線
- 客戶端將音訊視訊流釋出到會話並監聽重要事件（例如加入會話的新使用者）
step4 新的客戶端連線到會話
- 當心使用者在單獨的網頁或移動端（客戶端2）中載入客戶端應用程式時
- 新客戶端從應用伺服器連線收到會話ID和唯一的令牌
- 客戶端使用這些資訊來建立會話連線。
step5 客戶訂閱對方的流
- 新的客戶端連線到會話
- 客戶端2可以訂閱客戶端1的流
- 客戶端2將自己的視訊流釋出到會中並且客戶端1訂閱該視訊流
- 兩個客戶端都一對一地訂閱對方視訊流，且兩端都在傾聽新的事件（如新的會話使用者）
1.7 開發中心的資源
1.7.1 Helo World
快速演示最基本的OpenTok功能。
https://tokbox.com/developer/quickstart/
1.7.2 教程
構建OpenTok應用程式並新增高階功能逐步演練。
https://tokbox.com/developer/tutorials/
1.7.3 程式碼示例
使用示例應用程式GitHub repos列表，可幫助你更快地構建應用程式。
https://tokbox.com/developer/samples/
1.7.4 視訊聊天嵌入
以最少程式碼將OpenTok功能整合到你的網站的最快方式。
https://tokbox.com/developer/embeds/
1.7.5 開發人員指南
有關所有OpenTok特點和功能的全面文件，可參考關於Web,IOS和Android的客戶端SDK的特定類，方法和事件資訊。
https://tokbox.com/developer/guides/
1.7.6 REST API參考文件
使用OpenTok REST API和伺服器SDK指南
https://tokbox.com/developer/rest/
1.7.7 開發人員工具
除錯會話的有用工具和測試API呼叫等。
https://tokbox.com/developer/tools/
1.7.8 測試版程式
一個列出所有OpenTok公開Beta以及如何加入他們的頁面。
https://tokbox.com/developer/beta/
1.7.9 支援中心
如遇到問題找不到答案，請訪問支援中心。
2 實踐部分
2.1 部署環境
2.1.1 系統部署
1）最小化安裝CentOS 7.3 x86_64，系統資訊如下
OS = CentOS 7.3 x86_64
IP Address = 10.168.0.55
HostName = openTok.cmdschool.org
2）名稱解析服務
Windows客戶端執行裡面輸入如下命令
notepad\Windows\System32\drivers\etc\hosts
並增加如下記錄
10.168.0.55 www.cmdschool.org
2.1.2 安裝nginx
yuminstall-yhttp://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm yuminstall-ynginx
2.1.3 建立專案目錄
mkdir-p/usr/share/nginx/html/opentok
2.1.4 確認配置
cp/etc/nginx/conf.d/default.conf/etc/nginx/conf.d/ssl_default.conf vim/etc/nginx/conf.d/ssl_default.conf
確認存在如下內容：
server{
listen443;
server_namelocalhost;
sslon;
ssl_certificate1_www.cmdschool.org_bundle.crt;
ssl_certificate_key2_www.cmdschool.org.key;
ssl_session_timeout5m;
ssl_protocolsTLSv1TLSv1.1TLSv1.2;
ssl_ciphersECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
ssl_prefer_server_cipherson;
location/{
root/usr/share/nginx/html;
indexindex.htmlindex.htm;
}
error_page500502503504/50x.html;
location=/50x.html{
root/usr/share/nginx/html;
}
}2.1.5 配置nginx服務
systemctlenablenginx systemctlrestartnginx
2.1.6 配置防火牆
firewall-cmd--permanent--add-servicehttps firewall-cmd--reload firewall-cmd--list-all
2.1.7 nginx整合PHP fastCGI
1）安裝基礎軟體包
yuminstall-yphp-fpmphp
2）啟動並配置服務自啟動
systemctlenablephp-fpm.service systemctlstartphp-fpm.service
3）配置nginx整合php fastCGI
vim/etc/nginx/conf.d/ssl_default.conf
增加如下程式碼
#passthePHPscriptstoFastCGIserverlisteningon127.0.0.1:9000
#
location~\.php${
root/usr/share/nginx/html;
fastcgi_pass127.0.0.1:9000;
fastcgi_indexindex.php;
fastcgi_paramSCRIPT_FILENAME$document_root$fastcgi_script_name;
include/etc/nginx/fastcgi_params;
}重啟nginx服務
systemctlrestartnginx
4）測試php fastCGI
新增除錯程式碼
echo'<?phpphpinfo();?>'>/usr/share/nginx/html/index.php
訪問以下連結測試fastCGI
https://www.cmdschool.org/index.php
5）如下日誌可以協助你排錯
tail-f/var/log/nginx/error.log tail-f/var/log/php-fpm/error.log
2.1.8 安裝輔助工具包
yuminstall-yunzip
2.2 理解Web客戶端會話
2.2.1 配置Index頁引用OpenTok.js庫
vim/usr/share/nginx/html/opentok/index.html
輸入如下內容：
<html> <body> <!--OpenTok.jslibrary--> <scriptsrc="https://static.opentok.com/v2/js/opentok.js"></script> <script> //credentials //connecttosession //createsubscriber </script> </body> </html>
2.2.2 模擬建立伺服器憑據
vim/var/www/html/opentok/index.html
內容加入到註釋“credentials”下：
varapiKey='45828062'; varsessionId='2_MX40NTgyODA2Mn5-MTQ5NzgzNTA0MjA1NX54WnZGd2VKc3JWTkF3aW04ZlBjTXpKTFV-UH4'; vartoken='T1==cGFydG5lcl9pZD00NTgyODA2MiZzaWc9YjVlNjc2ZjJlOTgxOTY1YTJiNGQzMzc1NDZlZmRhYmViZDU1NTNlZjpzZXNzaW9uX2lkPTJfTVg0ME5UZ3lPREEyTW41LU1UUTVOemd6TlRBME1qQTFOWDU0V25aR2QyVktjM0pXVGtGM2FXMDRabEJqVFhwS1RGVi1VSDQmY3JlYXRlX3RpbWU9MTQ5NzgzNTEwMSZub25jZT0wLjA0NDA3NzI3NzgxOTc2MjY3JnJvbGU9cHVibGlzaGVyJmV4cGlyZV90aW1lPTE0OTc5MjE1MDE=';
注：必須由伺服器建立有效的API祕鑰和會話以及令牌
2.2.3 模擬初始化會話
vim/var/www/html/opentok/index.html
內容加入到註釋“create subscriber”下：
varsession=OT.initSession(apiKey,sessionId)
session.connect(token,function(error){
//createpublisher
})2.2.4 模擬釋出視訊流
vim/var/www/html/opentok/index.html
內容加入到註釋“create publisher”下：
varpublisher=OT.initPublisher(); session.publish(publisher);
程式碼允許你將網路攝像頭和麥克風的音訊和視訊流釋出到會話
2.2.5 建立訂閱
vim/var/www/html/opentok/index.html
內容加入到註釋“create publisher”下：
session.on('streamCreated',function(event){
session.subscribe(event.stream);
});程式碼允許你在會話中訂閱其他客戶端的視訊流
2.3 配置基本的客戶端
2.3.1 建立專案目錄結構
mkdir-p/usr/share/nginx/html/opentok/{js,css}2.3.2 建立客戶端頁面
vim/var/www/html/opentok/index.html
加入如下內容：
<html> <head> <title>OpenTokGettingStarted</title> <linkhref="css/app.css"rel="stylesheet"type="text/css"> <scriptsrc="https://static.opentok.com/v2/js/opentok.min.js"></script> </head> <body> <divid="videos"> <divid="subscriber"></div> <divid="publisher"></div> </div> <scripttype="text/javascript"src="js/app.js"></script> </body> </html>
程式碼作用如下：
- 引用openTok.js庫以及自己建立的JS和CSS檔案
- 包含釋出者與訂閱者的DIV
- 將包含視訊流
2.3.3 配置認證
vim/usr/share/nginx/html/opentok/js/app.js
加入如下內容：
//replacethesevalueswiththosegeneratedinyourTokBoxAccount varapiKey="YOUR_API_KEY"; varsessionId="YOUR_SESSION_ID"; vartoken="YOUR_TOKEN"; //(optional)addservercodehere initializeSession();
注：將2.2的apiKey/sessinoId/token值替換變數值。
2.3.4 連線會話並建立釋出者
vim/usr/share/nginx/html/opentok/js/app.js
在當前程式碼後面加入如下內容：
//Handlingallofourerrorsherebyalertingthem
functionhandleError(error){
if(error){
alert(error.message);
}
}
functioninitializeSession(){
varsession=OT.initSession(apiKey,sessionId);
//Subscribetoanewlycreatedstream
//Createapublisher
varpublisher=OT.initPublisher('publisher',{
insertMode:'append',
width:'100%',
height:'100%'
},handleError);
//Connecttothesession
session.connect(token,function(error){
//Iftheconnectionissuccessful,publishtothesession
if(error){
handleError(error);
}else{
session.publish(publisher,handleError);
}
});
}程式碼完成以下功能：
- initializeSession函式使用OT.initPubulisher方法建立一個publisher物件，該方法有三個引數， -- publisher視訊代替文件物件模型的元素（指ID為publisher的DIV）
-- publisher屬性(insertMode/height/width屬性)
-- 指定完成錯誤處理
- initalizeSession方法建立一個session物件，該方法需要兩個引數，
-- apiKey，
-- sessionId
- session.connec方法將客戶端程式連線到openTok會話
- 如果連線openTok會話有錯誤，則將錯誤物件傳遞給connect事件處理程式（使用錯誤訊息向控制檯傳送console.error）
2.3.5 初始化使用者
vim/usr/share/nginx/html/opentok/js/app.js
在註釋後面加入如下內容：
//Subscribetoanewlycreatedstream
session.on('streamCreated',function(event){
session.subscribe(event.stream,'subscriber',{
insertMode:'append',
width:'100%',
height:'100%'
},handleError);
});- 在會話中建立新流，會話物件排程streamCreated事件。
- 客戶端檢測到流，我們使用session.subscribe()方法訂閱流，該方法需要四個引數，
-- 客戶端訂閱的Stream物件（event.stream）
-- 訂閱視訊代替文件物件模型元素或ID（指ID為subscriber的DIV）
-- 訂閱檢視的外觀屬性（指inserMode,height,width屬性）
-- 錯誤處理函式（當subscribe方法返回成功或失敗時呼叫）
2.3.6 初始化使用者
vim/usr/share/nginx/html/opentok/css/app.css
在註釋後面加入如下內容：
body,html{
background-color:gray;
height:100%;
}
#videos{
position:relative;
width:100%;
height:100%;
margin-left:auto;
margin-right:auto;
}
#subscriber{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
z-index:10;
}
#publisher{
position:absolute;
width:360px;
height:240px;
bottom:10px;
left:10px;
z-index:100;
border:3pxsolidwhite;
border-radius:3px;
}2.4 伺服器的部署安裝方式概述
2.4.1 選項一Heroku上啟動簡單的REST伺服器
需要簡單部署請參閱以下連結：
https://heroku.com/deploy?template=https://github.com/opentok/learning-opentok-php
2.4.2 選項二使用伺服器SDK構建（高定製）
需要高階定製請參閱：
https://tokbox.com/developer/sdks/server/
開發者指南請參閱：
https://tokbox.com/developer/guides/
SDK下載地址：
https://github.com/opentok/opentok-php-sdk/releases
PHP語言參考：
http://www.w3school.com.cn/php/php_syntax.asp
2.4.3 選項3伺服器例項應用程式
需要例項程式部署請參閱：
https://tokbox.com/developer/samples/
2.5 使用SDK構建伺服器
2.5.1 安裝composer
1）配置主程式
php-r"copy('https://getcomposer.org/installer','composer-setup.php');"
php-r"if(hash_file('SHA384','composer-setup.php')==='669656bab3166a7aff8a7506b8cb2d1c292f042046c5a994c43155c0be6190fa0355160742ab2e1c88d40d5be660b410'){echo'Installerverified';}else{echo'Installercorrupt';unlink('composer-setup.php');}echoPHP_EOL;"
phpcomposer-setup.php
php-r"unlink('composer-setup.php');"
mvcomposer.phar/usr/local/bin/composer2）設定國內源
composerconfigrepo.packagistcomposerhttps://packagist.phpcomposer.com
注：其他使用方式請參閱，
https://pkg.phpcomposer.com/
2.5.2 部署基礎包
cd/usr/share/nginx/html mkdirbackup mvopentokbackup composerrequireopentok/opentok2.3.1 composerrequireslim/slim2.* composerrequiregregwar/cache1.0.*
配置基礎包的許可權
chown-Rnginx:apache/usr/share/nginx/html chmod-R770/usr/share/nginx/html
2.5.3 配置php-fpm的啟動指令碼環境變數
cat/usr/lib/systemd/system/php-fpm.service|grepEnvironmentFile
確認包含如下引數：
EnvironmentFile=/etc/sysconfig/php-fpm
2.5.4 定義環境變數的引數
vim/etc/sysconfig/php-fpm
輸入如下配置：
API_KEY=0000000 API_SECRET=abcdef1234567890abcdef01234567890abcdef
注：以上只是範例，API_KEY和API_SECRET需要到雲端註冊賬號申請。
https://tokbox.com/account
2.5.5 systemd的環境變數通過指令碼傳給bash
1）配置變數傳遞指令碼
vim/etc/profile.d/opentok.sh
輸入如下配置：
#!/bin/bash if[-f/etc/sysconfig/php-fpm];then oldifs=$IFS IFS=$'\n' foriin`cat/etc/sysconfig/php-fpm|egrep-v"^#|^$|^;"|sed's///g'`;do export"$i" done IFS=$oldifs fi
2）匯入bash的環境變數：
source/etc/profile
3）確認環境變數生效：
echo$API_KEY;echo$API_SECRET
顯示如下：
0000000 abcdef1234567890abcdef01234567890abcdef
2.5.6 將systemd環境變數傳給php-fpm
1）配置變數傳遞
vim/etc/php-fpm.d/www.conf
註釋後加入兩行傳參變數定義：
;PassenvironmentvariableslikeLD_LIBRARY_PATH.All$VARIABLEsaretakenfrom ;thecurrentenvironment. ;DefaultValue:cleanenv ;env[HOSTNAME]=$HOSTNAME ;env[PATH]=/usr/local/bin:/usr/bin:/bin ;env[TMP]=/tmp ;env[TMPDIR]=/tmp ;env[TEMP]=/tmp env[API_KEY]=$API_KEY env[API_SECRET]=$API_SECRET
2）通過PHPINFO函式檢查傳參
注：配置方法詳見“2.1.7 nginx整合PHP fastCGI”
2.5.7 修改PHP.ini引數
注：以下全部修改配置檔案“/etc/php.ini”，以下配置都需重啟“php-fpm”服務
1）顯示除錯頁面
display_errors=stderr
2）遮蔽時區錯誤
date.timezone="Asia/Shanghai"
2.5.8 程式碼除錯
測試以下連結的程式碼：
https://www.cmdschool.org/vendor/opentok/opentok/sample/HelloWorld/web/index.php
如果有錯誤請根據提示修改：
vimvendor/opentok/opentok/sample/HelloWorld/web/index.php
2.6 部署專案Demo
2.6.1 下載Demo
如果你不想除錯，請使用筆者已經除錯過的demo，下載地址如下
http://down.51cto.com/data/2323312
2.6.2 將程式碼下載到如下目錄
/usr/share/nginx/html
2.6.3 解壓
unzipopentok.zip
2.6.4 修改許可權
chown-Rnginx:apache/usr/share/nginx/html/opentok chmod-R770/usr/share/nginx/html/opentok
2.6.5 準備調試環境
電腦中需插入如下裝置：
- 攝像頭（可選）
- 麥克風（必須）
- 耳麥或音箱（可選）
2.6.6 測試執行
使用兩個以上的頁面開啟如下地址：
https://www.cmdschool.org/opentok/index.php
可見如下視窗:
參閱文件：
===========================================
Tutorials
https://tokbox.com/developer/tutorials/
Set up a Basic Client (Start Here)
https://tokbox.com/developer/tutorials/web/basic-video-chat/
Web sample apps for PHP,
https://github.com/opentok/learning-opentok-php
Web sample apps for
https://github.com/opentok/opentok-web-samples
轉載於:https://blog.51cto.com/cmdschool/1943341