Table of Contents |
---|
Пример плеера
Данный плеер может использоваться для воспроизведения любого типа потока с Web Call Server:
- RTSP
- WebRTC
- RTMPRTMFP
- SIP
Ниже представлен пример воспроизведения RTSP-потока в web-плеере.
Код примера
Код данного примера находится на сервере по следующему пути:
...
Тестировать данный пример можно по следующему адресу:
https://host:8888/client2/examples/demo/streaming/player/player.html
Здесь host - адрес вашего WCS-сервера.
...
Для разбора кода возьмем версию файла player.js с хешем cf0daabc6b86e21d5a2f9e4605366c8b7f0d27eb 7fff01f, которая находится здесь и доступна для
скачивания в соответствующей сборке 2.0.3219.18.1894.
1. Инициализация API.
Code Block | ||||
---|---|---|---|---|
| ||||
Flashphoner.init({flashMediaProviderSwfLocation receiverLocation: '../../dependencies/websocket-player/WSReceiver2.js', decoderLocation: '../../media-provider.swf'/dependencies/websocket-player/video-worker2.js', preferredMediaProvider: mediaProvider }); |
2. Подключение к серверу.
Flashphoner.createSession() код code
Code Block | ||||
---|---|---|---|---|
| ||||
Flashphoner.createSession({urlServer: url}).on(SESSION_STATUS.ESTABLISHED, function(session){ setStatus(session.status()); //session connected, start playback playStream(session);... }).on(SESSION_STATUS.DISCONNECTED, function(){ setStatus(SESSION_STATUS.DISCONNECTED); onStopped();... }).on(SESSION_STATUS.FAILED, function(){ setStatus(SESSION_STATUS.FAILED); onStopped();... }); |
3. Получение от сервера события, подтверждающего успешное соединение
SESSION_STATUS.ConnectionStatusEvent ESTABLISHED код code
Code Block | ||||
---|---|---|---|---|
| ||||
Flashphoner.createSession({urlServer: url}).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(){ ... }); |
4. Воспроизведение видеопотока
Session.createStream(), Stream.play() code
Code Block | ||||
---|---|---|---|---|
| ||||
stream = session.createStream(options).on(STREAM_STATUS.PENDING, function (stream) { ... }); stream.play() |
...
; |
При создании передается передаются:
- streamName - имя видеопотока
...
- remoteVideo -
div
...
- элемент, в котором будет отображаться видео
...
- разрешение, к которому должна быть транскодирована картинка
- unmutePlayOnStart: false - отключает автоматическое воспроизведение звука при autoplay для соблюдения требований браузеров
Code Block | ||||
---|---|---|---|---|
| ||||
session.createStream(var options = { name: streamName, display: remoteVideo, flashShowFullScreenButton: true }; if (Flashphoner.getMediaProviders()[0] === "MSE" && mseCutByIFrameOnly) { options.mediaConnectionConstraints = { cutByIFrameOnly: mseCutByIFrameOnly } } if (resolution_for_wsplayer) { options.playWidth = resolution_for_wsplayer.playWidth; options.playHeight = resolution_for_wsplayer.playHeight; } else if (resolution) { options.playWidth = resolution.split("x").play();[0]; options.playHeight = resolution.split("x")[1]; } if (autoplay) { options.unmutePlayOnStart = false; } |
5. Получение от сервера события, подтверждающего успешное воспроизведение потока
StreamStatusEvent PLAYING кодSTREAM_STATUS.PLAYING code
Code Block | ||||
---|---|---|---|---|
| ||||
stream = session.createStream(options).on(STREAM_STATUS.PENDING, function (stream) { name: streamName, ... }).on(STREAM_STATUS.PLAYING, function (stream) { $("#preloader").hide(); setStatus(stream.status()); display: remoteVideo onStarted(stream); }).on(STREAM_STATUS.PLAYINGSTOPPED, function(stream) { ... document.getElementById(stream.id()).addEventListener('resize', function(event)}).on(STREAM_STATUS.FAILED, function() { ... }); stream.play(); |
6. Обработка события о недостаточной пропускной способности канала
STREAM_EVENT, STREAM_EVENT_TYPE.NOT_ENOUGH_BANDWIDTH code
Code Block | ||||
---|---|---|---|---|
| ||||
}).on(STREAM_EVENT, function(streamEvent){ if (STREAM_EVENT_TYPE.NOT_ENOUGH_BANDWIDTH === streamEvent.type) { resizeVideo(event.target); var info = streamEvent.payload.info.split("/"); var remoteBitrate = info[0]; }); setStatus(stream.status()); onStarted(streamvar networkBandwidth = info[1]; console.log("Not enough bandwidth, consider using lower video resolution or bitrate. Bandwidth " + (Math.round(networkBandwidth / 1000)) + " bitrate " + (Math.round(remoteBitrate / 1000))); }).on } else if (STREAM_EVENT_STATUS.STOPPED, function(TYPE.RESIZE === streamEvent.type) { ... } }); |
7. Обработка события об изменении размера картинки потока
STREAM_EVENT, STREAM_EVENT_TYPE.RESIZE code
Code Block | ||||
---|---|---|---|---|
| ||||
}).on(STREAM_STATUS.FAILEDEVENT, function(streamEvent) { ... } else if (STREAM_EVENT_TYPE.RESIZE === streamEvent.type).play(); |
...
{
console.log("New video size: " + streamEvent.payload.streamerVideoWidth + "x" + streamEvent.payload.streamerVideoHeight);
}
}); |
8. Остановка воспроизведения видеопотока.
Code Block | ||||
---|---|---|---|---|
| ||||
function onStarted(stream) {
$("#playBtn").text("Stop").off('click').click(function(){
$(this).prop('disabled', true);
stream.stop();
}).prop('disabled', false);
...
} |
79. Получение от сервера события, подтверждающего успешную остановку воспроизведения потока
StreamStatusEvent STOPPED кодSTREAM_STATUS.STOPPED code
Code Block | ||||
---|---|---|---|---|
| ||||
stream = session.createStream(options).on(STREAM_STATUS.PENDING, function (stream) { name: streamName, ... }).on(STREAM_STATUS.STOPPED, function () { $("#preloader").hide(); setStatus(STREAM_STATUS.STOPPED); display: remoteVideo onStopped(); }).on(STREAM_STATUS.PLAYINGFAILED, function(stream) { ... }).play(); |
10. Регулировка громкости воспроизведения
Stream.unmuteRemoteAudio()
...
, Stream.setVolume() code
Code Block | ||||
---|---|---|---|---|
| ||||
$("#volumeControl").slider({ range: "min", min: 0, max: 100, value: currentVolumeValue, step: 10, animate: true, slide: function(event, ui) { //WCS-2375. fixed autoplay in ios safari setStatus(STREAM_STATUS.STOPPED) if (stream.isRemoteAudioMuted()) { stream.unmuteRemoteAudio(); } currentVolumeValue = ui.value; onStopped( stream.setVolume(currentVolumeValue); } }).on(STREAM_STATUS.FAILED, function() { ... }).play();slider("disable"); |
11. Автозапуск воспроизведения при загрузке страницы
Code Block | ||||
---|---|---|---|---|
| ||||
if (autoplay) {
// We can start autoplay with muted audio only, so set volume slider to 0 #WCS-2425
$("#volumeControl").slider('value', 0);
$("#playBtn").click();
} |