跨平台视频通信项目-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 支持中心
如遇到問題找不到答案,請訪問支持中心。
https://support.tokbox.com/
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
yum?install?-y?http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm yum?install?-y?nginx2.1.3 創建項目目錄
mkdir?-p?/usr/share/nginx/html/opentok2.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?{listen???????443;server_name??localhost;ssl?on;ssl_certificate?1_www.cmdschool.org_bundle.crt;ssl_certificate_key?2_www.cmdschool.org.key;ssl_session_timeout?5m;ssl_protocols?TLSv1?TLSv1.1?TLSv1.2;ssl_ciphers?ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;ssl_prefer_server_ciphers?on;location?/?{root???/usr/share/nginx/html;index??index.html?index.htm;}error_page???500?502?503?504??/50x.html;location?=?/50x.html?{root???/usr/share/nginx/html;} }2.1.5 配置nginx服務
systemctl?enable?nginx systemctl?restart?nginx2.1.6 配置防火墻
firewall-cmd?--permanent?--add-service?https firewall-cmd?--reload firewall-cmd?--list-all2.1.7 nginx集成PHP fastCGI
1)安裝基礎軟件包
yum?install?-y?php-fpm?php2)啟動并配置服務自啟動
systemctl?enable?php-fpm.service systemctl?start?php-fpm.service3)配置nginx集成php fastCGI
vim?/etc/nginx/conf.d/ssl_default.conf增加如下代碼
????#?pass?the?PHP?scripts?to?FastCGI?server?listening?on?127.0.0.1:9000#location?~?\.php$?{root???????????/usr/share/nginx/html;fastcgi_pass???127.0.0.1:9000;fastcgi_index??index.php;fastcgi_param??SCRIPT_FILENAME??$document_root$fastcgi_script_name;include????????/etc/nginx/fastcgi_params;}重啟nginx服務
systemctl?restart?nginx4)測試php fastCGI
添加調試代碼
echo?'<?php?phpinfo();??>'?>?/usr/share/nginx/html/index.php訪問以下鏈接測試fastCGI
https://www.cmdschool.org/index.php
5)如下日志可以協助你排錯
2.1.8 安裝輔助工具包
yum?install?-y?unzip2.2 理解Web客戶端會話
2.2.1 配置Index頁引用OpenTok.js庫
vim?/usr/share/nginx/html/opentok/index.html輸入如下內容:
<html> <body> <!--?OpenTok.js?library?--> <script?src="https://static.opentok.com/v2/js/opentok.js"></script> <script>//?credentials//?connect?to?session//?create?subscriber</script> </body> </html>2.2.2 模擬創建服務器憑據
vim?/var/www/html/opentok/index.html內容加入到注釋“credentials”下:
var?apiKey?=?'45828062'; var?sessionId?=?'2_MX40NTgyODA2Mn5-MTQ5NzgzNTA0MjA1NX54WnZGd2VKc3JWTkF3aW04ZlBjTXpKTFV-UH4'; var?token?=?'T1==cGFydG5lcl9pZD00NTgyODA2MiZzaWc9YjVlNjc2ZjJlOTgxOTY1YTJiNGQzMzc1NDZlZmRhYmViZDU1NTNlZjpzZXNzaW9uX2lkPTJfTVg0ME5UZ3lPREEyTW41LU1UUTVOemd6TlRBME1qQTFOWDU0V25aR2QyVktjM0pXVGtGM2FXMDRabEJqVFhwS1RGVi1VSDQmY3JlYXRlX3RpbWU9MTQ5NzgzNTEwMSZub25jZT0wLjA0NDA3NzI3NzgxOTc2MjY3JnJvbGU9cHVibGlzaGVyJmV4cGlyZV90aW1lPTE0OTc5MjE1MDE=';注:必須由服務器創建有效的API秘鑰和會話以及令牌
2.2.3 模擬初始化會話
vim?/var/www/html/opentok/index.html內容加入到注釋“create subscriber”下:
var?session?=?OT.initSession(apiKey,?sessionId) session.connect(token,?function(error)?{//?create?publisher})2.2.4 模擬發布視頻流
vim?/var/www/html/opentok/index.html內容加入到注釋“create publisher”下:
var?publisher?=?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>?OpenTok?Getting?Started?</title><link?href="css/app.css"?rel="stylesheet"?type="text/css"><script?src="https://static.opentok.com/v2/js/opentok.min.js"></script> </head> <body><div?id="videos"><div?id="subscriber"></div><div?id="publisher"></div></div><script?type="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加入如下內容:
//?replace?these?values?with?those?generated?in?your?TokBox?Account var?apiKey?=?"YOUR_API_KEY"; var?sessionId?=?"YOUR_SESSION_ID"; var?token?=?"YOUR_TOKEN";//?(optional)?add?server?code?here initializeSession();注:將2.2的apiKey/sessinoId/token值替換變量值。
2.3.4 連接會話并創建發布者
vim?/usr/share/nginx/html/opentok/js/app.js在當前代碼后面加入如下內容:
//?Handling?all?of?our?errors?here?by?alerting?them function?handleError(error)?{if?(error)?{alert(error.message);} }function?initializeSession()?{var?session?=?OT.initSession(apiKey,?sessionId);//?Subscribe?to?a?newly?created?stream//?Create?a?publishervar?publisher?=?OT.initPublisher('publisher',?{insertMode:?'append',width:?'100%',height:?'100%'},?handleError);//?Connect?to?the?sessionsession.connect(token,?function(error)?{//?If?the?connection?is?successful,?publish?to?the?sessionif?(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在注釋后面加入如下內容:
//?Subscribe?to?a?newly?created?stream 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:?3px?solid?white;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?'Installer?verified';?}?else?{?echo?'Installer?corrupt';?unlink('composer-setup.php');?}?echo?PHP_EOL;" php?composer-setup.php php?-r?"unlink('composer-setup.php');" mv?composer.phar?/usr/local/bin/composer2)設置國內源
注:其他使用方式請參閱,
https://pkg.phpcomposer.com/
2.5.2 部署基礎包
cd?/usr/share/nginx/html mkdir?backup mv?opentok?backup composer?require?opentok/opentok?2.3.1 composer?require?slim/slim?2.* composer?require?gregwar/cache?1.0.*?配置基礎包的權限
chown?-R?nginx:apache?/usr/share/nginx/html chmod?-R?770?/usr/share/nginx/html2.5.3 配置php-fpm的啟動腳本環境變量
cat?/usr/lib/systemd/system/php-fpm.service?|?grep?EnvironmentFile確認包含如下參數:
EnvironmentFile=/etc/sysconfig/php-fpm2.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/bashif?[?-f?/etc/sysconfig/php-fpm?];?thenoldifs=$IFSIFS=$'\n'for?i?in?`cat?/etc/sysconfig/php-fpm?|?egrep?-v?"^#|^$|^;"?|?sed?'s/?//g'`;?doexport?"$i"doneIFS=$oldifs fi2)導入bash的環境變量:
source?/etc/profile3)確認環境變量生效:
echo?$API_KEY;echo?$API_SECRET顯示如下:
0000000 abcdef1234567890abcdef01234567890abcdef2.5.6 將systemd環境變量傳給php-fpm
1)配置變量傳遞
vim?/etc/php-fpm.d/www.conf注釋后加入兩行傳參變量定義:
;?Pass?environment?variables?like?LD_LIBRARY_PATH.?All?$VARIABLEs?are?taken?from ;?the?current?environment. ;?Default?Value:?clean?env ;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_SECRET2)通過PHPINFO函數檢查傳參
注:配置方法詳見“2.1.7 nginx集成PHP fastCGI”
2.5.7 修改PHP.ini參數
注:以下全部修改配置文件“/etc/php.ini”,以下配置都需重啟“php-fpm”服務
1)顯示調試頁面
display_errors?=?stderr2)屏蔽時區錯誤
date.timezone?=?"Asia/Shanghai"2.5.8 代碼調試
測試以下鏈接的代碼:
https://www.cmdschool.org/vendor/opentok/opentok/sample/HelloWorld/web/index.php
如果有錯誤請根據提示修改:
vim?vendor/opentok/opentok/sample/HelloWorld/web/index.php2.6 部署項目Demo
2.6.1 下載Demo
如果你不想調試,請使用筆者已經調試過的demo,下載地址如下
http://down.51cto.com/data/2323312
2.6.2 將代碼下載到如下目錄
/usr/share/nginx/html2.6.3 解壓
unzip?opentok.zip2.6.4 修改權限
chown?-R?nginx:apache?/usr/share/nginx/html/opentok chmod?-R?770?/usr/share/nginx/html/opentok2.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
總結
以上是生活随笔為你收集整理的跨平台视频通信项目-OpenTok的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: python 操作redis之——Hyp
- 下一篇: Go简单的Goroutine示例