Object to canvas javascript

Question

I'm testing javascript on a smart TV,

I try to get an object video to canvas. With html5 video tag it works in my browser, but not my smart TV.

But when I try with an object player, I have this error message :

Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)'

after multiple test with (id, object id,object src..) the result is same, i don't know how i can get an Object video to a canvas.

here's a simple html test:

<canvas id="test" width="300" height="300"></canvas>
<div id="test" style="left: 0%; top: 0%; width: 25%; height: 25%; position: fixed;">
    <object type="application/avplayer" style="width: 480px; height: 270px;"></object>
</div>

and the js:

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const video = document.getElementsByTagName('object');
//const video = document.getElementsById('idVideo');
ctx.drawImage(video, 0, 0, canvas.width, canvas.height)

Here's an example of my goal but i can't use video tag : http://jsfiddle.net/on1kh4o0/

Any idea or hack to get the same result with an object?

Maybe you need a video element instead of object. See stackoverflow.com/questions/33834724/draw-video-on-canvas-html5 — Teemu
– Teemu, Commented Oct 2, 2020 at 13:03
You can't use the video tag, because your smart TV doesn't support it? You're currently trying to use drawImage on a HTMLObjectElement type, which the error suggests; won't work. — Emiel Zuurbier
– Emiel Zuurbier, Commented Oct 2, 2020 at 13:03
I'm not sure if the problem is the object or not, but I'm definitely sure that you're trying to draw an array here and not the actual object. document.getElementsByTagName() returns an array. So you should use video[0] and not video. Unless you have multiple objects in your elements, in which case you have to use the correct index number instead of 0. — icecub
– icecub, Commented Oct 2, 2020 at 13:07
Still, documentation on CanvasRenderingContext2D.drawImage() has a list of types it allows as a valid CanvasImageSource type. HTMLObjectElement is not one of them. — Emiel Zuurbier
– Emiel Zuurbier, Commented Oct 2, 2020 at 13:11
These things are generally hard to figure out without a little trial and error. Go back to using the video. The example in the fiddle uses an .ogv source. Does your TV support that format? — Emiel Zuurbier
– Emiel Zuurbier, Commented Oct 2, 2020 at 17:08

Kaiido · Accepted Answer · 2020-10-03 03:08:59Z

1

You can't draw an HTMLObjectElement (<object>) directly on a canvas, it is not defined as a CanvasImageSource.

For info, currently the only objects that are defined as being of this type are

HTMLImageElement
SVGImageElement
HTMLVideoElement
HTMLCanvasElement
ImageBitmap
OffscreenCanvas

And even though it's still only part of a draft specs, it is expected that CSSImageValue also gets added to this list.

But HTMLObjectElement is not part of this list, and certainly will never be.

Indeed, even though you can load a video or an image in an <object>, just like with an <iframe>, you can also load a text or an HTML document or many other document types which can't be drawn on a canvas.

Now to your issue, as has been pointed out in the comments, you are definitely facing an XY problem.

Using a video element is currently the only way to draw a video on a canvas _{(maybe in the future we'll be able to use the Web-Codecs API too, but that's for the future).}

So try to find out why your browser doesn't want to draw this video on the canvas.
Try different videos, from different sources, back in the days some Android browsers were blocking drawing any cross-origin mp4 video on a canvas, maybe you are facing a similar issue, if you can, try to input the video from an <input type="file">.

And if your browser has debugging tools, use them. (For instance if it's based on chromium, you should be able to navigate to chrome://media-internals/ or chrome://inspect which might be bale to lead you to some logs.

But anyway, using an <object> as source here won't help you.

answered Oct 3, 2020 at 3:08

Kaiido

140k15 gold badges266 silver badges333 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Valentin P Over a year ago

very clear answer! i'll update my thread with more details about my initial problem with video tag and canvas.

Kaiido Over a year ago

@ValentinP you could also open a new question with these details, I guess you'll not be the only one trying to draw an <object> on a canvas. This question has some value, even if an XY problem at the origin.

Collectives™ on Stack Overflow

Object to canvas javascript

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related