...
Для разбора кода возьмем версию файла player.js с хешем c306c1bbf49bfcbd8e24be927ae95f63b7dbaaba66cc393, которая находится здесь и доступна для
скачивания в соответствующей сборке 0.5.28.2753.2747133.
1. Инициализация API.
Code Block | ||||
---|---|---|---|---|
| ||||
Flashphoner.init({ flashMediaProviderSwfLocation: '../../../../media-provider.swf', receiverLocation: '../../dependencies/websocket-player/WSReceiver2.js', decoderLocation: '../../dependencies/websocket-player/video-worker2.js', preferredMediaProviders: mediaProviders && mediaProviders !== "" ? mediaProviders.split(','): [] }); |
...
Flashphoner.createSession() код code
Методу createSession() передаются параметры:
- urlServer - URL WCS-сервера
- mediaOptions - параметры подключения к серверу через TURN-сервер
Code Block | ||||
---|---|---|---|---|
| ||||
var mediaOptions = {"iceServers": [{'url': 'turn:turn.flashphoner.com:443?transport=tcp', 'username': 'flashphoner', 'credential': 'coM77EMrV7Cwhyan'}]}; Flashphoner.createSession({urlServer: urlServer, mediaOptions: mediaOptions}).on(SESSION_STATUS.ESTABLISHED, function (session) { ... }); |
3. Получение от сервера события, подтверждающего успешное соединение.
ConnectionStatusEvent ESTABLISHED кодESTABLISHED code
Code Block | ||||
---|---|---|---|---|
| ||||
Flashphoner.createSession({urlServer: urlServer, mediaOptions: mediaOptions}).on(SESSION_STATUS.ESTABLISHED, function (session) { setStatus(session.status()); //session connected, start playback playStream(session); }).on(SESSION_STATUS.DISCONNECTED, function () { ... }).on(SESSION_STATUS.FAILED, function () { ... }); |
...
session.createStream(), play() код code
В метод createStream передаются:
...
StreamStatusEvent PENDING код code
В обработчике данного события имитируется щелчок мыши по движку громкости, а также при необходимости размер видео масштабируется под размер окна плеера
Code Block | ||||
---|---|---|---|---|
| ||||
stream = session.createStream(options).on(STREAM_STATUS.PENDING, function(stream) { var video = document.getElementById(stream.id()); if (!video.hasListeners) { video.hasListeners = true; video.addEventListener('playing', function () { $("#preloader").hide(); if (autoplay && stream.isRemoteAudioMuted()) { //WCS-1698. if autoplay = true, then set the volume slider to 0. When you first click on the slider or icon, sound turn on. https://goo.gl/7K7WLu $('.volume').click(); $('.volume').bind('click', volumeEvent); $('.volume-range-block').bind('mousedown', volumeEvent); } if ($('.volume').hasClass('volume-none') && !stream.isRemoteAudioMuted()) { $('.volume').click(); } }); video.addEventListener('resize', function (event) { var streamResolution = stream.videoResolution(); if (Object.keys(streamResolution).length === 0) { resizeVideo(event.target); } else { // Change aspect ratio to prevent video stretching var ratio = streamResolution.width / streamResolution.height; var newHeight = Math.floor(options.playWidth / ratio); resizeVideo(event.target, options.playWidth, newHeight); } }); } }).on(STREAM_STATUS.PLAYING, function (stream) { ... }).on(STREAM_STATUS.STOPPED, function () { ... }).on(STREAM_STATUS.FAILED, function () { ... }).on(STREAM_STATUS.NOT_ENOUGH_BANDWIDTH, function (stream) { ... }); stream.play(); |
...
StreamStatusEvent PLAYING код code
Code Block | ||||
---|---|---|---|---|
| ||||
stream = session.createStream(options).on(STREAM_STATUS.PENDING, function(stream) { ... }).on(STREAM_STATUS.PLAYING, function (stream) { setStatus(stream.status()); onStarted(stream); }).on(STREAM_STATUS.STOPPED, function () { ... }).on(STREAM_STATUS.FAILED, function () { ... }).on(STREAM_STATUS.NOT_ENOUGH_BANDWIDTH, function (stream) { ... }); stream.play(); |
7. Остановка воспроизведения видеопотока.
Code Block | ||||
---|---|---|---|---|
| ||||
$that.find('.play-pause').bind('click', function () { // If playing, etc, change classes to show pause or play button if (!$(this).prop('disabled')) { if (stopped) { ... } else { if (stream) { stream.stop(); } ... } } }); |
...
StreamStatusEvent STOPPED код code
Code Block | ||||
---|---|---|---|---|
| ||||
stream = session.createStream(options).on(STREAM_STATUS.PENDING, function(stream) { ... }).on(STREAM_STATUS.PLAYING, function (stream) { ... }).on(STREAM_STATUS.STOPPED, function () { setStatus(STREAM_STATUS.STOPPED); onStopped(); }).on(STREAM_STATUS.FAILED, function () { ... }).on(STREAM_STATUS.NOT_ENOUGH_BANDWIDTH, function (stream) { ... }); stream.play(); |