Crazy idea. But maybe it will be useful

Is it possible to get the camera stream from the game?

In the editor this is possible. I want to output this stream to my tag canvas in my html code. :sweat_smile:

What do you mean by ‘stream’? Can you give an example of how you would use it?

[CAMERA IN GAME (engine)] --> [UI (My HTML)] --> [TAG CANVAS IN MY HTML]

example

Dynamic visual display of dressed objects.

RED - HTML
BLUE - Canvas in html

There are several ways you can get the effect depending on overall effect/feature you are trying to achieve.

You can:

It is unfortunate that there is no way to get the video stream of the camera straight. :cry:

Did you miss the 4th option? Use Render to texture if you just want the ‘image’ from the camera.

1 Like

I do not know how to do this >_< or do not understand you …

https://developer.playcanvas.com/en/api/pc.RenderTarget.html ???

Yes, here’s a really quick example https://playcanvas.com/project/528262/overview/render-to-texture-test

There’s a WebGL error that I’m 100% sure how to fix but that gives you the general idea. There is still a bit of work to do to make it work ‘right’ such as changing the size of the plane to match the aspect ratio of the screen, etc.

2 Likes

It is a pity that you can not transmit the video stream exactly as I want. :worried:

The options that you offered are not exactly suitable. Well, I’ll think of something based on them.

It would be nice to be able to get the video stream in my canvas. What would create really beautiful things with the help of html and css.

If you are doing exactly only what you’ve shown as the example, option 1 is your best bet. Have you seen what Disney have done? http://partners.disney.com/hour-of-code/wayfinding-with-code

This is another example of someone using PlayCanvas as the background of a page: [SOLVED] How to set a transparent background

Hey bro :slight_smile: I came up with a solution … Everything was much easier …

add in project jquery lib and $("#application-canvas").detach().appendTo( this.div ); The end… :joy:

and

easy :sweat_smile:

    $("#application-canvas").detach().appendTo( this.div );
    $("#application-canvas").addClass('no_fix');
    $("#application-canvas").attr( "width", "auto" );
    $("#application-canvas").attr( "height", "auto" );
.no_fix {
    width: auto!important;
    height: auto!important; 
}

1 Like

You are need to inject WebGL app ìnto your html game, right? Well, you can download playcanvas engine from github and create pc app ìnside your game. This is the best way for you. But you will use playcanvas without editor

wait now I am confused
play canvas is a web-based 3d game engine
you can actually install it from the GitHub repository

I needed to move the canvas element to a specific place on the page. Then adapt it to a new location in size.

1 Like