CODEWITHSUNDEEP
nginxvideo.jslive-streaming
Ajitabh Pandey
Ajitabh Pandey

Reputation: 223

Appending paramaters to each m3u8 and ts file while playing live stream

I am using videojs in live streaming environment and using nginx secure URLs to protect the stream. See here for the details - https://www.nginx.com/blog/securing-urls-secure-link-module-nginx-plus/

The algorithm works fine and the player is able to detect when the live.m3u8 file becomes available. However, when playing the stream, I just get a spinning wheel. On the JS console, I see that the sub-playlist e.g. live_109.m3u8 URL does not have the required md5 hash and expiry timestamp and hence nginx is returning 403.

The stream URL format is - 

https://example.com/video/live.m3u8?md5=xznbbmbbbbbxncb&expire=123456788

When I play the stream, the console suggest that the player is now trying to call 

https://example.com/video/live_109.m3u8

And since without the md5 and expiry parameters, nginx will send 403, I am getting that.

Adding ?md5=xznbbmbbbbbxncb&expire=123456788 works perfect with the live_109.m3u8 also.

I am sure the same problem will be with the individual segments (.ts files)

My question here is that how can I append ?md5=xznbbmbbbbbxncb&expire=123456788 to every .m3u8 and .ts file being called from the page.

Upvotes: 4

Views: 4772

Answers (1)

Ajitabh Pandey
Ajitabh Pandey

Reputation: 223

I found the answer myself. The following snippet shows as to how to do it with the help of http-streaming library of videojs - 

<script src="https://unpkg.com/@videojs/[email protected]/dist/videojs-http-streaming.js"></script>

<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" 
  data-setup='{}'>
  </video>

  <script>
    videojs.Hls.xhr.beforeRequest = function(options){
      options.uri = options.uri+'/liveout/?md5=_PwgAm2z_kO8FgmWRWXvhQ&expires=1574698730';
      //.replace('cloudfront.net', 'foo.com');
      console.log(options);
      return options;
    };
    var player=videojs('my_video_1');
    player.ready(function() {
      this.src({
        src: 'https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8',
        type: 'application/x-mpegURL'
      });

    });    
  </script>

Upvotes: 5

Related Questions