Way to set custom headers for the authentication in the webviewer-video module

[lukapopovic]

Hi guys,

I am evaluating the usage of the webviewer video component in our application. But I've hit a bit of a road block. Since the url where I host the video is secured, I need to pass authentication headers when supplying the url to the component. In a similar way as the loadDocument function works with the custom headers. Is there a way to do the same thing with the loadVideo call? I couldn't find it in the documentation.

Thanks in advance!
Cheers

[khein-pdftron]

Hello. This is pretty difficult to do because we are using the video element and it does not allow custom headers.

We did make a workaround that uses service workers to inject custom headers with the authentication token. See the branch and relevant code here:
https://github.com/PDFTron/webviewer-video-sample/blob/feature/auth-headers-injection/src/index.js
https://github.com/PDFTron/webviewer-video-sample/blob/feature/auth-headers-injection/public/sw.js

The code service worker code would need to be modified to send the correct headers for your server.

[willywwang]

@lukapopovic

We have released custom header support in version 4.9.1 of Webviewer Video. In order to use custom headers, you must run this script: https://github.com/PDFTron/webviewer-video-sample/blob/master/tools/copy-webviewer-files.js to copy over the service worker into your code base to make it work.

After that see example code block below on how you can pass your own headers to attach to any video requests:

WebViewer(...).then(function(instance) {
    const license = '---- Insert commercial license key here after purchase ----';

    const { loadVideo } = await initializeVideoViewer(instance, { license });
    loadVideo('https://www.mydomain.com/my_video_url', {
        headers: {
            'Authorization': 'Basic YWxhZGRpbjpvcGVuc2VzYW1l'
        },
    });
});

As you can see from the image, the header only gets attached to the url that we pass into loadVideo.

Hopefully that helps :)