文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在Shaka播放器发出的清单请求中包含自定义头部？

问如何在Shaka播放器发出的清单请求中包含自定义头部？
EN

Stack Overflow用户

提问于 2021-11-04 11:11:31

回答 2查看 509关注 0票数 0

非常感谢您花时间回复我。假设我必须播放符合以下要求的实时流；我如何为浏览器制作一个可以工作的播放器？

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

清单URL需要特殊的标头；

HeaderName = "manName1“HeaderValue = "manValue1”

HeaderName = "manName2“HeaderValue = "manValue2”

广域许可URL = "https://widevine-license.com“

广域许可证需要特殊的头部，这些头部是；

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>

由于我几乎没有编程技巧，你可以回复适当的播放器代码，包括清单标题，这将是非常有帮助的，并提前感谢您的宝贵时间。

javascript

http-live-streaming

request-headers

widevine

shaka

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-11-14 22:29:50

感谢你们的帮助，但我能够用以下代码来实现这一点。

  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

有些标头是被禁止的，你不能将它们发送给referrer：https://developer.mozilla.org/en-US/docs/Glossary/Forbidden_header_name

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

票数 1

Stack Overflow用户

发布于 2021-11-13 21:30:47

我正在用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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69838331

复制

相似问题

问如何在Shaka播放器发出的清单请求中包含自定义头部？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Shaka播放器发出的清单请求中包含自定义头部？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Shaka播放器发出的清单请求中包含自定义头部？
EN