如何在 Shaka Player 發出的清單請求中包含自定義標頭？

Question

非常感謝您抽出時間來回復。 假設我必須按照以下要求播放直播； 如何為瀏覽器制作可工作的播放器？

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

清單 URL 需要特殊的標頭，它們是；

HeaderName = "manName1" HeaderValue = "manValue1"

HeaderName = "manName2" HeaderValue = "manValue2"

Widevine 許可證 URL = "https://widevine-license.com"

Widevine 許可證需要特殊的標題；

HeaderName = "licName1" HeaderValue = "licValue1"

HeaderName = "licName2" HeaderValue = "licValue2"

使用上述信息，我制作了以下播放器，但我不知道將請求時所需的清單標頭放在哪里。

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

由於我的編程技能很少，您能否回復包含清單標題的適當播放器代碼，這將非常有幫助，並提前感謝您的寶貴時間。

Answer 1

我在充滿 Shaka（和 Clappr ext）的 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

某些標題被禁止，您不能向他們發送推薦人： https : //developer.mozilla.org/en-US/docs/Glossary/Forbidden_header_name

禁止標題的解決方法使用瀏覽器擴展來應用自定義標題，例如https://modheader.com/

如何在 Shaka Player 發出的清單請求中包含自定義標頭？

問題描述

2 個解決方案

解決方案1
0 2021-11-13 21:30:47

解決方案2
0 已采納 2021-11-14 22:29:50

如何在 Shaka Player 發出的清單請求中包含自定義標頭？

問題描述

2 個解決方案

解決方案1 0 2021-11-13 21:30:47

解決方案2 0 已采納 2021-11-14 22:29:50

解決方案1
0 2021-11-13 21:30:47

解決方案2
0 已采納 2021-11-14 22:29:50