Web SDK 2.0 - RU
Space shortcuts
Page tree

Versions Compared

Old Version 2

changes.mady.by.user Flashphoner

Saved on

compared with

New Version Current

changes.mady.by.user admin

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents

Пример, демонстрирующий получение снапшота опубликованного потока на стороне сервера

В данном примере показано, как получить снапшот потока, опубликованного на Web Call Server., снятый на стороне сервера

На скриншоте ниже был получен снапшот публикуемого потока.

Image RemovedImage Added

После начала публикации видео с камеры воспроизводится в 'Local' элементе слева.
После клика на кнопке 'Take a snapshot' запрашивается снапшот, который в случае успешного получения будет отображен в 'Snapshot' элементе справа.

Код примера

Код данного примера находится на WCS-сервере по следующему пути:

...

Тестировать данный пример можно по следующему адресу:

https://host:8888/client2/examples/demo/streaming/stream-snapshot/stream-snapshot.html

Здесь host - адрес WCS-сервера.

Работа с кодом примера

Для разбора кода возьмем версию файла stream-snapshot.js с хешем 6f0eb5fa1576abc0e4008d52768af56977c7ed617fff01f, которая находится здесь и доступна для скачивания в соответствующей сборке 2.0.5.15.1977219.

1. Инициализация API.

Flashphoner.init() код code

Code Block
languagejs
themeRDark
Flashphoner.init({flashMediaProviderSwfLocation: '../../../../media-provider.swf'});

2. Подключение к серверу.

Flashphoner.createSession() код code

Code Block
languagejs
themeRDark
Flashphoner.createSession({urlServer: url}).on(SESSION_STATUS.ESTABLISHED, function(session){
//session  connected, start streaming
startStreaming(session);
...
}).on(SESSION_STATUS.DISCONNECTED, function(){
setStatus(SESSION_STATUS.DISCONNECTED);
$('#url').prop('disabled', false);
onUnpublished();    ...
}).on(SESSION_STATUS.FAILED, function(){
setStatus(SESSION_STATUS.FAILED);
$('#url').prop('disabled', false);
onUnpublished();
    ...
});

3. Получение от сервера события, подтверждающего успешное соединение

SESSION_STATUS.ConnectionStatusEvent ESTABLISHED код code

Code Block
languagejs
themeRDark
Flashphoner.createSession({urlServer: url}).on(SESSION_STATUS.ESTABLISHED, function(session){
    //session connected, start streaming
    startStreaming(session);
}).on(SESSION_STATUS.DISCONNECTED, function(){
setStatus(SESSION_STATUS.DISCONNECTED);
$('#url').prop('disabled', false);
onUnpublished();
    ...
}).on(SESSION_STATUS.FAILED, function(){
setStatus(SESSION_STATUS.FAILED);
$('#url').prop('disabled', false);
onUnpublished();    ...
});

4. Публикация видеопотока.

sessionSession.createStream(), Stream.publish() код code

При создании потока передаются параметры:

  • streamName - имя видеопотока
  • localVideo - div-  элемент, в котором будет отображаться видео с камеры
Code Block
languagejs
themeRDark
session.createStream({
    name: streamName,
    display: localVideo,
    cacheLocalResources: true,
    receiveVideo: false,
    receiveAudio: false
}).on(STREAM_STATUS.PUBLISHING, function(publishStream){
setStatus(STREAM_STATUS.PUBLISHING);
onPublishing(publishStream);
}).on(STREAM_STATUS.UNPUBLISHED, function(){
setStatus(STREAM_STATUS.UNPUBLISHED);
//enable start button
onUnpublished();
}).on(STREAM_STATUS.FAILED, function(){
setStatus(STREAM_STATUS.FAILED);
//enable start button
onUnpublished();
}).publish();

5. Получение от сервера события, подтверждающего успешную публикацию

STREAM_STATUS.StreamStatusEvent PUBLISHING код code

Code Block
languagejs
themeRDark
session.createStream({
name: streamName,
display: localVideo,
cacheLocalResources: true,
receiveVideo: false,
receiveAudio: false ...
}).on(STREAM_STATUS.PUBLISHING, function(publishStream){
    setStatus(STREAM_STATUS.PUBLISHING);
    onPublishing(publishStream);
}).on(STREAM_STATUS.UNPUBLISHED, function(){
setStatus(STREAM_STATUS.UNPUBLISHED);
//enable start button
onUnpublished();    ...
}).on(STREAM_STATUS.FAILED, function(){
setStatus(STREAM_STATUS.FAILED);
//enable start button
onUnpublished();
    ...
}).publish();

6. Получение снапшота.

sessionSession.createStream(), Stream.snapshot() код code

Code Block
languagejs
themeRDark
session.createStream({name: name}).on(STREAM_STATUS.SNAPSHOT_COMPLETEEVENT, function(streamstreamEvent){
console.log("Snapshot complete");
setSnapshotStatus(STREAM_STATUS.SNAPSHOT_COMPLETE);
snapshotImg.src = "data:image/png;base64,"+stream.getInfo();
//remove failed callback
stream.on(STREAM_STATUS.FAILED, function(){});
//release stream object
stream.stop();
}).on(STREAM_STATUS.FAILED, function(stream){
setSnapshotStatus(STREAM_STATUS.FAILED);
console.log("Snapshot failed, info: " + stream.getInfo());
}).snapshot();

...

7. Получение от сервера события, подтверждающего успешное снятие снапшота.StreamStatusEvent 
STREAM_EVENT_TYPE.SNAPSHOT_COMPLETE код code
При получении данного события, вызов метода stream.getInfo() возвращает элемент streamEvent.payload.snapshot содержит снапшот в кодировке base64. После этого поток, созданный для снятия снапшота, останавливается.
 Code Block
languagejs
themeRDark
session.createStream({name: name}).on(STREAM_STATUSEVENT, function(streamEvent){
    if (STREAM_EVENT_TYPE.SNAPSHOT_COMPLETE, function(stream){
COMPLETED === streamEvent.type) {
        console.log("Snapshot complete");
        setSnapshotStatus(STREAM_STATUS.SNAPSHOT_COMPLETE);
        snapshotImg.src = "data:image/png;base64,"+stream.getInfo()streamEvent.payload.snapshot;
//remove  failed callback
stream.on(STREAM_STATUS.FAILED, function(){});
//release stream object
stream.stop();
}).on(STREAM_STATUS.FAILED, function(stream){
} else if (STREAM_EVENT_TYPE.SNAPSHOT_FAILED === streamEvent.type) {
        setSnapshotStatus(STREAM_STATUS.FAILED);
        console.log("Snapshot failed, info: " + stream.getInfo());streamEvent.payload.info);
    }
}).snapshot();

 
8. Остановка публикации видеопотока.
streamStream.stop() код code
 Code Block
languagejs
themeRDark
function onPublishing(stream) {
    $("#publishBtn").text("Stop").off('click').click(function(){
        $(this).prop('disabled', true);
        stream.stop();
    }).prop('disabled', false);

$("#snapshotBtn").off('click').click(function(){
$(this).prop('disabled', true);
snapshot(stream.name());
}).prop('disabled', false);

}    ...
}
9. Получение от сервера события, подтверждающего успешную оставновку остановку публикации
STREAM_STATUS.StreamStatusEvent UNPUBLISHED код code
 Code Block
languagejs
themeRDark
session.createStream({
name: streamName,
display: localVideo,
cacheLocalResources: true,
receiveVideo: false,
receiveAudio: false ...
}).on(STREAM_STATUS.PUBLISHING, function(publishStream){
setStatus(STREAM_STATUS.PUBLISHING);
onPublishing(publishStream);    ...
}).on(STREAM_STATUS.UNPUBLISHED, function(){
    setStatus(STREAM_STATUS.UNPUBLISHED);
    //enable start button
    onUnpublished();
}).on(STREAM_STATUS.FAILED, function(){
setStatus(STREAM_STATUS.FAILED);
//enable start button
onUnpublished();    ...
}).publish();