Внедрение снятия снапшотов видеотрансляции в HTML-страницу

Какие скрипты требуются для встраивания снятия снапшотов и какие зависимости необходимо учесть при внедрении

Для быстрой установки и настройки сервера воспользуйтесь этой инструкцией. Кроме этого, для тестирования вы можете подключиться к нашему демо-серверу demo.flashphoner.com по протоколу Websockets.

Пошаговая инструкция по внедрению снятия снапшота на свою веб-страницу

Для внедрения снятия снапшота видеопотока на свою веб-страницу, создадим два пустых файла stream-snapshot-min.html и stream-snapshot-min.js. Эти файлы будут содержать минимальный код.

Разберем содержимое файлов

HTML

Разместим в файле stream-snapshot-min.html необходимые элементы:

1. Подключаем скрипт основного API:

<script type="text/javascript" src="https://flashphoner.com/downloads/builds/flashphoner_client/wcs_api-2.0/current/flashphoner.js"></script>

2. Подключаем скрипт для снятия снапшота:

1	`<script` `type="text/javascript"` `src="stream-snapshot-min.js"></script>`

3. Добавляем стили для правильного отображения видео в div-элементах:

<style>
        .fp-Video {
            border: 1px double black;
            width: 322px;
            height: 242px;
        }
        .display {
            width: 100%;
            height: 100%;
            display: inline-block;
        }
        .display > video,
        object {
            width: 100%;
            height: 100%;
        }
</style>

4. Инициализируем API на загрузку страницы:

1	`<body` `onload="init_api()">`

5. Добавляем div-элемент в котором будет отображаться транслируемый видеопоток:

<div class="fp-Video">
   <div id="localVideo" class="display"></div>
</div>

6. Добавляем кнопку «Start», нажатие по которой будет инициировать коннект к серверу и начинать трансляцию потока:

1	`<button` `id="publishBtn">Start</button>`

7. Теперь добавляем div-элемент, в котором будет отображаться созданный снапшот:

<div style="width:320px;height:240px;border: solid 1px"><img id="snapshotImg"/></div>

Общий вид созданной web страницы:

before_start_stream_webrtc_flash_browser_WCS_RTMP_RTSP_Snapshot

Полный код HTML — страницы (файл «stream-snapshot-min.html») выглядит так:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <script type="text/javascript" src="https://flashphoner.com/downloads/builds/flashphoner_client/wcs_api-2.0/current/flashphoner.js"></script>
        <script type="text/javascript" src="stream-snapshot-min.js"></script>
        <style>
            .fp-Video {
                border: 1px double black;
                width: 322px;
                height: 242px;
            }
            .display {
                width: 100%;
                height: 100%;
                display: inline-block;
            }
            .display > video,
            object {
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body onload="init_api()">
        <div class="fp-Video">
            <div id="localVideo" class="display"></div>
        </div>
        <button id="publishBtn">Start</button>
        <br />
        <br />
        <button id="snapshotBtn">Take a snapshot</button>
        <div style="width: 320px; height: 240px; border: solid 1px;"><img id="snapshotImg" /></div>
    </body>
</html>

JavaScript

1. Создаем константы и переменные для статуса работы сервера, WebSocket сессии и имени транслируемого потока. (В нашем примере «stream1». Для корректного тестирования укажите свое значение). Для обеспечения работы с браузером iOS Safari нам потребуется прелоадер, который можно скачать с GitHub:

var SESSION_STATUS = Flashphoner.constants.SESSION_STATUS;
var STREAM_STATUS = Flashphoner.constants.STREAM_STATUS;
var session;
var streamName = "stream1"
var PRELOADER_URL = "https://github.com/flashphoner/flashphoner_client/raw/wcs_api-2.0/examples/demo/dependencies/media/preloader.mp4";

2. Инициализируем API при загрузке HTML страницы, подключаемся к WCS серверу через WebSocket и привязываем функции к событиям нажатия на соответствующие кнопки:

function init_api() {
    Flashphoner.init({});
    //Connect to WCS server over websockets
    session = Flashphoner.createSession({
        urlServer: "wss://demo.flashphoner.com" //specify the address of your WCS
    }).on(SESSION_STATUS.ESTABLISHED, function(session) {
        console.log("ESTABLISHED");
    });
 
    publishBtn.onclick = publishClick;
    snapshotBtn.onclick = getSnapshot;
}

3. Определяем браузер, и, если браузер это Сафари, запускаем прелоадер. Воспроизведение должно начинаться строго по жесту пользователя (т. е. По нажатию кнопки). Это ограничение мобильных браузеров Safari. (Подробнее здесь):

var Browser = {
    isSafari: function() {
        return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
    },
}
 
function publishClick() {
    if (Browser.isSafari()) {
        Flashphoner.playFirstVideo(document.getElementById("localVideo"), true, PRELOADER_URL).then(function() {
            publishStream(session);
        });
    } else {
        publishStream(session);
    }
}

4. Далее создаем поток session.createStream() и передаем имя потока и div элемент «localVideo» в качестве параметров. Публикуем поток с этими параметрами:

function publishStream(session) {
    session.createStream({
        name: streamName,
        display: document.getElementById("localVideo"),
    }).publish();
}

5. Следующая функция создает снапшот при помощи REST запроса. Полученный снапшот выводится на страницу в div элемент «snapshotImg»:

function getSnapshot() {
    fetchUrl = "https://demo.flashphoner.com:8444/rest-api/stream/snapshot";
    const options = {
        method: "POST",
        headers: { 
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            "streamName": streamName,
        }),
    }
    fetch(fetchUrl, options)
        .then(function(response) {
            response.json().then(function(data) {
                document.getElementById("snapshotImg").src = "data:image/png;base64," + data.data;
            });
        });
}

before_take-snapshot_webrtc_flash_browser_WCS_RTMP_RTSP_Snapshot

Полный код JavaScript (файл «stream-snapshot-min.js») выглядит так:

var SESSION_STATUS = Flashphoner.constants.SESSION_STATUS;
var STREAM_STATUS = Flashphoner.constants.STREAM_STATUS;
var session;
var streamName = "stream1"
var PRELOADER_URL = "https://github.com/flashphoner/flashphoner_client/raw/wcs_api-2.0/examples/demo/dependencies/media/preloader.mp4";
 
function init_api() {
    Flashphoner.init({});
    //Connect to WCS server over websockets
    session = Flashphoner.createSession({
        urlServer: "wss://demo.flashphoner.com" //specify the address of your WCS
    }).on(SESSION_STATUS.ESTABLISHED, function(session) {
        console.log("ESTABLISHED");
    });
 
    publishBtn.onclick = publishClick;
    snapshotBtn.onclick = getSnapshot;
}
 
var Browser = {
    isSafari: function() {
        return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
    },
}
 
function publishClick() {
    if (Browser.isSafari()) {
        Flashphoner.playFirstVideo(document.getElementById("localVideo"), true, PRELOADER_URL).then(function() {
            publishStream(session);
        });
    } else {
        publishStream(session);
    }
}
 
function publishStream(session) {
    session.createStream({
        name: streamName,
        display: document.getElementById("localVideo"),
    }).publish();
}
 
function getSnapshot() {
    fetchUrl = "https://demo.flashphoner.com:8444/rest-api/stream/snapshot";
    const options = {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            "streamName": streamName,
        }),
    }
    fetch(fetchUrl, options)
        .then(function(response) {
            response.json().then(function(data) {
                document.getElementById("snapshotImg").src = "data:image/png;base64," + data.data;
            });
        });
}