Групповой просмотр видео с помощью Laravel

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

Мы опишем, как реализовать этот опыт на Laravel с помощью стека TALL.

События презентации

Эти события будут транслироваться ведущим:

1. Выбор видео
2. Воспроизвести
3. Пауза
4. Переход к моменту в видео

События транслируются с помощью Laravel Echo Server, Laravel Websockets или Soketi. Скажем, на канале streaming.

Прослушивание событий

В компоненте участника Livewire мы определяем слушателей:

protected $listeners = [
    'echo:steaming,VideoChoice' => 'process_video_choice',
    'echo:steaming,Play' => 'play',
    'echo:streaming,Pause' => 'pause',
    'echo:streaming,GoToMoment' => 'process_goto'
];

Обработка событий

Каждое событие диспетчеризируется во внешний код Alpine.js с помощью dispatchBrowserEvent.

Например, для перехода к видеомоменту по указанию ведущего,

private function process_goto($data) 
{
    $moment = $data['moment];

    $this->dispatchBrowserEvent('goto-moment', ['moment' => $moment]); 
}

Управление видео в браузере

В Alpine.js мы слушаем события из Livewire, а затем:

1. Переходим к нужному моменту видео
2. Переключить видео
3. Воспроизвести
4. Приостановить

Например, для перехода к моменту и для переключения видео,

<video x-ref="video" 
    x-data="{ play: false }" 
    @goto-moment.window="$refs.video.currentTime = event.detail.moment"
    @video-choice.window="$refs.video.src = event.detail.video_file_path; $refs.video.load();"
>

</video>

Интерфейс презентера

Веб-страница со списком видео и видеоплеером.

Для простоты предположим, что ведущий имеет на веб-странице элемент HTML video.

Воспроизведение и пауза на элементе видео передаются из Alpine.js с помощью,

Livewire.emit('play');
Livewire.emit('pause');

и при переходе к какому-либо моменту в видео,

Livewire.emit('seek', { 'moment': $this.refs.video.currentTime });

Для обработки в Livewire, в слушателе,

protected $listeners = ['seek' => 'process_seek'];

public function process_seek($data)
{
    $moment = $payload['moment'];
}