javascript - HTML5 video screenshot via canvas using CORS -


i have issue getting screenshots of videos in chrome, , i've exhausted internets , stackoverflow answers on it; no luck.

no matter try, when try use canvas element take screenshot of video on different domain, or different port, end failed execute 'todataurl' on 'htmlcanvaselement': tainted canvases may not exported. error.

here setup:

web app url
http://client.myapp.com/home.html

cdn urls (i've tried both)
http://client.myapp.com:8181/somevideo.mp4
http://cdn.myapp.com/somevideo.mp4

headers sent mp4 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

i have:

  • added crossorigin="anonymous" video element, makes video fail load altogether
  • tried same domain on different port (as above)
  • ensured access-control-allow-origin coming * (as above)
  • i don't believe drm screenshot works fine if copy exact same video file web app , load locally
  • run through answers this question, images not videos anyway , answers describe previous points

yet, still blasted error.

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

please help.

i have answered own question.

what horrible headache have.

the problem lies somewhere in nuanced specification of html5 video crossorigin/cors specification.

i tested in chrome , edge, here need know @ time of writing:

chrome

loading html5 video fail if have crossorigin set, video being served port other 80 and not using https:

this fail
client @ http://www.myapp.com/player.html:

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

this succeed
client @ http://www.myapp.com/player.html:

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

chrome , edge

getimagedata() , todataurl() security blocked unless:

  • crossorigin set anonymous or use-credentials (as defined here) before video loaded. if late, still fail.

all

finally, if going set crossorigin in javascript, sure use correct casing javascript property: crossorigin (not crossorigin)

i have written in little more detail in blog.


Comments

Post a Comment

Popular posts from this blog

routing - AngularJS State management ->load multiple states in one page -

Image
i developing site in angularjs ui-router. have situation on button click need change , load 3 state page , 3 looks image .please me how can load multiple pages. in 1 page you need configure router config this: $stateprovider .state("state1", { url: "/url1", controller: "firstcontroller", views: { view1: { templateurl: "templates/template1.html" }, view2: { templateurl: "templates/template2.html" }, view3: { templateurl: "templates/template3.html" } } }).state("state2", { url: "/url2", controller: "secondcontroller", views: { view1: { templateurl: "templates/template4.html" }, view2: { templateurl: "templates/template5.html" }, view3: { templateurl: "templates/template6.html" } }).state("state3", { ...
Read more

python - GRASS parser() error -

i'm trying use grass on python 2.7, i'm having problems @ setting script on idle, i'm getting error @ parser() function: here script: import os import sys gisbase = os.environ['gisbase'] = 'c:\program files (x86)\grass gis 7.0.1rc1' gisrc = 'c:\grassdata' gisdbase = 'c:\grassdata' location = 'newlocation' mapset = 'tc' ld_library_path = 'c:\program files (x86)\grass gis 7.0.1rc1\lib' path = 'c:\program files (x86)\grass gis 7.0.1rc1\etc';'c:\program files (x86)\grass gis 7.0.1rc1\etc\python';'c:\program files (x86)\grass gis 7.0.1rc1\lib';'c:\program files (x86)\grass gis 7.0.1rc1\bin';'c:\python27';'c:\program files (x86)\grass gis 7.0.1rc1\python27';'c:\program files (x86)\grass gis 7.0.1rc1\msys' pythonlib = 'c:\python27' pythonpath = 'c:\program files (x86)\grass gis 7.0.1rc1\etc\python' sys.path.append(os.path.join(os.environ['...
Read more

json - Gson().fromJson(jsonResult, Myobject.class) return values in 0's -

Image
i have json {"fechaupdateid":1,"fechasegundos":635902782941643690,"fechasegundosbc":635902779020935030} i execute command convert object fechaupdate dto = new gson().fromjson(json, fechaupdate.class); but got result this fechaupdate class public class fechaupdate { public int getfechaupdateid() { return fechaupdateid; } public void setfechaupdateid(int fechaupdateid) { this.fechaupdateid = fechaupdateid; } public long getfechasegundosbc() { return fechasegundosbc; } public void setfechasegundosbc(long fechasegundosbc) { this.fechasegundosbc = fechasegundosbc; } public long getfechasegundos() { return fechasegundos; } public void setfechasegundos(long fechasegundos) { this.fechasegundos = fechasegundos; } private int fechaupdateid ; private long fechasegundos ; private long fechasegundosbc; } solved ...
Read more