Внедрение воспроизведения видеопотока в браузере по MSE

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

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

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

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

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

HTML

Разместим в mse-player-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="mse-player-min.js"></script>`

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

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

4. Добавляем div-элемент, в который будет примонтировано видео для плеера

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

5. Добавляем кнопку «Play», нажатие по которой будет инициировать коннект к серверу и начинать воспроизведение

1	`<input` `type="button"` `onclick="connect()"` `value="PLAY"/>`

before playing MSE Player WCS WebRTC Websocket browser

Полный код HTML — страницы выглядит так:

<!DOCTYPE html>
<html lang="en">
<head>   
    <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="mse-player-min"></script>   
</head>
 
<body onload="init_api()">
<div id="myVideo" style="width:320px;height:240px;border: solid 1px"></div>
<br/><input type="button" onclick="connect()" value="PLAY"/>
</body>
</html>

JavaScript

1. Создаем константы для статуса работы плеера

var SESSION_STATUS = Flashphoner.constants.SESSION_STATUS;
var STREAM_STATUS = Flashphoner.constants.STREAM_STATUS;

2. Создаем переменную для Websocket сессии

1	`var session;`

3. Инициализируем API при загрузке HTML страницы. Здесь же укажем тип медиапровайдера — «MSE»

Flashphoner.init({
    preferredMediaProvider: "MSE"
    });

4. Функция «connect()» создает Websocket сессию на WCS. В этом примере мы используем наш демо-сервер. Для тестирования собственного сервера замените «wss://demo.flashphoner.com» на адрес своего WCS

function connect() {
    Flashphoner.createSession({
        urlServer: "wss://demo.flashphoner.com"
    }).on(SESSION_STATUS.ESTABLISHED, function(session) {
        playStream(session);
    })
}

5. Далее создаем поток session.createStream() и передаем имя потока «stream1» и HTML элемент «myVideo» в качестве параметров

function playStream(session) {
    var options = {
        name: "stream1",
        display: document.getElementById("myVideo"),
    };
    stream = session.createStream(options).on(STREAM_STATUS.PENDING, function(stream) {})
    stream.play();
}

Полный код JavaScript выглядит так:

var SESSION_STATUS = Flashphoner.constants.SESSION_STATUS;
var STREAM_STATUS = Flashphoner.constants.STREAM_STATUS;
var session;
 
function init_api() {
    Flashphoner.init({
        preferredMediaProvider: "MSE"
    });
}
 
function connect() {
    Flashphoner.createSession({
        urlServer: "wss://demo.flashphoner.com"
    }).on(SESSION_STATUS.ESTABLISHED, function(session) {
        playStream(session);
    })
}
 
function playStream(session) {
    var options = {
        name: "stream1",
        display: document.getElementById("myVideo"),
    };
    stream = session.createStream(options).on(STREAM_STATUS.PENDING, function(stream) {})
    stream.play();
}