...
WCS предоставляет возможность снятия превью публикуемого потока при помощи REST-вызовов, а также при помощи JavaScript API.
Поддерживаемые протоколы
...
- WebRTC
- RTMP
- RTSP
Поддерживаемые форматы превью
...
- PNG
Схема работы
1: С использованием REST-запроса
...
- HTTP: http://streaming.flashphoner.com:90918081/rest-api/stream/snapshot
- HTTPS: https://streaming.flashphoner.com:88888444/rest-api/stream/snapshot
...
- streaming.flashphoner.com - адрес WCS-сервера
- 9091 8081 - стандартный REST / HTTP порт WCS-сервера
- 8888 8444 - стандартный HTTPS порт
- rest-api - обязательная часть URL
- /stream/snapshot - используемый 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 ... }); |
2. Получение от сервера события, подтверждающего успешное соединение.
ConnectionStatusEvent ESTABLISHED code
Code Block | ||||
---|---|---|---|---|
| ||||
startStreaming(session); Flashphoner.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(SESSION_STATUS.FAILED);... $('#url'}).prop('disabled'on(SESSION_STATUS.FAILED, falsefunction();{ 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, //session connected, startcacheLocalResources: streamingtrue, startStreaming(session);receiveVideo: false, }).on(SESSION_STATUS.DISCONNECTED, function(){receiveAudio: false ... setStatus(SESSION_STATUS.DISCONNECTED);}).publish(); |
4. Получение от сервера события, подтверждающего успешную публикацию потока.
StreamStatusEvent, статус PUBLISHING code
Code Block | ||||
---|---|---|---|---|
| ||||
session.createStream({ name: streamName, $('#url').prop('disabled', false); display: localVideo, cacheLocalResources: true, receiveVideo: false, onUnpublished(); 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) { setSnapshotStatus(); name: streamName, var session = Flashphoner.getSessions()[0]; display: localVideo,session.createStream({name: name}).on(STREAM_STATUS.SNAPSHOT_COMPLETE, function(stream){ cacheLocalResources: true,console.log("Snapshot complete"); receiveVideo: false, receiveAudio: false }).onsetSnapshotStatus(STREAM_STATUS.PUBLISHING, function(publishStream){SNAPSHOT_COMPLETE); setStatus(STREAM_STATUS.PUBLISHING); snapshotImg.src = "data:image/png;base64,"+stream.getInfo(); onPublishing(publishStream); }).on(STREAM_STATUS.UNPUBLISHED, function(){//remove failed callback setStatusstream.on(STREAM_STATUS.UNPUBLISHEDFAILED, function(){}); //enablerelease startstream buttonobject 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(); |