如何在 Shaka Player 发出的清单请求中包含自定义 headers？

Question

非常感谢您花时间回复。假设我必须按照以下要求播放直播；我怎样才能为浏览器制作一个可用的播放器？

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

清单 URL 需要特殊 headers 是；

HeaderName = "manName1" HeaderValue = "manValue1"

HeaderName = "manName2" HeaderValue = "manValue2"

Widevine 许可证 URL = "https://widevine-license.com"

Widevine 许可证需要特殊的 headers 是；

HeaderName = "licName1" HeaderValue = "licValue1"

HeaderName = "licName2" HeaderValue = "licValue2"

根据以上信息，我制作了以下播放器，但我不知道将 headers 用于发出请求时所需的清单。

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

由于我的编程技能不多，能否回复包含清单的适当播放器代码 headers，这将非常有帮助，提前感谢您的宝贵时间。

Answer 1

我运行在充满 Shaka（和 Clappr 分机）的 Clappr 上使用以下设置。说明也适用于任何其他基于 Shaka 的视频客户端。参考https://shaka-player-demo.appspot.com/docs/api/tutorial-license-server-auth.html.

就我而言，文档与从 player.getNetworkingEngine().registerRequestFilter 返回的捕获类型的方式之间可能存在不匹配。与文档中不同，我发现 2 个对应于 WV 请求。

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";
        }
    });                                
};

有关 Clappr 文档，请参阅：https://github.com/clappr/dash-shaka-playback

Answer 2

感谢大家的帮助，但我能够弄清楚如何使用以下代码实现它。

  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 函数引用：https://shaka-player-demo.appspot.com/docs/api/shaka.net.NetworkingEngine.html

一些 headers 被禁止，您不能向他们发送推荐人：https://developer.mozilla.org/en-US/docs/Glossary/Forbidden_header_name

禁止 headers 的解决方法使用浏览器扩展来应用自定义 headers 例如https://modheader.com/

如何在 Shaka Player 发出的清单请求中包含自定义 headers？

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

javascript

http-live-streaming

request-headers

widevine

shaka