當來源是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未來的設計考慮。