当来源是IE / EDGE上的加密令牌视频时，Canvas无法从Azure Media Player中绘制Image

Question

我的应用程序在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

Answer 1

由于视频受DRM保护，因此通过设计IE / Edge可以捕获帧的能力-实际上这不是错误，并且在媒体管道中的位置较低。 Chrome当前使用Widevine的实现似乎不会阻止框架，尽管这可能会在不久的将来发生，具体取决于Google未来的设计考虑。