Add custom headers to videojs player source

Question

I have a backend api (using express) that handles a streaming video m3u8 file.

http://localhost:3000/api/stream.m3u8

This endpoint will only work with a proper user token.

router

router.get('/api/stream.m3u8', controller.stream);

controller

exports.stream = function(req, res) {
   var token = ''; // ? not sure how to get access to a sent up token
   if (!token) res.status(401).json('Not authorized');
   // if token is valid, proceed
};

On the front end, I am using videojs.

 var player = videojs('my-player', {})

 // set source to my backend api m3u8 file
 player.src({
    src: 'http://localhost:3000/api/stream.m3u8',
    type: 'application/x-mpegURL'
  });

Is there a way to add a custom header to the videojs plugin to send up data to my backend?

Answer 1

Videojs initialization is happening on client side so you need to pass token before this initialization. I suggest you to initialize Videojs using ajax and send token using Ajax. I hope it helps.

Answer 2

The solution I've gone with was to intercept browser XHR requests(using the xhook npm package) and set headers programmatically. Bellow is a simple example:

...

this.player.src({
  src: SOME_VIDEO_URL,
});

...

/**
 * add manifest authorization header
 */
window.xhook.before((request, callback) => {
  // only set header request for the videojs src url (don't touch other xhr requests)
  if (request.url === SOME_VIDEO_URL) {
    request.xhr.setRequestHeader('Authorization', manifestAuthorization);
  }
  callback();
});