How to include custom headers in manifest request made by Shaka Player?

Question

Thank you so much for taking your time and reply. Lets say I have to play live stream with the following requirements; How can I make a working Player for a browser?

Manifest URL = "https://live-stream-manifest.mpd"

Manifest URL require special headers which are;

HeaderName = "manName1" HeaderValue = "manValue1"

HeaderName = "manName2" HeaderValue = "manValue2"

Widevine License URL = "https://widevine-license.com"

Widevine License require special headers which are;

HeaderName = "licName1" HeaderValue = "licValue1"

HeaderName = "licName2" HeaderValue = "licValue2"

With the above info I made the following player but I don't know where to put the headers for manifest which are required when request is made.

    <head>
    <!-- Shaka Player ui compiled library: -->
    <!-- <script src='dist/shaka-player.ui.js'></script> -->
    <script src='https://cdnjs.cloudflare.com/ajax/libs/shaka-player/3.0.7/shaka-player.ui.min.js' integrity='sha512-KpD7UW8aOliftdEvclj0KBnwh6vKS708SS41xCNr11yjCSAcYxb4+tlaQTfK+GDw2VCv2DxiM2Zu1d3+WqXw+g==' crossorigin='anonymous'></script>
    <!-- Shaka Player ui compiled library default CSS: -->
    <!-- <link rel='stylesheet' type='text/css' href='dist/controls.css'> -->
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/shaka-player/3.0.7/controls.min.css' integrity='sha512-XLwXArwaPbtdmlcbaeNgSF3cBB4Q7T7ptfhEfpkDIc/gkvKk8S413yzTByJ7X9dgOZR/T7NxrQI0HE4hlc+2GQ==' crossorigin='anonymous' />
    <!-- Chromecast SDK (if you want Chromecast support for your app): -->
    <script defer src='https://www.gstatic.com/cv/js/sender/v1/cast_sender.js'></script>
    <!-- Your application source: -->
</head>
<body>
    <!-- The data-shaka-player-container tag will make the UI library place the controls in this div.
         The data-shaka-player-cast-receiver-id tag allows you to provide a Cast Application ID that
           the cast button will cast to; the value provided here is the sample cast receiver. -->
    <div data-shaka-player-container style='max-width:40em'
         data-shaka-player-cast-receiver-id='930DEB06'>
        <!-- The data-shaka-player tag will make the UI library use this video element.
            If no video is provided, the UI will automatically make one inside the container div. -->

            <video autoplay data-shaka-player id='video' style='width:100%;height:100%'></video>
        </div>
    </body>
    <script>
    
   

       const manifestUri = 'https://live-stream-manifest.mpd';
              const licenseServer = 'https://widevine-license.com';
                async functi

on init() {
        // When using the UI, the player is made automatically by the UI object.
        const video = document.getElementById('video');
        const ui = video['ui'];
        const controls = ui.getControls();
        const player = controls.getPlayer();

      player.configure({drm:{servers:{'com.widevine.alpha':licenseServer}}});
      
    // Attach player and ui to the window to make it easy to access in the JS console.
    window.player = player;
    window.ui = ui;

    // Listen for error events.
    player.addEventListener('error', onPlayerErrorEvent);
    controls.addEventListener('error', onUIErrorEvent);

      player.getNetworkingEngine().registerRequestFilter(function(type, request) {
      // Only add headers to license requests:
      if (type == shaka.net.NetworkingEngine.RequestType.LICENSE) {
        // This is the specific header name and value the server wants:
        request.headers['licName1'] = 'licValue1';
        request.headers['licName2'] = 'licValue2';
      }
    });
      
    // Try to load a manifest.
    // This is an asynchronous process.
    try {
        await player.load(manifestUri);
        // This runs if the asynchronous load is successful.
        console.log('The video has now been loaded!');
    } catch (error) {
        onPlayerError(error);
    }
    }

    function onPlayerErrorEvent(errorEvent) {
    // Extract the shaka.util.Error object from the event.
    onPlayerError(event.detail);
    }

    function onPlayerError(error) {
    // Handle player error
    console.error('Error code', error.code, 'object', error);
    }

    function onUIErrorEvent(errorEvent) {
    // Extract the shaka.util.Error object from the event.
    onPlayerError(event.detail);
    }

    function initFailed(errorEvent) {
    // Handle the failure to load; errorEvent.detail.reasonCode has a
    // shaka.ui.FailReasonCode describing why.
    console.error('Unable to load the UI library!');
    }

    // Listen to the custom shaka-ui-loaded event, to wait until the UI is loaded.
    document.addEventListener('shaka-ui-loaded', init);
    // Listen to the custom shaka-ui-load-failed event, in case Shaka Player fails
    // to load (e.g. due to lack of browser support).
    document.addEventListener('shaka-ui-load-failed', initFailed);
</script>

Since I have little programming skills, can you reply with the appropriate player code including manifest headers, it will be so helpful and thank you in advance for your precious time.

score 2 · Accepted Answer · answered Nov 14 '21 at 22:29

Thank you all for your assistance but i was able to figure out how to implement this with the following code.

  player.getNetworkingEngine().registerRequestFilter(function(type, request) {
  // This are headers to license requests:
if (type == shaka.net.NetworkingEngine.RequestType.LICENSE) {
    // This is the specific header name and value the server wants:
    request.headers['licName1'] = 'licValue1';
    request.headers['licName2'] = 'licValue2';
  }
    // This function filters manifest request and add custom headers:
if (type == shaka.net.NetworkingEngine.RequestType.MANIFEST) {
    // This are headers to manifest requests:
    request.headers['manName1'] = 'manValue1';
    request.headers['manName2'] = 'manValue2';
  }
});

NetworkingEngine function referrer: https://shaka-player-demo.appspot.com/docs/api/shaka.net.NetworkingEngine.html

Some headers are forbidden you can't send them referrer: https://developer.mozilla.org/en-US/docs/Glossary/Forbidden_header_name

Workaround to forbidden headers use browser extensions to apply custom headers e.g. https://modheader.com/

score 0 · Answer 2 · edited Nov 14 '21 at 01:51

I'm running on Clappr filled with Shaka (& Clappr ext) and used settings below. Instructions should apply to any other Shaka based video client as well. Refer to https://shaka-player-demo.appspot.com/docs/api/tutorial-license-server-auth.html.

In my case, there was possibly mismatch between documentation and the way of catching type returning from player.getNetworkingEngine().registerRequestFilter. Unlike in documentation, I found 2 to correspond WV request.

playerCfg.shakaConfiguration.drm = {                               
    retryParameters: { maxAttempts: 5 },                            
    servers: {
        'com.widevine.alpha': "https://wv-server.com/license"
    }
};
playerCfg.shakaOnBeforeLoad = function(player) {
    player.getNetworkingEngine().registerRequestFilter(function(type, request) {
        if (type == 2) {
            request.headers['authorization'] = "eyADjdadosj0cj9a0sc90cj90asca";
        }
    });                                
};

For Clappr documentation, see: https://github.com/clappr/dash-shaka-playback

Thank you for your precious time to answer this but I was able to figure this out, I am posting the answer now. — ABDULWAHAB KABANGA, Nov 14 '21 at 22:17
@ABDULWAHABKABANGA can you please share your solution? I am having same trouble. Thank you. — vanminhquangtri, Mar 02 '23 at 07:47

How to include custom headers in manifest request made by Shaka Player?

2 Answers2