How to become an author
Search
Write a publication
Pull to refresh
0
Rating
Flashphoner

Практическое применение WebRTC Canvas стриминга

Reading time 7 min
Views 2.7K
Flashphoner corporate blog Website development *Working with video *Programming *Video conferencing

В этой статье поднимем несколько надоевшую тему вебинаров и инструментов для их проведения. Нет. Писать систему для проведения вебинара не будем. Их уже до нас написано превеликое множество. Обсудим возможность подключить к вебинару рисовалку, чтобы можно было делать пометки от руки и транслировать все это дело в поток.

На первый взгляд решение лежит на поверхности. Надо только добавить на страницу холст — элемент HTML 5 "Canvas", и на нем рисовать. Добавить-то добавили, а как завернуть то, что нарисовано, в WebRTC?

Итак, давайте разберем, что такое WebRTC стриминг с холста, или Canvas стриминг, и какие в нем могут быть подводные камни.

Что такое Canvas?

Если верить Википедии, то:

Canvas (англ. canvas — «холст», рус. канва́с) — элемент HTML5, предназначенный для создания растрового двухмерного изображения при помощи скриптов, обычно на языке JavaScript. Используется, как правило, для отрисовки графиков для статей.

Из плюсов использования Canvas можно выделить:

  • имеет аппаратное ускорение;

  • можно манипулировать каждым пикселем;

Минусы:

  • чрезмерно нагружает процессор и оперативную память;

  • из-за ограничения сборщика мусора нет возможности очистить память;

  • необходимо самому обрабатывать события с объектами;

  • плохая производительность при высоком разрешении;

  • приходится отрисовывать отдельно каждый элемент.

Минусов получилось больше, чем плюсов. Но несмотря на это, у Canvas есть огромное преимущество в использовании — можно стримить поток со слайдами и делать пометки на этих слайдах в процессе вебинара.

Особенности захвата потока

При захвате потока из элемента Canvas браузер считает этот элемент черным. Поэтому текст, который будет написан на холсте черными буквами, при захвате потока сольется с фоном и в поток будет транслироваться черный экран. То же самое может произойти при отрисовке .png изображения с прозрачным фоном и черным рисунком.

Кроме этого, поток не может состоять из одного кадра. Поэтому, когда вы один раз что-то вывели на Canvas, и это изображение статично там висит, поток не может сформироваться, т.к. был всего один кадр. Решение — отрисовывать статичный контент циклично.

Например, ниже функция, которая реализует обновление картинки, отрисованной на Сanvas с частотой 30 fps: 

function loop(){
        canvasContext.drawImage(img, 10, 10);
        setTimeout(loop, 1000 / 30); // drawing at 30fps
    }

Еще один нюанс напрямую связан с политикой безопасности браузеров — "Политикой одного источника".

Изображение, которое нужно нарисовать на холсте, необходимо разместить локально на веб-сервере или на веб-сервере в том же домене. Если изображение, которое будет отрисовано на холсте загружается из Интернета, браузер выдаст исключение.

Обойти эту проблему можно используя технологию Cross-Origin Resource Sharing (CORS), но это выходит за рамки нашей статьи.

Рецепты по приготовлению Canvas

По традиции, дадим готовые рецепты. Рецепта сегодня два:

  1. Отрисовка текста на Canvas и стриминг под соусом WebRTC;

  2. Отрисовка на Canvas изображения и дальнейший стриминг по WebRTC.

HTML часть будет практически идентична. Создаем HTML файл canvas-streaming-min.html

В хэде страницы пропишем обращения к скриптам: 

<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="canvas-streaming-min.js"></script>

В боди — размещаем HTML 5 элемент Canvas и div элемент для публикации потока. Инициализируем Flashphoner API при загрузке HTML страницы: 

<body onload="init_page()">
        <canvas width="480" height="320" id="canvas"></canvas>
        <div id="localDisplay" hidden></div>
        <br>     
</body>

Для простоты примера в HTML файле для холста с изображением добавим картинку, которая и будет отрисована на холсте. Файл картинки мы разместили в той же папке на сервере, что и файлы примера: 

<img src="2307589.png" alt="logo" id="myimage" >

Полный код 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="canvas-streaming-min.js"></script>
</head>
<body onload="init_page()">
        <canvas width="480" height="320" id="canvas"></canvas>
        <div id="localDisplay" hidden></div>    
</body>
</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="canvas-streaming-min.js"></script>
</head>
<body onload="init_page()">
        <canvas width="480" height="320" id="canvas"></canvas>
        <div id="localDisplay" hidden></div>
        <br>
        <img src="2307589.png" alt="logo" id="myimage" >      
</body>
</html>

Теперь переходим к написанию JS скриптов.

Отрисовка текста на Canvas и стриминг под соусом WebRTC

Определяем константы и глобальные переменные: 

var SESSION_STATUS = Flashphoner.constants.SESSION_STATUS;
var STREAM_STATUS = Flashphoner.constants.STREAM_STATUS;
var session;
var canvas;
var localDisplay;

Пишем на Canvas фразу "Hello World". Нарисуем желтый прямоугольник 320px на 176px, текст напишем шрифтом Arial, кегль 30px, цвет - синий. Используем функцию "loop()" которую уже упоминали выше, чтобы перерисовывать канвас с частотой 30 fps: 

function createCanvas() {
    var canvasContext = canvas.getContext ("2d");
    canvasContext.font = "30px Arial";
    canvasContext.fillStyle = "yellow";
    canvasContext.fillRect(0,0,320,176);
    canvasContext.strokeStyle = 'black';
    canvasContext.fillStyle = "blue";
    (function loop(){
        canvasContext.fillText("Hello World!", 10, 50);
        setTimeout(loop, 1000 / 30); // drawing at 30fps
    })();    
}

Подключаемся к WCS серверу через WebSocket и публикуем поток с канваса:

//Connect to WCS server over webSockets
function connect() {
    session = Flashphoner.createSession({
        urlServer: "wss://demo.flashphoner.com:8443" //specify the address of your WCS
    }).on(SESSION_STATUS.ESTABLISHED, function(session) {
        publishStream(session);
    });
}

//Capturing stream of Canvas element
function publishStream(session) {
    publishStream = session.createStream({
        name: "test-canvas",
        display: localDisplay,
        constraints: {
            audio: false,
            video: false,
            customStream: canvas.captureStream(30)
        }
    });
    publishStream.publish();
}

Полный код JS скрипта для отрисовки холста с текстом и захвата его в поток: 

var SESSION_STATUS = Flashphoner.constants.SESSION_STATUS;
var STREAM_STATUS = Flashphoner.constants.STREAM_STATUS;
var session;
var canvas;
var localDisplay;

 //init api
function init_page() {
    Flashphoner.init({});
    localDisplay = document.getElementById("localDisplay");
    canvas = document.getElementById("canvas");
    createCanvas();
    connect();    
}

//create Canvas
function createCanvas() {
    var canvasContext = canvas.getContext ("2d");
    canvasContext.font = "30px Arial";
    canvasContext.fillStyle = "yellow";
    canvasContext.fillRect(0,0,320,176);
    canvasContext.strokeStyle = 'black';
    canvasContext.fillStyle = "blue";
    (function loop(){
        canvasContext.fillText("Hello World!", 10, 50);
        setTimeout(loop, 1000 / 30); // drawing at 30fps
    })();    
}

//Connect to WCS server over webSockets
function connect() {
    session = Flashphoner.createSession({
        urlServer: "wss://demo.flashphoner.com:8443" //specify the address of your WCS
    }).on(SESSION_STATUS.ESTABLISHED, function(session) {
        publishStream(session);
    });
}

//Capturing stream of Canvas element
function publishStream(session) {
    publishStream = session.createStream({
        name: "test-canvas",
        display: localDisplay,
        constraints: {
            audio: false,
            video: false,
            customStream: canvas.captureStream(30)
        }
    });
    publishStream.publish();
}

Привет мир!

  1. Откройте созданную Web-страницу. В этом примере мы не используем кнопок, поэтому канвас отрисовывается сразу при инициализации страницы:

  2. В другой вкладке браузера откройте демо-пример "Player" на вашем WCS сервере. Укажите имя потока, в который был захвачен canvas и запустите воспроизведение. На скриншоте исходный канвас и вид потока в плеере:

Отрисовка на Canvas изображения и дальнейший стриминг по WebRTC

Определяем константы и глобальные переменные: 

var SESSION_STATUS = Flashphoner.constants.SESSION_STATUS;
var STREAM_STATUS = Flashphoner.constants.STREAM_STATUS;
var session;
var canvas;
var localDisplay;

Получаем картинку с web-страницы и циклично отрисовываем ее на канвасе, чтобы получить 30 кадров в секунду:

function createCanvas() {
    var canvasContext = canvas.getContext ("2d");
    var img = document.getElementById ("myimage");
    (function loop(){
        canvasContext.drawImage(img, 10, 10);
        setTimeout(loop, 1000 / 30); // drawing at 30fps
    })();    
}

Подключаемся к WCS серверу через WebSocket и публикуем поток с канваса:

//Connect to WCS server over webSockets
function connect() {
    session = Flashphoner.createSession({
        urlServer: "wss://demo.flashphoner.com:8443" //specify the address of your WCS
    }).on(SESSION_STATUS.ESTABLISHED, function(session) {
        publishStream(session);
    });
}

//Capturing stream of Canvas element
function publishStream(session) {
    publishStream = session.createStream({
        name: "test-canvas",
        display: localDisplay,
        constraints: {
            audio: false,
            video: false,
            customStream: canvas.captureStream(30)
        }
    });
    publishStream.publish();
}

Полный код JS скрипта для отрисовки холста с изображением и захвата его в поток:

var SESSION_STATUS = Flashphoner.constants.SESSION_STATUS;
var STREAM_STATUS = Flashphoner.constants.STREAM_STATUS;
var session;
var canvas;
var localDisplay;

 //init api
function init_page() {
    Flashphoner.init({});
    localDisplay = document.getElementById("localDisplay");
    canvas = document.getElementById("canvas");
    createCanvas();
    connect();    
}

//create Canvas
function createCanvas() {
    var canvasContext = canvas.getContext ("2d");
    var img = document.getElementById ("myimage");
    (function loop(){
        canvasContext.drawImage(img, 10, 10);
        setTimeout(loop, 1000 / 30); // drawing at 30fps
    })();    
}

//Connect to WCS server over webSockets
function connect() {
    session = Flashphoner.createSession({
        urlServer: "wss://demo.flashphoner.com:8443" //specify the address of your WCS
    }).on(SESSION_STATUS.ESTABLISHED, function(session) {
        publishStream(session);
    });
}

//Capturing stream of Canvas element
function publishStream(session) {
    publishStream = session.createStream({
        name: "test-canvas",
        display: localDisplay,
        constraints: {
            audio: false,
            video: false,
            customStream: canvas.captureStream(30)
        }
    });
    publishStream.publish();
}

Привет мир! часть вторая

  1. Откройте созданную Web-страницу. Канвас будет отрисован сразу при инициализации страницы. Картинка (в нижней части страницы) отображается на холсте (в верхней части страницы):

  1. Откройте демо-пример "Player" на вашем WCS сервере. Укажите имя потока, в который был захвачен canvas и запустите воспроизведение. На скриншоте исходный канвас и вид потока в плеере:

Заключение

В этой статье мы не ставили целью показать что-то принципиально новое. Но среди обращений в нашу техническую поддержку бывают вопросы по стримингу с канваса, и в этой статье мы разобрали минимальные примеры кода, с помощью которых можно использовать этот функционал в своем проекте.

Хорошего стриминга!

Ссылки

Наш демо сервер

WCS на Amazon EC2 - Быстрое развертывание WCS на базе Amazon

WCS на DigitalOcean - Быстрое развертывание WCS на базе DigitalOcean

WCS в Docker - Запуск WCS как Docker контейнера

Документация по быстрому развертыванию и тестированию WCS сервера

Документация по захвату и трансляции видеопотока с элемента HTML5 Canvas (whiteboard)

Tags:
Hubs:
0
Comments 1
Flashphoner
Company
Website
13
Karma
0
Rating
Stas @fpn

Streaming video engineer

Send message
Comments Comments 1

Articles

Unlock dark mode

Information

Website
flashphoner.com
Registered
Founded
2010
Employees
2–10 employees
Location
Россия

Your account

Sections

Information

Services

Support
© 2006–2024, Habr