Recherche avancée

Sur d’autres sites (4994)

• How to add a token verification in url with Laravel when playing HLS videos ?

  31 mars 2022, par Philip

  I have been playing with Laravel and FFMPEG for few weeks but got stuck. Hope someone could help here. Thank you in advanced.

  


  Background

  


  I have a video website build with Laravel 9. I use FFMPEG to convert uploaded MP4 to HLS with laravel-ffmpeg package. AES encryption is applied. Then I store the converted m3u8 playlist, key and ts file in Storage path with symlinks created to public folder. I stored the path in database and call it in view file. I use plyr + hls.js to play the video. Everything is working fine.

  


  However, I would like to further protect my videos from being played by other website. I blocked the cross domain access in Nginx but seem it only check the referrer which could be faked. I can see many video websites that their m3u8 path contains a token parameter :

  


  https://some-domain.com/videos/index.m3u8?token=abc123456


  


  I am trying to do the same but stuck.

  


  These are my Laravel files

  


  VideoController

  


  This will convert mp4 to m3u8 , key, ts files and save to database

  


  FFMpeg::fromDisk('videos')
    ->open($queue->path)
    ->exportForHLS()
    ->withRotatingEncryptionKey(function($filename,$content) use($queue){
        Storage::disk('videos')->put('m3u8/'.$queue->video->slug.'/'.$filename, $content);
    })
    ->setSegmentLength(10) // optional
    ->setKeyFrameInterval(48) // optional
    ->onProgress(function ($percentage, $remaining, $rate) use($queue){
        $queue->update([
            'is_processing'=>true,
            'percentage'=>$percentage,
            'remaining'=>$remaining,
            'rate'=>$rate,
        ]);
    })
    ->addFormat($resolution_720)
    ->save($m3u8_path);


  


  blade file

  


  This will show the m3u8 playlist path and pass to js file

  


  @if (isset($video->play_url)  &amp;&amp; $video->play_url != &#x27;&#x27;)&#xA;    <div class="col-12 mb-3 single-video">&#xA;        <video playsinline="playsinline" controls="controls" muted="muted">&#xA;&#xA;        </video>&#xA;        <code class="echappe-js">&lt;script&gt; &amp;#xA;            var m3u8 = &quot;{{ $video-&gt;play_url }}&quot; &amp;#xA;            var token = &amp;#x27;token_xxxxxxxx&amp;#x27;&amp;#xA;        &lt;/script&gt;&#xA;    

  
@endif


  


  js file

  


  This will play the video (with plyr player)

  


  const player = new Plyr('#player');
if(typeof(m3u8) != "undefined" && m3u8 !== null){
    m3u8 =  m3u8 + '?token=' + token
    console.log(m3u8,token)
    var video = document.getElementById('player');
    if(Hls.isSupported()) {
        var hls = new Hls();
        hls.loadSource(m3u8);
        hls.attachMedia(video);

    }else if (video.canPlayType('application/vnd.apple.mpegurl')) {
        video.src = m3u8;

    }

}


  


  If I remove "token" from the above code. The video plays fine. But now I could like to check if the token valid before returning the file. I remove the symlink to prevent direct access to the file.

  


  public_path('m3u8') => storage_path('app/videos/m3u8'),


  


  Route

  


  in web.php, I added few routes to check the token

  


      Route::get('/m3u8/{slug}/{filename}.m3u8', [VideoController::class, 'get_m3u8'])->name('video.m3u8');
    Route::get('/m3u8/{slug}/{filename}.ts', [VideoController::class, 'get_ts'])->name('video.ts');
    Route::get('/m3u8/{slug}/{filename}.key', [VideoController::class, 'get_key'])->name('video.key');


  


  Then in VideoController

  


  public function get_m3u8(Request $request ,$slug ,$filename)
{
        if($request->token == 123){
            return response()->file(storage_path('app/videos/m3u8/'.$slug.'/'.$filename .'.m3u8'),[
                'Content-Type' => 'application/x-mpegURL',
            ]);
        }else{
            return abort('403');
        }
}


  


  But the video cannot be played. Because when loading index.m3u8, it loads index_0_1200.m3u8 next and then load the rest of ts files which all do not contain the token. But I cannot add to token duration the conversion from mp4 to hls because in actually case the token will be dynamic such as adding timestamp.

  


  Please advise. Thank you. My final aim is to prevent other from using the m3u8 playlist and key files to play my ts files. It will consume a lot of bandwidth.