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

Question

My application works fine in Chrome, but in IE/EDGE the canvas doesnt show the video.

This started to happen when i use as source a encrypted video, when i used open source video the canvas showed the video. I cant find a solution mostly because IE/EDGE doesnt show errors in developer tools console.

IE/EDGE has some policy that doesnt allow to draw a encrypted video?

In future i will remove video element from html, create only in javascript and write some text in canvas as a watermark.

<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>

If you have some problem to understand what is the problem, run in Chrome and then in IE. In Chrome canvas appears like video, in IE canvas appears black.

Full code in https://github.com/tobiasrighi/video-canvas/blob/master/WebForm1.aspx

Answer 1

Because the video is protected with DRM, by design IE/Edge block the ability to capture frames - its actually not an error and this is built down lower in the media pipeline. It seems Chrome's current implementation with Widevine does not block frames, although this may happen in the near future depending on Google's future design considerations.