当源是IE/EDGE上的加密令牌视频时，Canvas未从azure媒体播放器中提取图像

Canvas not drawImage from azure media player when source is encrypted token video on IE/EDGE

本文关键字：未从 Canvas azure 媒体播放器 图像 提取 视频 令牌 IE EDGE 加密      更新时间：2023-09-26

我的应用程序在Chrome中运行良好，但在IE/EDGE中，画布不会显示视频。

当我使用加密视频作为源代码时，这种情况就开始发生了，当我使用开源视频时，画布显示了视频。我找不到解决方案，主要是因为IE/EDGE不会在开发者工具控制台中显示错误。

IE/EDGE有一些政策不允许绘制加密视频？

将来我将从html中删除视频元素，只在javascript中创建，并在画布中写一些文本作为水印。

<canvas runat="server" id="canvas1"></canvas>
<video 
    id="video1" 
    runat="server" 
    class="azuremediaplayer amp-default-skin amp-big-play-centered" 
    controls 
    poster="">
</video>
<script>
    var videoElement = document.getElementById('<%=video1.ClientID%>');
    videoElement.setAttribute('webkit-playsinline', 'true');
    videoElement.width = '1280';
    videoElement.height = '720';
    var x, y, min, tempo = 0;
    var nroRender = 201;
    var myPlayer = amp(videoElement);
    myPlayer.src([{
        src: '<URL VIDEO>',
        protectionInfo: [
        {
            type: 'Widevine',
            authenticationToken: 'Bearer=<TOKEN>'
        }, {
            type: 'PlayReady',
            authenticationToken: 'Bearer=<TOKEN>'
        }]
    }]);
    var canvasElement = document.getElementById('<%=canvas1.ClientID%>');
    canvasElement.width = '1280';
    canvasElement.height = '720';
    var ctx = canvasElement.getContext('2d');
    function desenha() {
        ctx.clearRect(0, 0, canvasElement.width, canvasElement.height);
        ctx.drawImage($('#video1 video')[0], 0, 0, canvasElement.width, canvasElement.height);
    }
    function loop() {
        desenha();
        setTimeout(loop, 1000 / 60);
    }
    loop();
</script>

如果你有一些问题来理解问题所在，请在Chrome中运行，然后在IE中运行。在Chrome中，画布看起来像视频，在IE中，画布显示为黑色。

完整代码https://github.com/tobiasrighi/video-canvas/blob/master/WebForm1.aspx

由于视频受DRM保护，通过设计IE/Edge阻止了捕获帧的能力-这实际上不是一个错误，这是在媒体管道中建立的。Chrome目前在Widevine上的实现似乎没有阻止帧，尽管这可能在不久的将来发生，这取决于谷歌未来的设计考虑。

相关文章：