Запись кастомизированных на клиенте теплейтов

Shiga

New Member
Добрый день.

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

Вариант с микшером https://docs.flashphoner.com/pages/viewpage.action?pageId=1048855 нам не подходит, потому что нужна стилизация и смена теплейтов в live.

Примеры темплейтов:
 

Attachments

Max

Administrator
Staff member
Темплейт - это HTML код, который содержит несколько <video> элементов, в которых может играть какой-угодно контент.
Самый простой вариант записать весь этот контент - транслировать на сервер всю вкладку или окно браузера, в котором размещается этот контент. Т.е. вся вкладка транслируется как отдельный стрим, например stream1-tab, и этот стрим записывается на стороне сервера.

Screen Sharing - функция плюс запись.
 

Shiga

New Member
Темплейт - это HTML код, который содержит несколько <video> элементов, в которых может играть какой-угодно контент.
Самый простой вариант записать весь этот контент - транслировать на сервер всю вкладку или окно браузера, в котором размещается этот контент. Т.е. вся вкладка транслируется как отдельный стрим, например stream1-tab, и этот стрим записывается на стороне сервера.

Screen Sharing - функция плюс запись.
Добрый вечер, как я написал выше, этот вариант нам не подходит, т.к:
1. Рекординг в другой вкладке не подходит под т.з.
2. Рекординг в текущей вкладке показывает компоненты которые должны быть скрыты при записи.
(header, footer, righside bar)

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

Max

Administrator
Staff member
Может быть есть еще какой то вариант захвата области вкладки или другой вариант рекордига?
Есть еще один вариант: отрисовывать все, что нужно, на HTML5 Canvas и транслировать его. Однако рендеринг на канвасе в большом разрешении требует значительных ресурсов от браузера, а также требует, чтобы вкладка, в которой обновляется канвас, всегда была на переднем плане: в фоновой вкладке захват по таймеру начинает давать фризы, а RequestAnimationFrame API перестает работать в принципе.
Вариант с микшером https://docs.flashphoner.com/pages/viewpage.action?pageId=1048855 нам не подходит, потому что нужна стилизация и смена теплейтов в live.
По ссылке приведена документация для устаревшей ветки 5.1. Актуальная версия предлагает больше возможностей микшера, в том числе шаблоны разметки: Размещение картинок потоков в микшере при помощи языка разметки. При этом шаблон на определенное число участников подгружается из файла в момент, когда участник добавляется в микшер, что позволяет, при необходимости, подготовить шаблон на ходу перед добавлением участника.
 

Shiga

New Member
Темплейт - это HTML код, который содержит несколько <video> элементов, в которых может играть какой-угодно контент.
Самый простой вариант записать весь этот контент - транслировать на сервер всю вкладку или окно браузера, в котором размещается этот контент. Т.е. вся вкладка транслируется как отдельный стрим, например stream1-tab, и этот стрим записывается на стороне сервера.

Screen Sharing - функция плюс запись.
Доброго веремени суток!
Столкнулись с такой проблемой, при записи мы создаем миксер с desktop sharing через '#' символ и потом добавляем аудио микшер. Микшер через решетку создается не стабильно ( видео стрим в нем иногда отсутствует ) и при попытке добавить этот стрим десктопа руками - пишет ошибку конфликт ( как будто он там уже есть ). Прикрепил 2 файла с ответами api ( stream/find_all, mixer/find_all ).
 

Attachments

Max

Administrator
Staff member
Микшер через решетку создается не стабильно ( видео стрим в нем иногда отсутствует ) и при попытке добавить этот стрим десктопа руками - пишет ошибку конфликт ( как будто он там уже есть ).
Это означает, что стрим добавился в микшер, но в нем нет видеоданных либо очень редко идут ключевые фреймы, в обоих этих случаях для стрима в микшере будет отображаться черный экран. Если Вы попробуете играть такой стрим непосредственно с сервера, он скорее всего не будет проключаться, т.е. покажет статус PLAYING, но картинка не появится.
Учитывая, что речь идет о потоке с экрана, скорее всего разрешение FullHD или выше (особенно если трансляция идет с Mac), и для публикации такого потока может не хватать пропускной способности или качества исходящего канала (от публикующего клиента до сервера). Можно попробовать снизить разрешение трансляции экрана
Code:
var constraints = {
    video: {
        width: 1280,
        height: 720,
        frameRate: 15,
        type: "screen",
        withoutExtension = true
    }
};
...
session.createStream({
    name: streamName,
    display: localVideo,
    constraints: constraints
    ...
}).publish();
Также может помочь переключение на TCP транспорт
Code:
session.createStream({
    name: streamName,
    display: localVideo,
    constraints: constraints,
    transport: "TCP"
    ...
}).publish();
 

Shiga

New Member
Добрый день, мы попробовали создавать микшер не через '#'.
Юзер публикует свой аудио поток, на PUBLISHING мы создаем миксер ( если его нет) через rest-api и добавляем стрим аудио в микшер.
Но в /mixer/find_all у микшера поле mediaSessions пусто. При добавлении руками еще раз "Conflict. 666 already added to mixer". Стрим есть, если его прослушивать все хорошо, но микшер пуст.
 

Max

Administrator
Staff member
Пожалуйста, обновите WCS до последней сборки 5.2.1261. Если проблема продолжает воспроизводиться соберите отчет, как описано здесь, включая клиентские дебаговые логи, и пришлите архив, собранный при помощи скрипта report.sh, используя эту форму. Если отчет занимает более 30 Мб, выложите в облако и укажите ссылку в комментариях к форме.
 
Top