What I’m trying to do:
Create a form/reusable component for capturing a high resolution image from a webcam/camera.
What I’ve tried and what’s not working:
With my limited experience of javascript I have adapted one of of the previously posted examples @irish_guy posted here to display a higher resolution live webcam feed onto a canvas component, and have added the ability to start/stop camera use and swap camera input source to front and back - tested on a Mictosoft Surface.
current published app - webcamtest1 (anvil.app)
Current issues and questions:
- if you resize the browser window the canvas resizes in width but not height - how can i dynamically resize this while maintaining the aspect ratio of the video feed and not reducing the resolution?
- the camera feed gets corrupted if the browser is resized and then the camera is stopped/restarted. current solution is to refresh the browser.
- how can i get the maximum resolution from the camera? i can increase the captured resolution in javascript but if it is higher than the canvas it then crops the displayed video. The captured image is limited by the canvas compoment size.
Clone link:
webcamtest1 clone link