javascripthttp-live-streamingrequest-headerswidevineshaka

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


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.


Solution

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