Group Video Watching with Laravel

Photo by Victoria Art on Pixabay

A group wants to stream videos, with the presenter selecting the movies to watch, controlling the play/pause, and seeking interesting moments. Such a presentation experience is useful for webinars, and education, among others.

We describe how to implement the experience in Laravel with the TALL stack.

Presentation Events

These events will be broadcast by the presenter:

1. Choice of video
2. Play
3. Pause
4. Going to a moment in the video

Events are broadcast using Laravel Echo Server, Laravel Websockets, or Soketi. Say on a channel streaming.

Listening to Events

In the participant Livewire component, we define the listeners:

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

Processing Events

Each event is dispatched to the front-end Alpine.js code using dispatchBrowserEvent.

For example, for going to a video moment, on the instruction of the presenter,