Access CANVAS for Antmedia Live WEBRTC video integration ?

Any ideas how i can get access to a Canvas element via a javascript snippet ? from a layer or sprite object or otherwise - even if i can create one in realtime, where can i bind it to make it visible/useable ?

I am trying to integrate an Antmedia JS client for receiving a WEBRTC live video feed.

Would love some pointers - as i am new to Construct and don't know the JS structure yet and couldn't seem to find what i was looking for in the reference documentation.

I don't think this is anything specific to Construct - you can just use the usual browser APIs for this. The code below will create a canvas element and insert it to the document. You'll probably need to use CSS to position it.

const canvas = document.createElement("canvas");
canvas.width = 300;
canvas.height = 200;
document.body.appendChild(canvas);

thanks Ashley - I tried this, but can't get the canvas element visible... any ideas ? :(

thanks Ashley - I tried this, but can't get the canvas element visible... any ideas ? :(

pretty please ? :) i have tried so much stuff and whatever i do, the canvas is never visible in front of the C3 layers... it is always hidden.

Here is a sample project overlaying a canvas on top of Construct's main canvas.

https://www.dropbox.com/s/6lvbkhuq0uoupy3/CanvasOverlay.c3p?dl=0

There were a few additional things you needed to do so the canvas would show.

Filling the canvas

The script that creates the new canvas also fills it with some color so you can see it, it is transparent by default.

Giving the canvas an ID

The script also gives the new canvas an ID so it can be targeted with a CSS selector

Applying some styles

A stylesheet is added using the Browser plugin. The stylesheet is in the Files folder of the project.

The styles are very simple but are needed so the canvas is positioned somewhere visible. The main canvas takes up the whole screen and by default new content is appended below existing content so the new canvas was initially off screen.

The styles I used for this bare bones example just force the canvas to stick to the top right, but you can change that.

You're awesome!, both of you! - that worked, thanks so much!

Here is a sample project overlaying a canvas on top of Construct's main canvas.

https://www.dropbox.com/s/6lvbkhuq0uoupy3/CanvasOverlay.c3p?dl=0

There were a few additional things you needed to do so the canvas would show.

Filling the canvas

The script that creates the new canvas also fills it with some color so you can see it, it is transparent by default.

Giving the canvas an ID

The script also gives the new canvas an ID so it can be targeted with a CSS selector

Applying some styles

A stylesheet is added using the Browser plugin. The stylesheet is in the Files folder of the project.

The styles are very simple but are needed so the canvas is positioned somewhere visible. The main canvas takes up the whole screen and by default new content is appended below existing content so the new canvas was initially off screen.

The styles I used for this bare bones example just force the canvas to stick to the top right, but you can change that.