javascript - HTML5 CORS のサムネイルの生成

Question

この質問には 2 つの部分があります。キャンバスを使用してサムネイル画像を取得するのは簡単です。K Scott Allen がこれをここに投稿しました

基本的に、これはコードであり、私はそれを試しました:

$output = $("#output");
var video = $("#video").get(0);
var canvas = document.createElement("canvas");
    canvas.width = $video.videoWidth * scale;
    canvas.height = $video.videoHeight * scale;
    canvas.getContext('2d')
          .drawImage($video, 0, 0, canvas.width, canvas.height);

    var img = document.createElement("img");
    img.src = canvas.toDataURL();
    $output.prepend(img);

2 番目の部分はより複雑です。私の .mpg ビデオは Azure Media Services によって提供されているため、canvas.getDataUrl() の呼び出しはクロス ドメイン要求であり、失敗します。

CORS ヘッダー/フラグの設定は機能するはずですが、機能しません。この StackOverflow question hereへの回答に含まれる画像の回避策があります。

この回避策には、ボディ ロードで実行される次のコード サンプル関数があります。

function initialize() {

    //will fail here if no canvas support
    try {
        var can = document.getElementById('mycanvas');
        var ctx = can.getContext('2d');
        var img = new Image();
        img.crossOrigin = '';
        //domain needs to be different from html page domain to test cross origin security
        img.src = 'http://lobbydata.com/Content/images/bg_price2.gif';
    } catch (ex) {
        document.getElementById("results").innerHTML = "<span style='color:Red;'>Failed: " + ex.Message + "</span>";
    }

    //will fail here if security error
    img.onload = function () {
        try {
            var start = new Date().getTime();
            can.width = img.width;
            can.height = img.height;
            ctx.drawImage(img, 0, 0, img.width, img.height);
            var url = can.toDataURL(); // if read succeeds, canvas isn't dirty.
            //get pixels
            var imgd = ctx.getImageData(0, 0, img.width, img.width);
            var pix = imgd.data;
            var len = pix.length;
            var argb = []; //pixels as int
            for (var i = 0; i < len; i += 4) {
                argb.push((pix[i + 3] << 24) + (pix[i] << 16) + (pix[i + 1] << 8) + pix[i + 2]);
            }
            var end = new Date().getTime();
            var time = end - start;
            document.getElementById("results").innerHTML = "<span style='color:Green;'>" +
            "Success: Your browser supports CORS for cross domain images in Canvas <br>"+
            "Read " + argb.length+ " pixels in "+ time+"ms</span>";
        } catch (ex) {
            document.getElementById("results").innerHTML = "<span style='color:Red;'>Failed: " + ex + "</span>";
        }

    }

}

私の質問は、K. Scott Allens のコードを変更して CORS ヘッダーを正しく設定し、例の画像ではなくビデオからサムネイルを生成するにはどうすればよいですか?

ビデオ要素とキャンバスの両方で crossOrigin ="" と crossOrigin="Anonymous" を設定してみましたが、うまくいきませんでした。

どんな助けでも大歓迎です。

ロベルト

PS。ブラウザーの CORS イメージ サポートのテストはこちらにあります。そして、サムネイルを取得するこの方法は機能します。ここでそれを使用するページがあります（クロスドメインのものはありません）