javascript - 当源是 IE/EDGE 上的加密 token 视频时，Canvas 无法从 azure 媒体播放器绘制图像

Question

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

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

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

将来我将从 html 中删除视频元素，仅在 JavaScript 中创建并在 Canvas 中写入一些文本作为水印。

<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 中， Canvas 显示为视频，在 IE 中， Canvas 显示为黑色。

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

Answer 1

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