...
WCS предоставляет возможность снятия превью публикуемого потока при помощи REST-вызовов, а также при помощи JavaScript API.
Поддерживаемые протоколы
...
- WebRTC
- RTMP
- RTSP
Поддерживаемые форматы превью
...
- PNG
Схема работы
1: С использованием REST-запроса
...
REST-методы и статусы ответа
REST-метод | Пример тела REST-запроса | Пример тела REST-ответа | Статусы ответа | ||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
/stream/snapshot |
|
| 200 - Превью зафиксирован 404 - Поток не найден |
Параметры
Имя параметра | Описание | Пример |
---|---|---|
streamName | Уникальное имя потока | 64966f33 |
data | Файл превью в base64-кодировке | iVBORw0KGgoAAAANSUhEUgAAAUAAAADwCAYAAABxLb1rAAAACXBIWXMAAAAAAAAAAQCEeRdzAAAQA |
Отправка REST-запроса к WCS-серверу
...
1. Для теста используем:
- демо-сервер demo.flashphoner.com;
- браузер Chrome и REST-клиент для отправки запросов на сервер;
- веб-приложение Two Way Streaming для публикации потока;
- сервис https://www.motobit.com/util/base64-decoder-encoder.asp для декодирования превью.
...
Code Block | ||||
---|---|---|---|---|
| ||||
Flashphoner.createSession({urlServer: url}).on(SESSION_STATUS.ESTABLISHED, function(session){ //session connected, start streaming... startStreaming(session); }); |
2. Получение от сервера события, подтверждающего успешное соединение.
ConnectionStatusEvent ESTABLISHED code
Code Block | ||||
---|---|---|---|---|
| ||||
})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 | ||||
---|---|---|---|---|
| ||||
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 | ||||
---|---|---|---|---|
| ||||
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 | ||||
---|---|---|---|---|
| ||||
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 | ||||
---|---|---|---|---|
| ||||
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 | ||||
---|---|---|---|---|
| ||||
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 | ||||
---|---|---|---|---|
| ||||
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 | ||||
---|---|---|---|---|
| ||||
function onPublishing(stream) { $("#publishBtn").text("Stop").off('click').click(function(){ $(this).prop('disabled', true); snapshot(stream.namestop()); }).prop('disabled', false); ... } |
9. Получение от сервера события, подтверждающего остановку публикации потока.
...
Code Block | ||||
---|---|---|---|---|
| ||||
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(); |