Web Call Server - Developer Guide - Flashphoner© 2017 Flashphoner, LLC Web Call Server - Руководство Разработчика. 2 Web Call Server - Руководство

© 2017 Flashphoner, LLC

Web Call Server - Руководство Разработчика

Web Call Server - Руководство Разработчика2


0

Содержание

Часть I Быстрый старт 4

................................................................................................................................... 41 Подготовка сервера и тестирование SIP-звонка

................................................................................................................................... 52 SIP звонки

.......................................................................................................................................................... 5Простой WebRTC-SIP звонок в минимальной конфигурации

.......................................................................................................................................................... 8Переключение на Flash в браузерах, где WebRTC не поддерживается

................................................................................................................................... 103 WebRTC - потоковое видео

.......................................................................................................................................................... 10Публикация и воспроизведение аудио потоков

.......................................................................................................................................................... 13Публикация и воспроизведение видео потоков

.......................................................................................................................................................... 16Перенаправление воспроизведения потока в нужное окно

.......................................................................................................................................................... 19Запись потоков

Часть II WCS JavaScript API 24

Часть III Подключение серверного REST API 31

................................................................................................................................... 331 Аутентификация коннекта Web-сервером

................................................................................................................................... 362 Переопределение параметров

................................................................................................................................... 383 Тестирование Click-to-Call с взятием номера по REST API

Часть IV Обмен данными 42

................................................................................................................................... 421 WebRTC-конференция как пример обмена данными

................................................................................................................................... 432 Обратный вызов через REST API

................................................................................................................................... 453 Обратный вызов - эмуляция из REST Console, примеры

0

IЧасть



4Быстрый старт4

1 Быстрый старт

Этот раздел представляет собой пошаговое руководство по быстрой настройке и запускуприложения для простого тестового SIP-звонка, публикации и воспроизведения видео потока.В разделе показано как начать работу в минимальной конфигурации:

Phone-min-htmlStreaming-min-html

Минимальная конфигурация представляет собой приложение, состоящее из двух файлов: HTML+JS (например Phone-min.html + Phone-min.js) и использует WCS JavaScript API.

1.1 Подготовка сервера и тестирование SIP-звонка

Настройка и запуск сервера

1. Скачиваем и устанавливаем сервер.

wget http://flashphoner.com/downloads/builds/WCS/3.0/x8664/wcs3_video_vp8_manager/FlashphonerWebCallServer-3.0.1013.tar.gz

tar -xvzf FlashphonerWebCallServer-3.0.1013.tar.gz

cd FlashphonerWebCallServer-3.0.1013

./install.sh

2. Вписываем IP адрес в конфиг flashphoner.properties и запускаем сервер.

ip=0.0.0.0, где 0.0.0.0 - IP адрес вашего сервера. Введите правильное значение.ip_local=0.0.0.0, где 0.0.0.0 - IP адрес вашего сервера. Введите правильное значение.

service webcallserver start

3. Смотрим логи чтобы убедиться что сервер запущен.

tail -f /usr/local/FlashphonerWebCallServer/logs/server_logs/flashphoner.log

tail -f /usr/local/FlashphonerWebCallServer/logs/flashphoner_manager.log

Если что-то пошло не так, обратитесь к документации Web Call Server - РуководствоАдминистратора. Там содержатся более подробные инструкции по установке и настройкесервера.

Настройка и запуск стандартного web-клиента

Перед тем как разрабатывать свое приложение протестируем стандартного web-клиента чтобыубедиться что WCS сервер работает правильно.

1. Скачиваем и распаковываем примеры стандартного клиента вместе с wcs_api.

wget http://flashphoner.com/downloads/builds/flashphoner_client/wcs_api/WCS-JavaScript-API-1.0.536-4adce0a5896181b6a18f23abc3f93162751db92a.tar.gz

tar -xvzf WCS-JavaScript-API-1.0.536-4adce0a5896181b6a18f23abc3f93162751db92a.tar.gz

2. Вписываем адрес сервера в flashphoner.xml


5Быстрый старт

<flashphoner>

<url_ws_server>ws://0.0.0.0:8080</url_ws_server>

<url_flash_server>rtmfp://0.0.0.0:1935</url_flash_server>

<register_required>true</register_required>

<use_dtls>true</use_dtls>

<video_width>640</video_width>

<video_height>480</video_height>

<check_validation_callee>true</check_validation_callee>

<use_enhanced_mic>true</use_enhanced_mic>

<ring_sound/>

<busy_sound/>

<register_sound/>

<finish_sound/>

</flashphoner>

Используйте здесь адрес вашего сервера вместо 0.0.0.0.

3. Открываем в браузере страницу Phone.html и тестируем стандартное приложение.Тестирование стандартного приложения со скриншотами описано в разделе 'Примеры'документации Web Call Server - Руководство Администратора.

Если в результате тестирования вы смогли совершить SIP звонок, значит сервер настроенправильно и все работает нормально.

Если регистрация на SIP сервере не проходит, звонок не проходит или при звонке нет аудио,обратитесь к документации Web Call Server - Руководство администратора для решения этихпроблем.

Внимание, если вы тестируете примеры локально, открывая страницу прямо в файловой системе,например: file:///C:/tmp/Phone-min.html, то необходимо запускать Chrome браузер со специальныминастройками безопасности. В противном случае Chrome не сможет подгрузить локальный конфигflashphoner.xml из-за внутренних политик безопасности. Другой вариант - выгрузить код примера наweb-сервер. В этом случае все будет нормально работать и при обычном запуске Chrome.

1.2 SIP звонки

В этом подразделе показано как сделать WebRTC-SIP звонок и добавить поддержку Flash.

1.2.1 Простой WebRTC-SIP звонок в минимальной конфигурации

Ниже приведен пример минимального кода для осуществления WebRTC-SIP-звонка.

Страница

Phone-min.html - эта страница содержит минимальный набор инструментов для совершениязвонка:

Соединение с сервером устанавливается при клике по ссылке 'Connect'Звонок стартует при клике по ссылке 'Call'Звонок можно сбросить кликнув по ссылке 'Hangup'

Зависимости:Скрипты JQueryWCS JavaScript API - Flashphoner.jsСкрипт Phone-min.js

Перед тем как начать звонок, нужно ввести в текстовое поле Websocket-адрес сервера и нажать




'connect'. Убедиться что соединение установлено можно в Chrome-браузере - 'Инструментыразработчика'. Там будет статус ESTABLISHED.

<!DOCTYPE html>

<html>

<head>

<title>Phone min</title>



<script type="text/javascript" src="../../dependencies/jquery/jquery.js"></script>

<script type="text/javascript" src="../../dependencies/jquery/jquery-ui.js"></script>

<script type="text/javascript" src="../../dependencies/jquery/jquery.websocket.js"></script>

<script type="text/javascript" src="../../dependencies/jquery/jquery.json.js"></script>





<script type="text/javascript" src="../../Flashphoner.js"></script>



<script type="text/javascript" src="Phone-min.js"></script>

</head>



<body onload="initAPI()">



WCS Server URL: <input id="urlServer" type="text" value="ws://192.168.1.5:8080"/><br/>

SIP login, password, domain: <input id="sipLogin" type="text" value="alice"/>, <input id="sipPassword" type="password" value="password"/>, <input id="sipDomain" type="text" value="mysipdomain.com"/><br/>

SIP callee: <input id="callee" type="text" value="callee"/><br/>

<a href="#" on onclick="connect();return false">connect</a>

<a href="#" on onclick="call();return false">call</a>

<a href="#" on onclick="hangup();return false">hangup</a>

</body>

</html>

Скрипт звонка

Phone-min.js - этот скрипт имеет всего три полезных функции: Установка соединения методом 'connect'Исходящий звонок методом 'call'Сброс звонка методом 'hangup'

В результате, если на той стороне берут трубку, устанавливается SIP-звонок. Статусыустановившегося звонка передаются в событии 'CallStatusEvent'.Когда абонент с той стороны повесит трубку, звонок завершится и придет статус 'FINISH'. Кромеэтого можно прервать звонок вызовом метода 'hangup'.

//Init WCS JavaScript API

var f = Flashphoner.getInstance();

function initAPI() {

f.addListener(WCSEvent.ErrorStatusEvent, errorEvent);

f.addListener(WCSEvent.ConnectionStatusEvent, connectionStatusListener);

f.addListener(WCSEvent.RegistrationStatusEvent, registrationStatusListener);

f.addListener(WCSEvent.CallStatusEvent, callStatusListener);

f.init();

}



var currentCall;

//New connection

function connect() {

f.connect({urlServer: field("urlServer"), appKey: 'defaultApp', sipLogin: field("sipLogin"), sipPassword: field("sipPassword"), sipDomain: field("sipDomain")});

}

function hangup() {

f.hangup(currentCall);

}

//New call

function call() {

var call = new Call();

call.callee = field("callee");

currentCall = f.call(call);

}

//Connection Status

function connectionStatusListener(event) {

trace(event.status);

if (event.status == ConnectionStatus.Established) {

trace('Connection has been established. You can start a new call.');

}

}

//Registration Status

function registrationStatusListener(event) {


}

//Call Status

function callStatusListener(event) {


if (event.status == CallStatus.ESTABLISHED) {

trace('Call ' + event.callId + ' is established');

}

}

//Error

function errorEvent(event) {

trace(event.info);

}

//Trace

function trace(str) {

console.log(str);

}

//Get field

function field(name){

var field = document.getElementById(name).value;

return field;

}

Тестирование




1. Откройте страницу в Chrome - браузере и кликните по ссылке Connect и далее по ссылке Call.2. Страница запросит доступ к микрофону. Разрешите доступ.3. Возмите трубку на вызываемой стороне чтобы установился звонок.4. Протестируйте голосовую связь и сбросьте звонок на вызываемой стороне либо кликнув по

ссылке 'hangup'.

1.2.2 Переключение на Flash в браузерах, где WebRTC не поддерживается

Настройки вывода Flash-окна

В браузерах IE и Safari на момент написания настоящей документации не поддерживаласьтехнология WebRTC. В таких случаях WCS JavaScript API делает аудио и видео звонки черезFlash Player. Технология Flash используется только для передачи аудио и видео данных. Весьсигналинг идет через Websocket.

Подключите зависимость swfobject.

Скрипт 'swfobject' необходим для позиционирования Flash-объекта на странице.



<script type="text/javascript" src="../../dependencies/swf/swfobject.js"></script>

2. При инициализации API, укажите путь к SWF файлу реализации аудио и видео стриминга наFlash. Это может быть относительный путь относительно корня вашего сайта или относительно директории, в которой находится страница Phone-min.js. По умолчанию это: "../../dependencies/flash/MediaManager.swf".


f.init({pathToSWF:'../../dependencies/flash/MediaManager.swf'});

3. При инициализации мы передаем параметр elementIdForSWF - это ID HTML-элемента, которыйбудет заменен на Flash(SWF) - объект. Объект будет занимать 100% отведенного емупространства по ширине и высоте. Если ID элемента не был передан или если элемент с таким IDотсутствует на странице, WCS JavaScript API создаст блок нужных размеров автоматически ипоместит туда Flash-объект.

Есть специальное требование к DIV-контейнеру для размещения Flash-объекта. Размер видимойобласти Flash-объекта должен быть не меньше: 215x138 пикселей в случае если вы используетекамеру или микрофон. Если это требование не выполнено, Flash Security панель не сможетконкретно отобразиться и это повлечет за собой проблемы с доступом к микрофону или ошибки винтерфейсе.

f.init({elementIdForSWF:'MyFlashDiv'});

Пример:

<div style="width:250px;height:150px">

<div id="MyFlashDiv"></div>

</div>

Так этот DIV будет выглядеть после внедрения Flash-объекта:

<div style="width:250px;height:150px">

<object

type="application/x-shockwave-flash"



data="../../dependencies/flash/MediaManager.swf"

width="100%"

height="100%"

id="MyFlashDiv"

style="visibility: visible;">

<param name="menu" value="true">

<param name="swliveconnect" value="true">

<param name="allowfullscreen" value="true">

<param name="allowscriptaccess" value="always">

<param name="wmode" value="transparent">

</object>

</div>


1. Откройте HTML-страницу Phone-min.html в Safari или Microsoft Internet Explorer последней версии(на момент тестирования использовались версии MS IE 10 и 11).

2. Нажмите кнопку 'connect' и 'call' через несколько секунд.

В DIV-блоке вы увидите Flash Security Panel с запросом доступа к микрофону. Нажмите'Разрешить' чтобы дать Flash Player доступ к микрофону перед началом звонка. Далее будетустановлено соединение и вызываемый абонент берет трубку. После тестирования, нажмите'hangup' чтобы завершить звонок.

Страница

Единственное отличие - добавлена подгрузка скрипта swfobject.js: <script type="text/javascript" src="../../dependencies/swf/swfobject.js"></script>




<!DOCTYPE html>

<html>

<head>















</head>





SIP login, password, domain: <input id="sipLogin" type="text" value="alice"/>, <input id="sipPassword" type="password" value="password"/>, <input id="sipDomain" type="text" value="mysipdomain.com"/><br/>

SIP callee: <input id="callee" type="text" value="callee"/><br/>


<a href="#" on onclick="call();return false">call</a>

<a href="#" on onclick="hangup();return false">hangup</a>

</body>

</html>

Скрипт

Скпипт Phone-min.js полностью идентичен тому, что используется при звонке через WebRTC в предыдущем разделе.

Дополнительные настройки конфигурации Flash будут заданы по умолчанию:

f.init({pathToSWF:'../../dependencies/flash/MediaManager.swf'});

f.init({elementIdForSWF:'MyFlashDiv'});

1.3 WebRTC - потоковое видео

Здесь показано как работать с WebRTC аудио потоком, подключение видео и управлениевоспроизведением видео с сервера.

1.3.1 Публикация и воспроизведение аудио потоков

Страница

Ниже приведен HTML-код страницы, которая позволит установить соединение с сервером,опубликовать аудио поток и / или забрать и воспроизвести этот поток с сервера по его имени.

Используемые контролы:

connectpublish_streamunpublish_stream



play_streamstop_stream

<!DOCTYPE html>

<html>

<head>

<title>Streaming min</title>












<script type="text/javascript" src="Streaming-min.js"></script>

</head>





Stream name: <input id="streamName" type="text" value="streamName"/><br/>


<a href="#" on onclick="publishStream();return false">publish_stream</a>

<a href="#" on onclick="unPublishStream();return false">unpublish_stream</a>

<a href="#" on onclick="playStream();return false">play_stream</a>

<a href="#" on onclick="stopStream();return false">stop_stream</a>

</body>

</html>

Скрипт

Функции скрипта:

connectpublishStreamunpublishStreamplayStreamstopStreamconnectionStatusListenerstreamStatusListenererrorEventtracefield









f.addListener(WCSEvent.StreamStatusEvent, streamStatusListener);

f.init();

}

//New connection

function connect(){

f.connect({urlServer:field("urlServer"), appKey:'defaultApp'});

}

//Publish stream

function publishStream(){

var streamName = field("streamName");

f.publishStream({name:streamName, record:true});

}

//Stop stream publishing

function unPublishStream(){


f.unPublishStream({name:streamName});

}

//Play stream

function playStream(){


f.playStream({name:streamName});

}

//Stop stream playback

function stopStream(){


f.stopStream({name:streamName});

}

//Connection Status



if (event.status == ConnectionStatus.Established){


}

}

//Connection Status

function streamStatusListener(event) {




}

}



//Error


trace(event.info);

}

//Trace

function trace(str){

console.log(str);

}

//Get field



return field;

}


1. Откройте страницу Streaming-min.htm в WebRTC браузере, например Chrome.2. Нажмите 'connect' и дождитесь установки соединения с сервером (в консоли появится статусESTABLISHED).3. Нажмите 'publish_stream', тем самым вы опубликуете на сервер поток с именем streamName.4. Нажмите 'play_stream', тем самым вы воспроизведете поток с именем streamName и услышитезвук, который передается на сервер с вашего микрофона.5. Послушайте и убедитесь что звук передается корректно. При необходимости проверьтепередачу звука с разных компьютеров.6. Нажмите 'stop_stream' чтобы завершить воспроизведение потока.7. Нажмите 'unpublish_stream' чтобы завершить публикацию потока на сервер.

1.3.2 Публикация и воспроизведение видео потоков

Страница

Обратите внимание, что для работы с видео потоками на страницу добавлены два HTML5 videoтега. Первый отвечает за отображение того видео, которое уходит от пользователя на сервер(localVideo). Второй video-тег отображает видео, которое пришло с сервера (remoteVideo). Востальном страница не отличается от той, что использовалась при работе с аудио в предыдущемразделе.

Дополнительные элементы:localVideoremoteVideo




<!DOCTYPE html>

<html>

<head>














</head>











<table>

<tr>

<td>My Video</td>

<td>Playing back video</td>

</tr>

<tr>

<td><video id="localVideo" style="width:320px;height:240px; background-color:grey"></video></td>

<td><video id="remoteVideo" style="width:320px;height:240px; background-color:grey"></video></td>

</tr>

</table>

</body>

</html>

Скрипт

В скрипте Streaming-min.js, при добавлении работы с видео добавляется следующая строчка:

f.init({localMediaElementId:"localVideo", remoteMediaElementId:"remoteVideo"});

Тем самым мы указываем API использовать эти HTML5-video теги для локального видео ивоспроизводимого видео соответственно.Без этой дополнительной настройки видео отображаться не будет.










}

//New connection

function connect(){


}

//Publish stream




}





}

//Play stream




}





}

//Connection Status





}

}

//Connection Status





}

}




//Error


trace(event.info);

}

//Trace


console.log(str);

}

//Get field



return field;

}


Процедура тестирования полностью идентична тестированию аудио в предыдущем разделе. Вданном случае пользователь будет видеть свой видео поток, который он отправляет на сервер ввидео-блоке сплева, а так же тот поток, который приходит с сервера обратно в видео-блоке справа.

1.3.3 Перенаправление воспроизведения потока в нужное окно

Страница

На странице было добавлено текстовое поле, в котором можно вручную задать ID HTML5 videoтега, который будет использоваться для отображения видео с сервера на странице: <inputid="remoteVideoElementId" type="text" value="remoteVideo"/>

Кроме этого был добавлен сам video-тег: <video id="remoteVideo2"style="width:320px;height:240px; background-color:grey">

Т.е. в текстовом поле мы можем указать 'remoteVideo' или 'remoteVideo2'. В резульатевоспроизводимое видео будет перенаправлено в соответствующий блок. В эти блоки можноперенаправить два разных потока.



<!DOCTYPE html>

<html>

<head>














</head>






Stream playback video elementID: <input id="remoteVideoElementId" type="text" value="remoteVideo"/><br/>






<table>

<tr>

<td>My Video</td>

<td>Playing back video</td>

<td>Playing back video 2</td>

</tr>

<tr>


<td><video id="remoteVideo" style="width:320px;height:240px; background-color:grey"></video></td>

<td><video id="remoteVideo2" style="width:320px;height:240px; background-color:grey"></video></td>

</tr>

</table>

</body>

</html>

Скрипт

Здесь мы убираем перенаправление в окно remoteVideo при инициализации:

Было:


Стало:

f.init({localMediaElementId:"localVideo"});

И добавляем один параметр в метод playStream




Было:


Стало:

f.playStream({name:streamName, remoteMediaElementId:"remoteVideoElementId"});

Итого, были изменены два метода:initplayStream

В результате получили возможность динамически перенаправлять потоки на воспроизведение внужные окна.








}

//New connection

function connect(){


}

//Publish stream




}





}

//Play stream



f.playStream({name:streamName, remoteMediaElementId:"remoteVideoElementId"});

}





}

//Connection Status







}

}

//Connection Status





}

}

//Error


trace(event.info);

}

//Trace


console.log(str);

}

//Get field



return field;

}


Аналогично тестированию видео с одним окном. Разница в том, что сейчас есть дополнительноетекстовое поле, в котором можно задать ID того HTML5-video тега, в который будет производитьсявывод потока. Доступные значения: remoteVideo, remoteVideo2.

1.3.4 Запись потоков

По умолчанию, WebRTC и RTMFP потоки, опубликованные с Streaming-min.html клиентом, будутзаписываться при условии, что запись потоков не выключена в WCS_HOME/conf/flashphoner.properties (см. Web Call Server 5 - Руководство Администратора).

Страница

Для RTMFP-потоковскрипт swfobject.jsэлементы flashVideoWrapper и flashVideoDiv




<!DOCTYPE html>

<html>

<head>















</head>











<div id="flashVideoWrapper" style=" width:320px; height:240px; position: absolute; left: 20px; top: 100px; border: 1px double black;"><div id="flashVideoDiv"></div></div>

<video id="remoteVideo" width="320" height="240" autoplay style="position: absolute; left: 20px; top: 100px; border: 1px double black;"></video>

<video id="localVideo" width="80" height="60" autoplay style="position: absolute; left: 20px; top: 100px;"></video>

</body>

</html>

Скрипт

Чтобы отключить запись потоков с этим клиентом, нужно изменить метод publishStream в скриптеStreaming-min.js.

Было:


Стало:

f.publishStream({name:streamName, record:false});

При значении параметра record установленном в false, опубликованные потоки не будутзаписываться.









var configuration = new Configuration();

configuration.remoteMediaElementId = 'remoteVideo';

configuration.localMediaElementId = 'localVideo';

configuration.elementIdForSWF = "flashVideoDiv";

configuration.pathToSWF = "../../dependencies/flash/MediaManager.swf";

f.init(configuration);

if (webrtcDetectedBrowser) {

document.getElementById('remoteVideo').style.visibility = "visible";

document.getElementById('flashVideoWrapper').style.visibility = "hidden";

document.getElementById('flashVideoDiv').style.visibility = "hidden";

} else {

document.getElementById('remoteVideo').style.visibility = "hidden";

document.getElementById('flashVideoWrapper').style.visibility = "visible";

}

}

//New connection

function connect(){


}

//Publish stream



f.publishStream({name:streamName, record:false});

}





}

//Play stream




}





}

//Connection Status





}

}

//Connection Status








}

}

//Error


trace(event.info);

}

//Trace


console.log(str);

}

//Get field



return field;

}


Процедура публикации и воспроизведения потоков идентична описанной в предыдущем разделе.(Для публикации RTMFP-потока страница Streaming-min.html должна быть открыта не в WebRTC-совместимом браузере, например Internet Explorer.)Записи потоков сохраняются в директорию WCS_HOME/records. После отключения записи в скриптеклиента (и обновления страницы) новые записи не будут создаваться.

IIЧасть



24WCS JavaScript API24

2 WCS JavaScript API

Архитектура

Реализация WCS JavaScript API - это скрипт Flashphoner.js плюс зависимости. WCS JavaScript APIвзаимодействует с Flash, WebRTC и Websocket API браузера. Посредством этих трех технологийweb-клиент взаимодействует с Web Call Server. На рисунке ниже синим цветом показана передачасигнальных данных через Websocket, а красным передача потоковых данных по WebRTC илиFlash RTMFP.

Все сигнальные методы, объекты, события и статусы, которые передаются через Websocketперечислены в документации Web Call Server - Call Flow (Область зеленого цвета надиаграмме). Описание остальных свойств и функций API, которые не участвуют в сетевыхкоммуникациях представлены в настоящем документе.

Зависимости

WCS JavaScript API содержит несколько зависимостей для кроссбраузерной работы состандартными технологиями.

Зависимость

Описание

jquery.js JQuery.

jquery-ui.js JQuery для работы с интерфейсом.

jquery.webso

cket.jsJQuery для работы с вебсокетами.

jquery.json.

jsJQuery для работы с JSON.


25WCS JavaScript API

swfobject.js Позиционирование Flash-объекта на странице.

MediaManager

.swfFlash объект, который реализует Flash Fallback функцию.

Методы

Метод Параметры

Возвращаемое значение

Описание

getInstance void Flashphoner Возвращает singleton инстанс API.

init Configuration

void Инициализировать API.

addListener Event,Listener,Context

void Добавить слушатель события.

Event - Событие.Listener - Функция, которая будут вызываться дляобработки.Context - Ссылка на контекст выполнения. Если неуказан, будет использоваться глобальный контекст.

Примеры: f.addListener(WCSEvent.CallStatusEvent,this.callStatusListener, this); - указан контекстисполнения.f.addListener(WCSEvent.CallStatusEvent,callStatusListener); - глобальный контекстисполнения.

getAccessToAudioAndVideo

String:mediaProvider

void Запрашивает доступ к камере и микрофону уWebRTC или Flash. При этом в случае WebRTCбраузер попросит разрешить использованиекамеры и микрофона, а в случае Flash, будетвыведена Flash Security Panel, которая так жезапросит доступ к камере и микрофону. Еслипользователь разрешил доступ, то видео с егокамеры появится на странице в блоке, указанном внастройках позиционирования InitObject.

getAccessToAudio


void То же самое что и 'getAccessToAudioAndVideo',только для микрофона. Камера не запрашивается.

getVolume void Float: volume Получить уровень звука воспроизводимого потока.Значение в диапазоне [0,1].

setVolume Float:volume

Задать уровень звука воспроизводимого потока.Значение в диапазоне [0,1]

hasAccessToAudio


Boolean В качестве параметра используется строкаWebRTC или Flash.Еcли возвращает false, то аудио не отправляется.Микрофон заглушен.




hasAccessToAudioAndVideo


Boolean В качестве параметра используется строкаWebRTC или Flash.Еcли возвращает false, то аудио и видео неотправляется. Микрофон и камера заглушены.

getStats Получить статистику по входящим и исходящимпотокам, которые работают в данный момент.

getCookie String:name

String: value Получить печеньку по имени.

setCookie String:name,String:value

void Установить печеньку (имя, значение).

mute String:mediaProvider

void Отключает аудио.

unmute String:mediaProvider

void Включает аудио.

muteVideo String:mediaProvider

void Отключает видео

unmuteVideo String:mediaProvider

void Включает видео.

isVideoMuted String:mediaProvider

Boolean Возвращает true, если видео включено.

Объекты

Поле Тип Значение

Описание

Configuration - Глобальные настройки. Если при вызове какого-либо метода API отсутствуютнеобходимые данные, будет предпринята попытка взять эти данные из этого конфигурационногообъекта.

urlServer String Пусто Основной Websocket URL. Пример: ws://192.168.1.5:8080или wss://192.168.1.5:8443. Если этот URL задан и при этомurlFlashServer пуст, то RTMFP URL будет взят по умолчанию:rtmfp://192.168.1.5:8080, т.е. с использованием того же IP-адреса. Если же этот основной URL пуст, то будутиспользоваться настройки urlWsServer и urlFlashServer.

urlWsServer

String Пусто Websocket URL. Пример: ws://192.168.1.5:8080 илиwss://192.168.1.5:8443

urlFlashSe String Пусто RTMFP URL. Пример: rtmfp://192.168.1.5:1935




Описание

rver

sipRegisterRequired

Boolean true Если true, включить SIP-регистрацию.

sipContactParams

String Пусто Строка параметров, которая будет передана в SIPREGISTER заголовке Contact

stunServer String Пусто IP адрес или FQDN STUN-сервера для WebRTC ICE.Рекомендуется оставлять этот параметр пустым. Это ускоритв несколько раз установку WebRTC-соединения.

stripCodecs

String Пусто Разделенный запятой список кодеков, которые нужноисключить из SDP, сформированного на стороне WebRTCклиента.

imdnEnabled

Boolean false Включить поддержку IMDN для переданных и полученныхсообщений.

msgContentType

String text/plain Тип сообщений.

pushLogEnabled

Boolean false Если true, браузерные логи, которые пишутся в консольбраузера будут отправляться и сохраняться на сервере.

localMediaElementId

String Пусто ID элемента <video/> в теле страницы. Этот элемент будетотображать локальное видео, т.е. то видео, котороезахватывается браузером с web-камеры, подключеннойкомпьютеру.

Пример элемента:

<video id="localVideo"

style="width:320px;height:240px; background-

color:grey"></video>

remoteMediaElementId

String Пусто ID элемента <video/> в теле страницы, Этот элемент будетотображать удаленное видео, т.е. то видео, котороеприходит с сервера и будет воспроизводиться в браузере.

Пример элемента:

<video id="remoteVideo"

style="width:320px;height:240px; background-

color:grey"></video>

elementIdForSWF

String Пусто Элемент с указанным идентификатором будет заменен наFlash - SWF объект, в котором будет отображаться FlashSecurity Panel, а так же локальное Flash видео и видео,полученное с сервера по RTMFP. Если элемент не задан, онбудет создан автоматически вместе с блоком для егоразмещения.

videoWidt Int 640 Максимальное разрешение публикуемого видеопотока





Описание

h (ширина в пикселях).

videoHeight

Int 480 Максимальное разрешение публикуемого видеопотока(высота в пикселях).

forceResolution

Boolean false WebRTC-браузер может автоматически понижатьразрешение. Чтобы зафиксировать разрешение выставитеэтот флаг в true.

Если вы не обнаружили в этом описании нужных методов, объектов, событий или статусов, скореевсего они относятся к коммуникационным (call, CallStatusEvent, publishStream, и т.д) и их описаниеесть в документации Web Call Server - Call Flow:

Список методов Call Flow, участвующих в коммуникациях

connectConnectionStatusEventRegistrationStatusEventsendXcapRequestXcapStatusEventsendDtmfcallOnCallEventanswerhangupholdunholdtransferOnTransferEventTransferStatusEventCallStatusEventsendMessageOnMessageEventMessageStatusEventpublishStreamunPublishStreamplayStreamstopStreamStreamStatusEventsubscribeSubscriptionStatusEventOnDataEventDataStatusEventsubmitBugReportBugReportStatusEventpushLogsRecordingStatusEventErrorStatusEventdisconnect



IIIЧасть


31Подключение серверного REST API

3 Подключение серверного REST API

Архитектура

REST API позволяет переопределять параметры, проводить аутентификацию и авторизациювызовов с WCS JavaScript API. Подробнее о REST API и его настройках можно узнать изследующей документации:

Web Call Server - СпецификацияWeb Call Server - Руководство администратораWeb Call Server - Call Flow

По умолчанию REST API обращается к локальному HTTP адресу http://localhost:9091/EchoApp.Этот адрес отдает то что получил. Т.е. работает как 'Echo'.Откройте лог flashphoner_manager.log чтобы увидеть какие данные ходят по REST API.

Пример обмена данными с REST API

Из примера ниже видно, что данные передаются в JSON объекте. Ваше REST API должнопредоставлять данные в таком же формате и в соответствии со спецификацией Web Call Server -Call Flow. Если есть какие-то вопросы по передаваемым данным, вы всегда можете открытьflashphoner_manager.log и увидеть как ходят данные в случае с рабочим примером Phone.html истандартным приложением EchoApp.

16:54:29,197 RECEIVED REST OBJECT <==URL:http://localhost:9091/EchoApp/connectOBJECT:{ "appKey" : "defaultApp", "sessionId" : "/92.127.197.142:63853/101.226.225.55:8080", "sipRegisterRequired" : true, "mediaProviders" : [ "WebRTC" ], "useSelfSigned" : false}16:54:29,315 SEND REST OBJECT ==>URL:http://localhost:9091/EchoApp/ConnectionStatusEvent

http://localhost:9091/EchoApp



32Подключение серверного REST API32

OBJECT:{ "appKey" : "defaultApp", "sessionId" : "/92.127.197.142:63853/101.226.225.55:8080", "sipRegisterRequired" : true, "mediaProviders" : [ "WebRTC" ], "useSelfSigned" : false, "authToken" : "/92.127.197.142:63853/101.226.225.55:8080", "status" : "ESTABLISHED"}16:54:29,327 INFO RECEIVED REST OBJECT <==URL:http://localhost:9091/EchoApp/ConnectionStatusEventOBJECT:{ "appKey" : "defaultApp", "sessionId" : "/92.127.197.142:63853/101.226.225.55:8080", "sipRegisterRequired" : true, "mediaProviders" : [ "WebRTC" ], "useSelfSigned" : false, "authToken" : "/92.127.197.142:63853/101.226.225.55:8080", "status" : "ESTABLISHED"}

Подключение

Для подключения собственного REST API, зайдите в Интерфейс командной строки WCS сервера ивыполните команду:

update app defaultApp http://my-web-server.com/MyRestApp

, где my-web-server.com - это адрес вашего web-сервера, а MyRestApp - это путь, по которомурасположен ваш REST / HTTP / HTTPS интерфейс.

Web Call Server будет вызывать следующие URL:

http://my-web-server.com/MyRestApp/connecthttp://my-web-server.com/MyRestApp/ConnectionStatusEventhttp://my-web-server.com/MyRestApp/RegistrationStatusEventhttp://my-web-server.com/MyRestApp/callhttp://my-web-server.com/MyRestApp/OnCallEventhttp://my-web-server.com/MyRestApp/CallStatusEvent

и т.д.

Ваш web-сервер должен отвечать по этим адресам и предоставлять корректные JSON объекты.Кроме этого вы можете запретить операцию, вернув HTTP статус 403 FORBIDDEN.Вам не обязательно реализовывать все методы. Ненужные методы можно отключить и они небудут вызываться. Используйте для этого команды remove app-rest-methods и add app-rest-method. См. Web Call Server - Руководство администратора.

http://my-web-server.com/MyRestApp

http://my-web-server.com/MyRestApp/connect

http://my-web-server.com/MyRestApp/ConnectionStatusEvent

http://my-web-server.com/MyRestApp/RegistrationStatusEvent

http://my-web-server.com/MyRestApp/call

http://my-web-server.com/MyRestApp/OnCallEvent

http://my-web-server.com/MyRestApp/CallStatusEvent



3.1 Аутентификация коннекта Web-сервером

JSON объект

Воспользуйтесь предыдущим разделом чтобы настроить один метод REST API 'connect'.Предположим, вы настроили приложение на адрес: http://localhost/defaultApp.Т.е. WCS будет обращаться к локальному Web-серверу, например Apache и получать от негоJSON - ответ.

Т.к. мы используем только метод 'connect', ваш Web-сервер должен корректно обслуживать такиезапросы: http://localhost/defaultApp/connect.

Все что нужно сделать вашему коду на стороне Web-сервера в данном случае - это отдать JSONобъект:

{ "sipRegisterRequired" : true, "sipLogin" : "mySipLogin", "sipAuthenticationName" : "mysipAuthenticationName", "sipDomain" : "mySipDomain", "sipOutboundProxy" : "sipOutboundProxy", "sipPassword" : "mySipPassword", "sipPort" : "mySipPort" }

Объект содержит SIP-данные, которые будут использованы для регистрации на SIP сервере. Приэтом с клиента передавать эти данные не нужно, т.к. их отдает REST API.

Код на стороне web-клиента

//The code does not contain any SIP parameters

function connect(){

f.connect({urlServer:'ws://192.168.1.5:8080',appKey:'defaultApp'});

}

Код на стороне Web-сервера

Покажем как работает REST API на примере сервера Apache.

1. Добавим поддержку JSON. Это нужно для того чтобы при обращении к URL типа .json, серверотдавал заголовок: Content-Type: application/json. В противном случае WCS не сможет разобратьJSON - ответы сервера. Для этого в конфигурационном файле /etc/httpd.conf добавим:

AddType application/json .json

2. Настроим mod rewrite чтобы прописать URL в соответствии с названиями методов REST API.Для этого включим .htaccess в /etc/httpd.conf:

<Directory>

Options FollowSymLinks

AllowOverride All

</Directory>

3. Следующим шагом настроим перезапись URL-ов в директории сайта. Файл .htaccess:

http://localhost/defaultApp

http://localhost/defaultApp/connect




Options +FollowSymLinksRewriteEngine OnRewriteRule d̂efaultApp/connect /connect.json [QSA,L]RewriteRule d̂efaultApp/ConnectionStatusEvent /ConnectionStatusEvent.json [QSA,L]RewriteRule d̂efaultApp/RegistrationStatusEvent /RegistrationStatusEvent.json [QSA,L]

Здесь всего три правила, которые говорят отдавать .json файлы при обращении посоответствующим URL-ам.

Например:

http://flashphoner.com/defaultApp/connect >>> http://flashphoner.com/connect.jsonhttp://flashphoner.com/defaultApp/ConnectionStatusEvent >>> http://flashphoner.com/ConnectionStatusEvent.jsonhttp://flashphoner.com/defaultApp/RegistrationStatusEvent >>> http://flashphoner.com/RegistrationStatusEvent.json

4. Содержание .json файлов

connect.json - содержит информацию о SIP аккаунте

Пример:

{

"sipRegisterRequired" : true,

"sipLogin" : "WCS1",

"sipAuthenticationName" : "WCS1",

"sipDomain" : "sip.org",

"sipOutboundProxy" : "sip.org",

"sipPassword" : "12345",

"sipPort" : 5060

}

ConnectionStatusEvent.json - пустой JSON объект

{}

RegistrationStatusEvent.json - пустой JSON объект

{}

Страница



<!DOCTYPE html>

<html>

<head>















</head>


<body>



</body>

</html>

Скрипт





f.addListener(WCSEvent.RegistrationStatusEvent, registrationStatusListener);

f.init({});

//New connection

function connect(){

f.connect({urlServer:'ws://192.168.1.5:8080',appKey:'defaultApp'});

}

//Connection Status


trace(event.info);



}

}

//Registration Status

function registrationStatusListener(event) {

trace(event.info);

}

//Error


trace(event.info);

}

//Trace





console.log(str);

}

Таким образом страница устанавливает соединение с сервером и решистрируется на SIP-сервере c помощью SIP-данных, предоставленных через REST API.

Запрещение доступа на стороне Web-сервера

Предположим, Web-сервер решил не давать доступ этому клиенту. В этом случае Web-сервердолжен вернуть статус ошибки, например 403 FORBIDDEN.Используем снова mod rewrite для того чтобы вернуть статус ошибки при обращении к методуREST API - 'connect'. Пропишем в .htaccess следующее:

RewriteRule d̂efaultApp/connect - [F]

Это заставит Apache отдавать 403 FORBIDDEN, например при запросе: http://flashphoner.com/defaultApp/connect

Снова тестируем и пытаемся присоединиться к серверу. Как и ожидалось, коннект не проходит.

В Websocket-фреймах видим: {"message":"fail","data":[{"status":"FAILED","info":"Forbidden","apiMethod":"ConnectionStatusEvent"}]}. Вотладочной конслои браузера видим лог 'Forbidden'.Мы получили на клиента событие ConnectionStatusEvent со статусом FAILED и дополнительнойинформацией Forbidden. Аутентификация не прошла, что и требовалось сделать.

Динамические скрипты

Как видно из приведенного в этом разделе материала, организовать REST API достаточно просто,для этого ваш Web-сервер всего лишь должен предоставить нужные URL-ы, которые отдают JSONобъекты. В примерах мы использовали статические файлы с расширением .json. Ничего немешает вам использовать динамические PHP скрипты и любые другие web-технологии. Главноеэто отдавать заголовок Content-Type: application/json. Это умеют все серверные скрипты, такие какPHP, JSP, ASP, Rails, CGI, и т.д. Список доступых REST-методов и описание их работы можнонайти в документации Web Call Server - Call Flow.

3.2 Переопределение параметров

С помощью REST API можно переопределить данные, которые передаются в методах API. Всепередаваемые данные кроме контекста (nodeId, sessionId, appKey) могут быть переопределеныWeb-сервером. Документация Web Call Server - Call Flow делит методы REST API на три типа:

Прямые вызовы с WCS JavaScript API (Метод 'call')События (CallStatusEvent)Входящие звонки, сообщения и трансферы (OnCallEvent)

Когда происходит прямой вызов, например методом call({callee: "Alice"}), Web-сервер можетпереопределить параметры такого вызова, например на {callee:"Bob"} и в результате на SIP пойдетисходящий INVITE-запрос to:"Bob".



В случае события, например CallStatusEvent, мы опять же можем переопределить данные статусазвонка. Например добавить дополнительную информацию в поле 'info'. {info:"info"} >>> {info:"Newinfo"}. Далее это измененное событие будет отправлено Web-клиенту.

И наконец, в случае обработки входящего сообщения мы можем подменить текст сообщения,наприер {body:"Hello"} >>> {body:"Hello / Flashphoner Message"}. Далее это измененное входящеесобытие будет отправлено Web-клиенту.




Параметры, доступные для переопределения перечислены в документации Web Call Server - CallFlow.

3.3 Тестирование Click-to-Call с взятием номера по REST API

Зашита и динамическое проставление номера

Переопределение параметров может быть полезно для реализации такой функции как 'Click-To-Call'. Это звонок с web-страницы в один клик по ссылке или кнопке. Предположим, что по каким-топричинам мы не хотели бы отображать номер телефона на web-странице. Например, планируемподставлять номер телефона динамически в зависимости от рабочего времени. В дневное времяпринимаем звонки на один номер телефона, а в ночное на второй.

В этом случае воспользуемся переопределением метода 'call'.

На стороне WCS JavaScript API функция звонка выглядит так:

//New call

function call(to){

var call = new Call();

call.callee = to;

f.call(call);

}

//Call to Alicecall("Alice")

Создание переопределяющего REST-метода

Создадим на web-сервере файл call.json и будем отдавать его по адресу /defaultApp/call так же какмы делали до этого при Аутентификации коннекта Web-сервером.

Файл call.json - содержит только одно поле: "callee". Это поле мы хотели бы переопределить назначение "Bob".



Пример:

{

"callee" : "Bob"

}

По умолчанию переопределение отключено. Нам нужно явно указать на то, что мы собираемсяпереопределять поле 'callee' метода 'call'. Для этого при установке соединения в методе connectнужно передать объект RestClientConfig с такой настройкой. Подробнее об этом объекте можноузнать из Web Call Server - Call Flow. RestClientConfig может содержать настройкипереопределения и обработки ошибок для одного или нескольких методов.

Настройки RestClientConfig

Настройки RestClientConfig добавляем при коннекте.

connect.json - содержит информацию о SIP аккаунте, а так же объект restClientConfig.

Пример:

{

"sipRegisterRequired": true,

"sipLogin": "WCS1",

"sipAuthenticationName": "WCS1",

"sipDomain": "sip.org",

"sipOutboundProxy": "sip.org",

"sipPassword": "12345",

"sipPort": 5060,

"restClientConfig": {

"call": {

"restExclude": "",

"clientExclude": "",

"restOnError": "FAIL",

"restPolicy": "OVERWRITE",

"restOverwrite": "callee"

}

}

}

Эта конфигурация говорит, что для метода 'call' будут использоваться следующие настройки:1. restExclude - параметры от WCS к Web-серверу будут передаваться в полном наборе.2. clientExclude - не используется, т.к. метод 'call' у клиента не вызывается.3. restOnError - в случае ошибки или статуса ошибки со стороны Web-сервера, прекращать звоноки отправлять на клиента сообщение об ошибке.4. restPolicy - перезаписывать поля в списке restOverwrite.5. restOverwrite - перезаписывать только поле "callee". Остальные поля не перезаписывать.

Список файлов

C этими настройками удалось успешно провести звонок и переопределить вызываемый номер.Работа с файлами .htaccess и .json была подробно описана в разделе Аутентификация коннектаWeb-сервером.

1. .htaccess

Options +FollowSymLinks




RewriteEngine OnRewriteRule d̂efaultApp/connect /connect.json [QSA,L]RewriteRule d̂efaultApp/call /call.json [QSA,L]RewriteRule d̂efaultApp/ConnectionStatusEvent /ConnectionStatusEvent.json [QSA,L]RewriteRule d̂efaultApp/RegistrationStatusEvent /RegistrationStatusEvent.json [QSA,L]RewriteRule d̂efaultApp/CallStatusEvent /CallStatusEvent.json

2. connect.json

{

"sipRegisterRequired": true,

"sipLogin": "WCS1",

"sipAuthenticationName": "WCS1",

"sipDomain": "sip.org",

"sipOutboundProxy": "sip.org",

"sipPassword": "12345",

"sipPort": 5060,

"restClientConfig": {

"call": {

"restExclude": "",

"clientExclude": "",

"restOnError": "FAIL",

"restPolicy": "OVERWRITE",

"restOverwrite": "callee"

}

}

}

3. call.json

{"callee" : "Bob"}

4. ConnectionStatusEvent.json, RegistrationStatusEvent.json, CallStatusEvent.json - пустыевспомогательные статусы:

{}

IVЧасть



42Обмен данными42

4 Обмен данными

4.1 WebRTC-конференция как пример обмена данными

Хорошим примером приложения с необходимостью кастомного обмена данными через Websocketявляется WebRTC - видеоконференция из трех и более участников. Для того чтобы установитьсвязь между двумя и более участниками, участникам потребуется произвести обменинформацией. Каждый участник должен знать, какие потоки ему нужно воспроизвести.

На схеме показана видеоконференция из трех участников. Красным цветом показаны потоки,которые идут на сервер, а зеленым потоки, которые браузер забирает с сервера и воспроизводит ввидео-окне.

Таким образом, каждый пользователь должен получить два потока (например User1 долженполучить stream_user2 и stream_user3) и приступить к воспроизведению.

В итоге должна быть реализована следующая последовательность действий:


43Обмен данными

1. User1 публикует поток stream_user1.2. Web-сервер уведомляет User2 и User3 о том, что поток stream_user1 опубликован и его можно

воспроизводить.3. User2 публикует поток stream_user2.4. Web-сервер уведомляет User1 и User3 о том, что поток stream_user2 опубликован и его можно

воспроизводить.5. User3 публикует поток.6. Web-сервер уведомляет User1 и User2 о том, что поток stream_user3 опубликован и его можно

воспроизводить.7. User1 воспроизводит потоки stream_user2 и stream_user3.8. User2 воспроизводит потоки stream_user1 и stream_user3.9. User3 воспроизводит потоки stream_user1 и stream_user2.10.User1 останавливает публикацию потока stream_user1.11.Web-сервер уведомляет User2 и User3 о том, что поток stream_user1 остановлен и от него

нужно отключиться.12.Web-сервер уведомляет User1 и User3 о том, что поток stream_user2 остановлен и от него

нужно отключиться.13.Web-сервер уведомляет User1 и User2 о том, что поток stream_user3 остановлен и от него

нужно отключиться.14.User1, User2, User3 прекращают воспроизведение потока.15.Исходное состояние.

Исходный код WebRTC видео конференции доступен для скачивания здесь.

Шаги 1,7,8,9,10,14 относятся к публикации и воспроизведению WebRTC видео потока и былирассмотрены в разделе WebRTC-потоковое видео.

Остальные шаги относятся к обмену данных. Web-сервер уведомляет User1 и User2 - этоозначает, что Web-сервер формирует кастомные данные и отправляет их пользователям User1 иUser2, подключенным к WCS серверу по протоколу Websocket.

Все что требуется от Web-сервера - это осущеаствить обратный вызов в сторону клиента. В этомвызове нужно передать следующую информацию:

Какой поток был опубликованКаким пользователем был опубликован этот поток.

Этой информации web-клиенту будет достаточно чтобы начать воспроизведение потока иотобразить видео в нужном окне (зная имя создателя потока).

4.2 Обратный вызов через REST API

Получение координат пользователя

Для осуществления обратного вызова нужно понимать:куда отправлять данные (REST Callback URL)когда отправлять данные (Событие StreamStatusEvent PUBLISHING)кому отправлять данные (nodeId, sessionId, appKey)какие данные отправлять (operationId, payload)

Когда пользователь публикует поток, WCS сервер вызывает у Web-сервера два REST метода:publishStream. Пример:

URL:http://localhost:9091/EchoApp/publishStream

http://flashphoner.com/downloads/builds/flashphoner_client/wcs_api/




OBJECT:{ "nodeId" : "[email protected]", "appKey" : "defaultApp", "sessionId" : "/92.127.221.83:64463/192.168.1.5:8080", "mediaSessionId" : "7779dd39-0e30-4f15", "name" : "streamName", "published" : true, "hasVideo" : true, "status" : "NEW", "sdp" : "SDP here"}

На этом этапе Web-сервер получает три параметра контекста:

"nodeId" : "[email protected]", "appKey" : "defaultApp", "sessionId" : "/92.127.221.83:64463/192.168.1.5:8080"

Эти три параметра однозначно идентифицируют сессию пользователя, подключенного к WCS-серверу и являются "координатами", по которым нужно осуществлять отправку данных этомупользователю.Здесь не приводится серверный код, его вам нужно будет реализовать самостоятельно, напримерна PHP.

Поллучение триггерного события

Триггером по которому нужно уведомлять пользователей о новом видео потоке является событиеStreamStatusEvent status=PUBLISHING. Это событие говорит о том, что поток успешноопубликован и в данный момент видео отправляется на сервер. Пример REST:

URL:http://localhost:9091/EchoApp/StreamStatusEventOBJECT:{ "nodeId" : "[email protected]", "appKey" : "defaultApp", "sessionId" : "/92.127.221.83:64463/192.168.1.5:8080", "mediaSessionId" : "7779dd39-0e30-4f15", "name" : "streamName", "published" : true, "hasVideo" : true, "status" : "PUBLISHING", "sdp" : "SDP here"}

Здесь доступны те же праметры контекста: nodeId, sessionId, appKey. Они передаются при каждомвызове REST-метода со стороны WCS-сервера.Таким образом Web-сервер имеет "координаты" пользователя для отправки данных и событие покоторому нужно произвести отправку.

Вызов REST Callback метода sendData



Для отправки данных Web-сервер должен вызвать REST-метод /RESTCallback/sendData у WCS-сервера. При вызове нужно передать JSON объект, в котором указаны координаты пользователя, атак же сами данные.

{ "nodeId": "[email protected]", "sessionId": "/92.127.221.83:64463/192.168.1.5:8080", "appKey": "defaultApp", "operationId": "customMessage", "payload": { "value": "Hello!" }}

Обратите внимание на объект: "payload" несущий текст сообщения. В нем могут храниться любыеданные.

Прием данных на стороне Web-клиента

Для приема данных на стороне клиента используется событие OnDataEvent. Событие будетсодержать operationId и payload-объект.Остается только открыть этот объект и убедиться, что внутри значение value="Hello!".

function onDataEventListener(event){var operationId = event.operationId;var payload = event.payload;

AssertEquals(payload.value,"Hello!");}

4.3 Обратный вызов - эмуляция из REST Console, примеры

Страница

Это максимально-упрощенная страница для WebRTC-конференции из трех пользователей.Здесь есть два HTML5 видео окна ID=user1 и ID=user2, в которых должно быть размещено видеоучастников.Слева окно, в котором отображается собственное видео - localVideo.




<!DOCTYPE html>

<html>

<head>













<script type="text/javascript" src="Conference-min.js"></script>

</head>



<h1>Conference - User</h1>







<table>

<tr>

<td>My Video</td>

<td>User 1</td>

<td>User 2</td>

</tr>

<tr>


<td><video id="user1" style="width:320px;height:240px; background-color:grey"></video></td>

<td><video id="user2" style="width:320px;height:240px; background-color:grey"></video></td>

</tr>

</table>

</body>

</html>

Скрипт

Код отличается от обычного тем, что содержит обработчик события OnDataEvent. Основная егоработа заключается в следующем.Если приходит обратный вызов с информацией о том что поток опубликован(streamPublishedByUser), то воспроизводим этот поток. Причем поток будем воспроизводить в томокне, ID которого соответствует полюpayload.publisher, пришедшему с сервера. Т.е. сервер командует: воспроизвести поток сзаданным именем, созданный пользователем 'user' и web-клиент выполняет эту команду в данномкуске кода.

if (operationId=="streamPublishedByUser"){

//Here we use elementId as second parameter. I.e. user1_elementId.

playStream(stream, publisher);

} else if (operationId == "streamUnpublishedByUser"){

stopStream(stream);



}

В остальном код не отличается от того, что использовался в предыдущих примерах потоковоговидео.










f.addListener(WCSEvent.OnDataEvent, onDataEventListener);


}

//New connection

function connect(){


}

//Publish stream



f.publishStream({name:streamName});

}





}

//Play stream

function playStream(streamName, elementId){

f.playStream({name:streamName, remoteMediaElementId:elementId});

}





}

//Connection Status





}

}

//Connection Status





}

}

/**

* We receive data from server. If the server say that stream being published and ready, we start playback this stream

* @param event

*/

function onDataEventListener(event){



var operationId = event.operationId;

var payload = event.payload;

//stream name

var stream = payload.stream;

//stream creator

var publisher = payload.publisher;

trace("operationId: "+operationId+" stream: "+stream+" publisher: "+publisher);

if (operationId=="streamPublishedByUser"){

//Here we use elementId as second parameter. I.e. user1_elementId.

playStream(stream, publisher);

} else if (operationId == "streamUnpublishedByUser"){

stopStream(stream);

}

}

//Error


trace(event.info);

}

//Trace


console.log(str);

}

//Get field



return field;

}

Эмуляция вызова со стороны Web-сервера

Для эмуляции мы использовали REST Console, которая позволяет отправлять произвольные JSON-запросы на сервер.В продакшен-системе эти запросы должны идти от Web-сервера.

Для отправки запроса нужно заполнить всего три поля и нажать 'Send':Request URIRequest MethodRequest Payload

В результате у WCS сервера вызывается callback-метод sendData и web-клиент получает нужноесобытие, на основе которого он может начать воспроизведение видео.




Отображение на клиенте

Documents

Web Call Server - Developer Guide - Flashphoner© 2017 Flashphoner, LLC Web Call Server - Руководство Разработчика. 2 Web Call Server - Руководство