Versions Compared

Key

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

...

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

Поддерживаемые протоколы

...

  • WebRTC
  • RTMP
  • RTSP

Поддерживаемые форматы превью

...

  • PNG

Схема работы

1: С использованием REST-запроса

...

REST-методы и статусы ответа

REST-метод

Пример тела REST-запроса

Пример тела REST-ответа

Статусы ответа

/stream/snapshot

Code Block
languagejs
themeRDark
{
 "streamName" : "64966f33"
}
Code Block
languagejs
themeRDark
{
"data": "iVBORw0KGgoAAAANSUhEUgAAAUAAAADwCAYAAABxLb1rAAAACXBIWXMAAAAAAAAAAQCEeRdzAAAQAElEQVR4nOzd95Pcd37feVjhrFKwXT6fr+r+gPvh6nx1V5bvLMt3liXbkiWtrF1v1O5qVxu4icucwUyABAMIAgSIQOQcBzlnzAADDIDJuadzzjmH173f7+/302l6gO4GiCHIZtWjeqZnejAAu5/9+XzD57tgwYIF6Ojo6PiSmvdfoKOjo2O+zPsv0NHR0TFf5v0X6Ojo6Jgv8/4LdHR0dMyXef8FOjo6OubLvP8CHR0dHfNl3n+Bjo6Ojvky779AR0dHx3yZ91+go6OjY77M+y/Q0dHRMV/m/Rfo6OjomC/z/gt0dHR0zJd5/wU6Ojo65su8/wIdHR0d82Xef4GOjo6O+TLvv0BHR0fHfJn3X6Cjo6Njvsz7L9DR0dExX+b9F+jo6OiYL/P+C3R0dHTMl3n/BTo6Ojrmy7z/Ah0dHR1t+Ue636rzGzr19Tv8jPn/S3R0dHS04z4E8HfR0dHR8XD5DaGC94/rdALY0dHxBXafAlj/wI6OjofPb7foXh//edcJYEfHl4gaCd0tDPXf0+rjHxbNT4F/6/fR0dHxkPsNnhb+DvnNO7zYf1P7nt/8vTYf/3nzj8hvk/+B/GPt76DIfey3dHP8jN/8g/8JHR0dD7d/9Hv/Ixb87j/Hgt/5ZzSt+6dY8D/8Eyz47T+o4Pv4a/Q9v/H7/6L1x3+e8O+m/134d/+tf/Iv8dv/9H/G7/zz/6Xs9/7ZvxS//8/+hfiDP/gD/P7v/z5+7/d+D7/7u7+L3/md3xELVl6PoaOj4"
}

200 - Превью зафиксирован

404 - Поток не найден

Параметры

Имя параметра

Описание

Пример

streamName

Уникальное имя потока

64966f33

data

Файл превью в base64-кодировке

iVBORw0KGgoAAAANSUhEUgAAAUAAAADwCAYAAABxLb1rAAAACXBIWXMAAAAAAAAAAQCEeRdzAAAQA

Отправка REST-запроса к WCS-серверу

...

1. Для теста используем:

...

Code Block
languagejs
themeRDark
        Flashphoner.createSession({urlServer: url}).on(SESSION_STATUS.ESTABLISHED, function(session){
            //session connected, start streaming...
            startStreaming(session);
});


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

ConnectionStatusEvent ESTABLISHED code

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


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

stream.publish(); code

Code Block
languagejs
themeRDark
 session.createStream({
        Flashphoner.createSession({urlServer: url}).on(SESSION_STATUS.ESTABLISHED, function(session){name: streamName,
        display: localVideo,
        cacheLocalResources: true,
   //session connected, start streaming
  receiveVideo: false,
         startStreaming(session);receiveAudio: false
        }).on(SESSION_STATUS.DISCONNECTED, function(){
...
    }).publish();


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

StreamStatusEvent, статус PUBLISHING code

Code Block
languagejs
themeRDark
     session.createStream({
       setStatus(SESSION_STATUS.DISCONNECTED);
 name: streamName,
        display: localVideo,
     $('#url').prop('disabled', false);
  cacheLocalResources: true,
         onUnpublished();receiveVideo: false,
        })receiveAudio: false
    }).on(SESSIONSTREAM_STATUS.FAILEDPUBLISHING, function(publishStream){
            setStatus(SESSIONSTREAM_STATUS.FAILEDPUBLISHING);
        onPublishing(publishStream);
    $('#url'}).prop('disabled'on(STREAM_STATUS.UNPUBLISHED, falsefunction();{
        ...
    onUnpublished();
}).on(STREAM_STATUS.FAILED, function(stream){
        ...
    }).publish();


3. Публикация потока5. Отправка аудио-видео потока по WebRTC

6. Снятие превью трансляции. Создается новый поток из опубликованного, специально для снятия превью.

stream.publishsnapshot(); code

Code Block
languagejs
themeRDark
function session.createStream(snapshot(name) {
        name: streamName,setSnapshotStatus();
    var session   display: localVideo,= Flashphoner.getSessions()[0];
        cacheLocalResources: true,session.createStream({name: name}).on(STREAM_STATUS.SNAPSHOT_COMPLETE, function(stream){
        receiveVideo: false,console.log("Snapshot complete");
        receiveAudio: false
    }).onsetSnapshotStatus(STREAM_STATUS.PUBLISHING, function(publishStream){SNAPSHOT_COMPLETE);
        setStatus(STREAM_STATUS.PUBLISHINGsnapshotImg.src = "data:image/png;base64,"+stream.getInfo();
        //remove failed onPublishing(publishStream);callback
     })   stream.on(STREAM_STATUS.UNPUBLISHEDFAILED, function(){});
         setStatus(STREAM_STATUS.UNPUBLISHED);
        //enable start button//release stream object
        onUnpublishedstream.stop();
    }).on(STREAM_STATUS.FAILED, function(stream){
        setStatussetSnapshotStatus(STREAM_STATUS.FAILED, stream);
        //enable start button
        onUnpublished();
    }).publish();

...

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(stream){
        setStatus(STREAM_STATUS.FAILED, stream);
        //enable start button
        onUnpublished();
    }).publish();

...

6. Снятие превью трансляции. Создается новый поток из опубликованного, специально для снятия превью.

stream.snapshot(); code

Code Block
languagejs
themeRDark
function snapshot(name) {
    setSnapshotStatus();
    var session = Flashphoner.getSessions()[0];
    session.createStream({name: name}).on(STREAM_STATUS.SNAPSHOT_COMPLETE, function(stream){
        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();
}

8. Остановка публикации потока.

stream.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);

    $("#snapshotBtnconsole.log("Snapshot failed, info: " + stream.getInfo());
    }).snapshot();
}


8. Остановка публикации потока.

stream.stop(); code

Code Block
languagejs
themeRDark
function onPublishing(stream) {
    $("#publishBtn").text("Stop").off('click').click(function(){
        $(this).prop('disabled', true);
        snapshot(stream.namestop());
    }).prop('disabled', false);
    ...
}


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

...

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);(publishStream){
        onPublishing(publishStream);...
    }).on(STREAM_STATUS.UNPUBLISHED, function(){
        setStatus(STREAM_STATUS.UNPUBLISHED);
        //enable start button
        onUnpublished();
    }).on(STREAM_STATUS.FAILED, function(stream){
        setStatus(STREAM_STATUS.FAILED, stream);
        //enable start button
        onUnpublished();...
    }).publish();