HTML5 Video Screenshot über Leinwand mit CORS

Question

Ich habe ein Problem mit Screenshots von Videos in Chrome, und ich habe alle Internet und alle Stackoverflow Antworten darauf erschöpft; kein Glück.

Egal, was ich versuche, wenn ich versuche, das canvas Element zu verwenden, um einen Screenshot eines Videos, das auf einer anderen Domäne ist, oder auch nur einen anderen Anschluss, dann am Ende mit einem Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. Fehler.

Hier ist mein Setup:

Web App-URL
http://client.myapp.com/home.html

CDN URLs (Ich habe versucht beide)
http://client.myapp.com:8181/somevideo.mp4
http://cdn.myapp.com/somevideo.mp4

Headers mit zurückgeschickt MP4 von 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 

ich habe:

• Added crossOrigin="anonymous", um das Video-Element, aber das macht nur das Video nicht ganz
• sogar die gleiche Domain auf einem anderen Port versucht zu laden (wie oben)
• Sichergestellt, dass Access-Control-Allow-Origin kommt mit * (wie oben)
• Ich glaube nicht, es ist DRM, wie der Screenshot funktioniert gut, wenn ich die exakt gleiche Videodatei ins Web kopieren App und laden Sie es lokal
• Run durch alle Antworten auf this question, aber dies ist für Bilder keine Videos sowieso und die Antworten nur alle vorherigen Punkte beschreiben

Doch nach wie vor die gestrahlt Fehler.

bearbeiten
Added Code:

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); 
} 

Bitte helfen.

Answer 1

Ich habe meine eigene Frage beantwortet.

Was für eine schreckliche Kopfschmerzen habe ich jetzt.

Das Problem liegt irgendwo in der nuancierten Spezifikation der HTML5-Video Crossorigin/CORS-Spezifikation.

ich nur in Chrome und Edge-getestet, aber hier ist das, was Sie zum Zeitpunkt des Schreibens wissen müssen:

Chrome

HTML5-Video-Laden fehl wenn Sie crossOrigin gesetzt haben, aber Ihr Video wird von einem beliebigen anderen Port als und serviert ist nichthttps mit:

DIESER
Kunden bei http://www.myapp.com/player.html FAIL:

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

THIS
Kunden bei http://www.myapp.com/player.html ERFOLGREICH SEIN WERDEN:

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

Chrome

0 und Kantenund toDataURL() wird Sicherheit blockiert es sei denn,:

• crossorigin zu anonymous oder use-credentials gesetzt (as defined here) vor das Video geladen ist. Wenn Sie dies zu spät tun, wird es immer noch fehlschlagen.

Alle

Schließlich, wenn Sie crossOrigin in Javascript gesetzt werden, müssen Sie das richtige Gehäuse für die JavaScript-Eigenschaft verwenden: crossOrigin (NICHT crossorigin)

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