В Web SDK отсутствует возможность указать атрибуты video-тега

Discussion in 'Web Call Server 5' started by Axel, Feb 7, 2020.

  1. Axel

    Axel New Member

    Здравствуйте.

    WebRTC использует video-тег, у которого есть атрибут "controls", наличие которого включает отображение различных кнопок: play\pause, ползунок громкости, кнопка fullscreen и так далее. Не нашёл способа как-либо управлять атрибутами этого video-тега посредством Web SDK. Для упомянутых выше целей у Web SDK есть специальное API, которое позволяет управлять громкостью, воспроизведением и так далее, однако, это делается лишь программно, а задача стоит показать пользователю эти элементы управления.

    Можно нарисовать самостоятельно такие кнопки, внедрить в контейнер с плеером, обвешать слушателями событий и подвязать упомянутое выше API. Но это создаёт слишком много трудностей, к тому же, стандартные элементы управления из video-тега отображаются иначе в разных браузерах или ОС, улучшая UX, чего ещё сложнее добиться в случае самостоятельной реализации таких элементов управления.

    Второй способ - пытаться достучаться до video-тега посредством CSS-селекторов и навешивать нужны атрибут на него. Делается, фактически, одной строкой. Но тут опять всплывают вопросы о том, что надо контролировать появление и исчезание этого тега (остановка и запуск плеера), что тоже требует написания некой минимальной обвязки в коде и её поддержки. Такой путь выглядт как хак в обход Web SDK, к чему он может привести (сейчас или в будущем) - сказать сложно.

    Единственной проблемой, думаю, является то, что этот атрибут включает сразу все опции управления, включая ползунок перемотки, что для лайв-потоков лишено практического смысла (но и ломать ничего не должно).

    Есть ли возможность включать эти кнопки посредством передачи некоего флага? В документации ничего полезного не нашёл, наличие такой опции сняло большое количество проблем. Возможно, не лишним будет предусмотреть возможность указывать атрибуты вообще (списком), а не только лишь "controls", а так же, методы API для управления этим программно.
  2. Axel

    Axel New Member

    Добавлю, что существует так же новый атрибут "controlsList", который позволяет управлять точечно тем, какие элементы будет отрисовывать встроенный плеер. Тут есть примеры его применения. Пока что этот атрибут довольно сырой, но уже работает и имеет смысл заложить и его поддержку.
  3. Max

    Max Administrator Staff Member

    Добрый день.
    Вы можете использовать свой тэг video с атрибутом controls, достучаться до него можно, передав его в опцию remoteVideo при создании потока для воспроизведения. Немного изменим стандартный пример Two Way Streaming:
    1. Указываем на странице two_way_streaming.html тэг video для плеера
    Code:
    ...
               <div class="col-sm-6">
                    <div class="text-center text-muted">Player</div>
                    <div class="fp-Video">
                        <div id="remoteVideo" class="display"><video id="videoControls" controls="controls"></video></div>
                    </div>
    ...
    
    2. Передаем наш тэг в функцию создания потока для воспроизведения
    Code:
    var videoControls = document.getElementById("videoControls");
    ...
    function playStream() {
        var session = Flashphoner.getSessions()[0];
        var streamName = $('#playStream').val();
    
        session.createStream({
            name: streamName,
            display: remoteVideo,
            remoteVideo: videoControls
        }).on(STREAM_STATUS.PENDING, function (stream) {
            var video = videoControls;
            if (!video.hasListeners) {
                video.hasListeners = true;
                video.addEventListener('resize', function (event) {
                    resizeVideo(event.target);
                });
            }
        ...
        }).play();
    }
    ...
    
    Результат на скриншоте. Все контролы работают, кроме перемотки.
    upload_2020-2-10_11-13-39.png
  4. Axel

    Axel New Member

    Спасибо. Весьма неявная логика, стоило бы её где-нибудь задокументировать.
  5. Axel

    Axel New Member

    К слову, опция "remoteVideo" отсутствует в документации к "Session.createStream()".
  6. Max

    Max Administrator Staff Member

    Мы создали внутренний тикет WCS-2516 по добавлению описания и примера использования опции в доки, о результах сообщим здесь.
    Отметим, что пример использования в документации все же есть, но он касается специфичного случая интеграции VR-плеера, и атрибут controls в этом примере не используется.

Share This Page