सीओआरएस

Question

का उपयोग कर कैनवास के माध्यम से एचटीएमएल 5 वीडियो स्क्रीनशॉट मुझे क्रोम में वीडियो के स्क्रीनशॉट प्राप्त करने में कोई समस्या है, और मैंने सभी internets और सभी Stackoverflow उत्तरों को समाप्त कर दिया है; कोई भाग्य नहीं।

कोई फर्क नहीं पड़ता कि मैं कोशिश करता हूं, जब मैं canvas तत्व का उपयोग किसी अन्य डोमेन पर एक वीडियो का स्क्रीनशॉट लेने के लिए या यहां तक ​​कि केवल एक अलग पोर्ट पर लेने का प्रयास करता हूं, तो मैं Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. त्रुटि के साथ समाप्त होता हूं।

यहाँ मेरी सेटअप है:

वेब ऐप्लिकेशन URL
http://client.myapp.com/home.html

CDN यूआरएल (मैं दोनों की कोशिश की है)
http://client.myapp.com:8181/somevideo.mp4
http://cdn.myapp.com/somevideo.mp4

हेडर के साथ वापस भेज दिया सीडीएन से एमपी 4:

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 

मेरे पास है:

• जोड़ा गया crossOrigin="anonymous" वीडियो तत्व पर है, लेकिन यह सिर्फ वीडियो लोड करने के लिए पूरी तरह
• एक अलग बंदरगाह पर भी एक ही डोमेन की कोशिश की (ऊपर के रूप में)
असफल बनाता है
• सुनिश्चित किया गया है कि Access-Control-Allow-Origin* (ऊपर के रूप में)
• मुझे विश्वास नहीं है कि यह डीआरएम है क्योंकि स्क्रीनशॉट ठीक काम करता है अगर मैं वेब पर सटीक वही वीडियो फ़ाइल कॉपी करता हूं एप्लिकेशन और this question के सभी प्रश्नों के उत्तर के माध्यम से स्थानीय स्तर पर यह
• भागो लोड है, लेकिन इस छवियों के लिए नहीं वीडियो वैसे भी है और जवाब केवल सभी पिछले अंक

फिर भी, अभी भी विस्फोट त्रुटि का वर्णन।

संपादित
जोड़ा गया कोड:

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

कृपया मदद करते हैं।

Answer 1

मैंने अपने स्वयं के प्रश्न का उत्तर दिया है।

अब मेरे पास कितना भयानक सिरदर्द है।

समस्या एचटीएमएल 5 वीडियो क्रॉसोरिगिन/सीओआरएस विनिर्देश के अनुमानित विनिर्देशन में कहीं कहीं है।

मैं केवल क्रोम और एज में परीक्षण किया गया है, लेकिन यहां क्या आप लेखन के समय पता करने की जरूरत है:

क्रोम

अपने एचटीएमएल 5 वीडियो लोड हो रहा है असफल हो जायेगी आप crossOrigin सेट है अगर लेकिन अपने वीडियो से और अन्य किसी भी बंदरगाह से कार्य किया जा रहा है नहींhttps उपयोग कर रहा है:

इस http://www.myapp.com/player.html पर
क्लाइंट विफल होगा:

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

इस सफल होगा
ग्राहक http://www.myapp.com/player.html पर:

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

क्रोम और एज

• crossoriginanonymous या use-credentials (as defined here) से पहले वीडियो लोड किया जाता है पर सेट है:और toDataURL() सुरक्षा अवरुद्ध जब तक हो जाएगा। यदि आप इसे बहुत देर से करते हैं, तो यह अभी भी असफल हो जाएगा।

सभी

अंत में, यदि आप जावास्क्रिप्ट में crossOrigin सेट करने के लिए जा रहे हैं, जावास्क्रिप्ट संपत्ति के लिए केस सही उपयोग सुनिश्चित करें: crossOrigin (नहीं crossorigin)

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