Unknown source and unknown target type in Chrome

[mostkamp]

Hi there!

The following code throws two exceptions in Chrome 44:

this.sourceVideo = $('iframe').contents().find('video');
this.sourceVideo.before('<canvas id="chroma-key-canvas"></canvas>');
this.displayCanvas = $('iframe').contents().find('#chroma-key-canvas');

this.seriouslySource = this.seriously.source(this.sourceVideo[0]); // Exception 1
this.seriouslyTarget = this.seriously.target(this.displayCanvas[0]); // Exception 2

The first one is an "unknown source" exception; the second one is an "unknwon target" exception. The code works fine in Firefox 40.

The problem seems to be rooted in seriously.js, line 3729 and 5727:

if (target instanceof HTMLElement && target.tagName === 'CANVAS') { ... }
...
if (video instanceof window.HTMLVideoElement) { ... }

Both instanceof checks return true in Firefox and false in Chrome. As a hotfix, I came up with this idea:

if (!(typeof target.accessKey === 'undefined') && target.tagName === 'CANVAS') { ... }
...
if (!(typeof video.videoHeight === 'undefined')) { ... }

Is this a specific problem or a generic issue with Seriously.js/Chrome/Firefox? Any comments are welcome. Thank you!

[brianchirls]

Okay, you're trying to access elements inside an iframe. I suspect instanceof isn't working because HTMLElement and HTMLVideoElement are different constructors in a different window. I'm actually surprised that this works in Firefox.

Your iframe is on the same origin, right?

[brianchirls]

Do you have some live code you can share that I can test against?

Why are you checking accessKey in your hotfix?

For reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof#instanceof_and_multiple_context_%28e.g._frames_or_windows%29

[brianchirls]

See if that solves your problem.

[mostkamp]

Hey, thanks for the quick response and the marvelous fix, that actually solves the issue! However, now there is another problem that might either be related or something else: The chroma key effect seems to be broken in Chrome – but it used to work. I can see the output (and other chained effects, e.g., cropping are working), but the green is just not replaced. Firefox is fine though.

I can send you the link to our live system in a private message.

[brianchirls]

Okay, great. Can you file the chroma key bug under a separate issue? I'll close this one.

Also, can you make sure you're using the latest version from the develop branch? Thanks.