Добавление надписи в транслируемое видео

[alexosh]

Какой будет наиболее простой способ добавить надпись (и менять ее когда нужно) в обычный транслируемый с камеры поток?

В этой теме советуют делать на клиенте через фильтры, в том числе чтобы уменьшить нагрузку на сервер. Это действительно самый простой способ для трансляций которые идут через плеер сайте?

А если это нужно для перетранслируемого потка на youtube?

 

[Max]

Добрый день.

В этой теме советуют делать на клиенте через фильтры, в том числе чтобы уменьшить нагрузку на сервер. Это действительно самый простой способ для трансляций которые идут через плеер сайте?

Если с веб-камеры клиента публикуется поток, то добавить надпись проще всего и дешевле всего по ресурсам именно на стороне клиента, как и рекомендовано по упомянутой ссылке

А если это нужно для перетранслируемого потка на youtube?

Ретрансляцией занимается сервер, а он получает поток от клиента как есть. То есть, если добавить надпись, используя фильтры, то и на Youtube эта надпись будет ретранслирована.

 

[alexosh]

> Ретрансляцией занимается сервер, а он получает поток от клиента как есть. То есть, если добавить надпись, используя фильтры, то и на Youtube эта надпись будет ретранслирована.

Тогда не совсем понял, что значит "на клиенте". Я думал, имеется имеется ввиду клиент, который отображает видео конечному пользователю. Т.е. мы получаем видео с сервера и отображаем его в канвасе клиента в котором накладываем фильтр.

Но причем тут ретрансляция на ютуб (которая идет с сервера)? Или я что-то все же совсем не понял в предлагаемой схеме добавления надписи "на клиенте"?

 

[Max]

Тогда не совсем понял, что значит "на клиенте". Я думал, имеется имеется ввиду клиент, который отображает видео конечному пользователю. Т.е. мы получаем видео с сервера и отображаем его в канвасе клиента в котором накладываем фильтр.

Фильтры накладываются на публикующем клиенте: браузер захватывает изображение с камеры, картинка отрисовывается на канвасе, на эту картинку накладывается фильтр, после чего картинка с канваса захватывается в WebRTC стрим, который публикуется на сервере. Посмотрите, как работает пример Stream Filter на нашем демо сервере.
Вместо изменения пикселей картинки, можно вывести на канвас надпись.
Страница, которая отображает видео конечному пользователю, отображает его "как есть", в том, виде, как картинка получена с сервера.

 

[alexosh]

> Фильтры накладываются на публикующем клиенте: браузер захватывает изображение с камеры, картинка отрисовывается на канвасе

А каким образом исходное видео с камеры может попасть на "публикующий клиент"? Мы действительно говорим о продакшн подходе?

Выглядит так, что где-то на сервере нужно поднимать hadless бразуер, туда передавать видео (опять же с сервера flashphoner), накладывать фильтр, и переопубликовывать опять на flashphoner. Т.к. тут все таки речь идет о серверной части системы. "Клиентами" обычно принято называть потребителей конечного потока.

Не совсем понятно как в реальности применяется подобное наложение фильтров "на клиенте".

 

[Max]

А каким образом исходное видео с камеры может попасть на "публикующий клиент"? Мы действительно говорим о продакшн подходе?

Вся работа по захвату потока с камеры, отрисовке картинки на HTML5 элементе canvas производится на стороне браузера, на сервер отправляется уже готовый поток. Посмотрите, как работает пример Stream Filter, открыв его в браузере по ссылке (пример в Chrome 90)

Выглядит так, что где-то на сервере нужно поднимать hadless бразуер, туда передавать видео (опять же с сервера flashphoner), накладывать фильтр, и переопубликовывать опять на flashphoner. Т.к. тут все таки речь идет о серверной части системы. "Клиентами" обычно принято называть потребителей конечного потока.

Нет, headless браузер поднимать не нужно. Браузер, который захватывает камеру на ПК и публикует поток - тоже клиент. Если в Вашем случае поток публикуется на сервер не из браузера, просим подробно описать кейс.

 

[alexosh]

> Если в Вашем случае поток публикуется на сервер не из браузера, просим подробно описать кейс.

Поток публикуется напрямую с IP-камеры на plashphoner, никаких промежуточных компьютеров с браузерами не предполагается. На видео нужно переодически добавлять диномичесую доп информацию. Какжется что это вполне стандартная задача.

 

[Max]

Поток публикуется напрямую с IP-камеры.

Если поток захватывается по RTSP с IP-камеры, тогда можно воспользоваться первыми двумя вариантами из этого поста. В этом случае потребуется повышенная производительность от сервера (1 ядро CPU на 2 потока 720p либо 2 ядра CPU на один поток 1080p), а также специалист, умеющий работать с картинками в YUV формате на Java.

 

[alexosh]

Ясно, насколько понимаю первый способ через транскодер и REST не требует джава программирования, но проблема в том, чтобы нужная картинка оказалась на сервере локально так, удаленную картинку не получится использовать?

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

 

[Max]

Ясно, насколько понимаю первый способ через транскодер и REST не требует джава программирования, но проблема в том, чтобы нужная картинка оказалась на сервере локально так, удаленную картинку не получится использовать?

Да, нужная картинка должна быть локально на сервере.

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

С точки зрения ресурсов сервера, способы добавления картинки на стороне сервера одинаковы, поскольку в обоих случаях картинка потока декодируется, затем к ней добавляется PNG, либо она изменяется в кастомном Java коде, затем картинка снова кодируется и отправляется в выходной поток. То есть транскодинг работает в любом случае.

 

[alexosh]

Ок, спасибо, будем пробовать.

 

[alexosh]

@Max
Добрый день, вопрос в контексте оригинальной темы (встраивание изображения в RTSP поток c IP-камеры). А каким образом порекомендуете встраивать в видео gif анимацию?

 

[Max]

Добрый день, вопрос в контексте оригинальной темы (встраивание изображения в RTSP поток c IP-камеры). А каким образом порекомендуете встраивать в видео gif анимацию?

Это можно сделать только при помощи собственного класса для перехвата и обработки декодированных фреймов. Предварительно нужно будет конвертировать GIF в набор статических YUV картинок, а затем отрисовать анимацию в Java коде. Способ с транскодингом по REST API тут не подойдет, т.к. поддерживается только PNG.