Холст видео CORS

Question

У меня есть следующий код, полученный из http://jakearchibald.com/scratch/alphavid/

$("#video").append('<video id="movie" style="display:none" autobuffer><source id="srcMp4" src="https://host-away-from-host.com/file.mp4" type=\'video/mp4; codecs="avc1.42E01E"\' /></video>'+
'<canvas width="711" height="800" id="buffer" style="display:none"></canvas>'+
'<canvas width="711" height="400" id="output"></canvas>');

var outputCanvas = document.getElementById('output'),
    output = outputCanvas.getContext('2d'),
    bufferCanvas = document.getElementById('buffer'),
    buffer = bufferCanvas.getContext('2d'),
    video = document.getElementById('movie'),
    width = outputCanvas.width,
    height = outputCanvas.height,
    interval;


function processFrame() {
    buffer.drawImage(video, 0, 0);

    // this can be done without alphaData, except in Firefox which doesn't like it when image is bigger than the canvas
    var image = buffer.getImageData(0, 0, width, height),
        imageData = image.data,
        alphaData = buffer.getImageData(0, height, width, height).data;

    for (var i = 3, len = imageData.length; i < len; i = i + 4) {
        imageData[i] = alphaData[i-1];
    }

    output.putImageData(image, 0, 0, 0, 0, width, height);
}

video.addEventListener('play', function() {
    clearInterval(interval);
    interval = setInterval(processFrame, 40)
}, false);

Он берет видео и загружает его в холст для прозрачности.

Однако я используюCDN для моего видео, и Chrome не доволен этими данными из разных источников.

Я уже настроил правильные заголовки CORS (но был бы признателен за контрольный список) в моей CDN, но я не знаю, как реализовать эти предлагаемые изменения в этом коде;http://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html

Буду признателен за любые советы по этому вопросу!

Спасибо!

Answer 1

Если вы правильно настроили CORS на своем удаленном CDN, вам нужно добавить crossorigin="use-credentials" к вашему тегу <video>.

это должно выглядеть так:

<video id="movie" style="display:none" preload="auto" crossorigin="use-credentials">

Если вы используете и s3 bucket, вы можете установить CORS на что-то вроде этого:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

Answer 2

Согласно этому отчету об ошибках Firefox 12+ поддерживает видео CORS:

https://bugzilla.mozilla.org/show_bug.cgi?id=682299

Как сделать ресурсы CORS осведомленными:

https://developer.mozilla.org/en/CORS_Enabled_Image

https://developer.mozilla.org/en/WebGL/Cross-Domain_Textures

Должно применяться и к другим современным браузерам, но я предлагаю вам проверить, какие браузеры являются современными.