Reading a webcam in Anvil

[irish_guy]

I have a ML application and I need to access the PC’s webcam.

I have seen posts saying that it can be done with javascript or the file uploader but I can not see any examples of how that can be done.

Does anybody have an example of how to read the webcam into a anvil image?

Thanks,
Louis

[campopianoa]

Hello ,

Perhpas playing around with this will help:

How can I build a VoIP system in anvil?

Here’s a video conferencing app built in Anvil. It uses Jitsi. https://anvil.works/build#clone:4J2M4VZAYTHI4UUR=VAM7DYIGKPTUBBONICGS7NUX [jitsi] Everybody using the app is on the same call - Jitsi uses a ‘room name’ to identify what call to join, and this app has it hard coded. You could easily add a TextBox to input the room name so people can join a call of their choice. How it works It imports Jitsi in Native Libraries: <script src="https://meet.jit.si/external_api.js"></script> And it…

[irish_guy]

Thanks fro that.

This is a a lot more that I need.

I can display a webcam on a canvas using the javascript below but then I can not use the canvas as an anvil component ( self.canvas )

Can I pass an anvil canvas component to this script?

[irish_guy]

Sorry I cant seem to post code so this is an image

[jshaffstall]

You can use the Javascript bridge to set the id of your Anvil canvas element, and then your Javascript can get that component by id. You would not then have a separate HTML canvas element.

Something like:

    node = js.get_dom_node(self.canvas_1)
    node.id = "canvas_1"

[irish_guy]

Thanks I will try this

[irish_guy]

@jshaffstall

node = js.get_dom_node(self.canvas_1)
    node.id = "canvas_1"

That worked perfectly.
Thank you so much.

I will clean up the app and post in the show and tell as many others have been asking the same question.