Zrzut ekranu z filmem HTML5 na płótnie za pomocą CORS

Question

Mam problem z uzyskiwaniem zrzutów ekranowych filmów wideo w przeglądarce Chrome i wyczerpałem wszystkie internetowe i wszystkie odpowiedzi na pytania Stackoverflow; brak szczęścia.

Bez względu na to, co próbuję, gdy próbuję użyć elementu canvas, aby zrobić zrzut ekranu z filmu wideo znajdującego się w innej domenie lub nawet innego portu, otrzymam komunikat o błędzie Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported..

Oto moja konfiguracja:

aplikacja Web URL
http://client.myapp.com/home.html

CDN URL (Próbowałem zarówno)
http://client.myapp.com:8181/somevideo.mp4
http://cdn.myapp.com/somevideo.mp4

nagłówki wysyłane z powrotem MP4 z CDN:

Accept-Ranges:bytes 
Access-Control-Allow-Origin:* 
Access-Control-Expose-Headers:x-ms-request-id,Server,x-ms-version,Content-Type,Last-Modified,ETag,x-ms-lease-status,x-ms-lease-state,x-ms-blob-type,Accept-Ranges,Content-Length,Date,Transfer-Encoding 
Content-Length:5253832 
Content-Range:bytes 48-5253879/5253880 
Content-Type:video/mp4 
Date:Sat, 06 Feb 2016 17:24:05 GMT 
ETag:"0x8D32E3EDB17EC00" 
Last-Modified:Fri, 05 Feb 2016 15:13:08 GMT 
Server:Windows-Azure-Blob/1.0 Microsoft-HTTPAPI/2.0 
x-ms-blob-type:BlockBlob 
x-ms-lease-state:available 
x-ms-lease-status:unlocked 
x-ms-request-id:88d3aaef-0629-4316-995f-021aa0153c32 
x-ms-version:2015-04-05 

mam:

• Dodany crossOrigin="anonymous" z elementem wideo, ale to właśnie sprawia, że ​​film nie ładować całkowicie
• Próbował nawet samą domenę na innym porcie (jak wyżej)
• Upewnij się, że Access-Control-Allow-Origin powraca z * (jak wyżej)
• Nie wierzę, że to DRM, ponieważ zrzut ekranu działa dobrze, jeśli skopiuję dokładnie ten sam plik wideo do sieci Aplikacja i załadować go lokalnie
• przebiegać przez wszystkie odpowiedzi do this question, ale to nie dla obrazów wideo w każdym razie i odpowiedzi opisać wszystkie poprzednie punkty

Jednak nadal piaskowane błędach.

Edit
kod Dodano:

var getScreenshotDataUrl = function(video, canvas, type) { 
    type = type || "image/jpeg"; 
    var context = canvas.getContext("2d"); 
    var w = video.videoWidth; 
    var h = video.videoHeight; 
    canvas.width = w; 
    canvas.height = h; 
    context.fillRect(0, 0, w, h); 
    context.drawImage(video, 0, 0, w, h); 
    video.crossorigin = "anonymous";// makes no difference 
    return canvas.toDataURL(type); 
} 

Proszę o pomoc.

Answer 1

Odpowiedziałem na własne pytanie.

Co za straszny ból głowy mam teraz.

Problem leży gdzieś w dopracowanej specyfikacji specyfikacji crossorigin/CORS HTML5.

I tylko przetestowane w Chrome i Edge, ale tutaj jest to, co trzeba wiedzieć, w chwili pisania tego tekstu:

Chrome

Ładowanie wideo HTML5 zawiedzie jeśli masz crossOrigin zestaw, ale Twój film jest podawane z każdego portu innego niż i jest nie użyciu https:

TO zawiedzie
klienta w http://www.myapp.com/player.html:

<video crossOrigin="anonymous" src="http://cdn.myapp.com:81/video.mp4"></video> 

TO uda
Client w http://www.myapp.com/player.html:

<video crossOrigin="anonymous" src="https://cdn.myapp.com:81/video.mp4"></video> 

Chrome i krawędzi

getImageData() i toDataURL() będzie bezpieczeństwo zablokowany chyba:

• crossorigin jest ustawiony na anonymous lub use-credentials (as defined here) przed film jest załadowany. Jeśli zrobisz to zbyt późno, nadal będzie to niemożliwe.

Wszystko

Wreszcie, jeśli masz zamiar ustawić crossOrigin w javascript, należy używać odpowiedniego obudowę dla właściwości javascript: crossOrigin (NIE crossorigin)

I have written this up in a little more detail in my blog.