Recherche avancée

Sur d’autres sites (10246)

• Video Conferencing in HTML5 : WebRTC via Socket.io

  
  1er janvier 2014, par silvia

  Six months ago I experimented with Web sockets for WebRTC and the early implementations of PeerConnection in Chrome. Last week I gave a presentation about WebRTC at Linux.conf.au, so it was time to update that codebase.

  I decided to use socket.io for the signalling following the idea of Luc, which made the server code even smaller and reduced it to a mere reflector :

   var app = require(’http’).createServer().listen(1337) ;
   var io = require(’socket.io’).listen(app) ;
   io.sockets.on(’connection’, function(socket) 
  
           socket.on(’message’, function(message) 
  
           socket.broadcast.emit(’message’, message) ;
  
       ) ;
  
   ) ;
  

  Then I turned to the client code. I was surprised to see the massive changes that PeerConnection has gone through. Check out my slide deck to see the different components that are now necessary to create a PeerConnection.

  I was particularly surprised to see the SDP object now fully exposed to JavaScript and thus the ability to manipulate it directly rather than through some API. This allows Web developers to manipulate the type of session that they are asking the browsers to set up. I can imaging e.g. if they have support for a video codec in JavaScript that the browser does not provide built-in, they can add that codec to the set of choices to be offered to the peer. While it is flexible, I am concerned if this might create more problems than it solves. I guess we’ll have to wait and see.

  I was also surprised by the need to use ICE, even though in my experiment I got away with an empty list of ICE servers – the ICE messages just got exchanged through the socket.io server. I am not sure whether this is a bug, but I was very happy about it because it meant I could run the whole demo on a completely separate network from the Internet.

  The most exciting news since my talk is that Mozilla and Google have managed to get a PeerConnection working between Firefox and Chrome – this is the first cross-browser video conference call without a plugin ! The code differences are minor.

  Since the specification of the WebRTC API and of the MediaStream API are now official Working Drafts at the W3C, I expect other browsers will follow. I am also looking forward to the possibilities of :

  • multi-peer video conferencing like the efforts around webrtc.io,
  • the media stream recording API,
  • and the peer-to-peer data API.

  The best places to learn about the latest possibilities of WebRTC are webrtc.org and the W3C WebRTC WG. code.google.com has open source code that continues to be updated to the latest released and interoperable features in browsers.

  The video of my talk is in the process of being published. There is a MP4 version on the Linux Australia mirror server, but I expect it will be published properly soon. I will update the blog post when that happens.

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