Laravel을 사용한 그룹 비디오 시청

그룹에서 발표자가 볼 영화를 선택하고 재생/일시 중지를 제어하고 흥미로운 순간을 찾는 비디오 스트리밍을 원합니다. 이러한 프레젠테이션 경험은 특히 웨비나 및 교육에 유용합니다.

TALL 스택을 사용하여 Laravel의 경험을 구현하는 방법을 설명합니다.

프레젠테이션 이벤트

다음 이벤트는 발표자가 방송합니다.

비디오 선택

놀이

일시정지

비디오의 한 순간으로 이동

이벤트는 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'
];

이벤트 처리

각 이벤트는 dispatchBrowserEvent 를 사용하여 프런트 엔드Alpine.js 코드로 전달됩니다.

예를 들어 비디오 순간으로 이동하려면 발표자의 지시에 따라

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

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

브라우저에서 비디오 제어

Alpine.js에서는 Livewire의 이벤트를 수신한 후 다음을 수행합니다.

원하는 동영상 순간으로 이동

비디오 전환

놀이

일시정지

예를 들어 잠시 시간을 내거나 동영상을 전환하려면

<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>

발표자 인터페이스

비디오 목록과 비디오 플레이어가 있는 웹 페이지.

단순화를 위해 발표자가 웹 페이지에 HTMLvideo 요소를 가지고 있다고 가정합니다.

동영상 요소의 재생 및 일시 중지는 다음을 사용하여 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'];
}