I'm working on an app where I'm using `navigator.mediaDevices.getUserMedia()` to display a live video feed from the user's camera in a video element. I want to be able to capture high-quality still images from this live feed, and I'm currently using the canvas `drawImage()` method for that. However, I'm wondering if there's a way to tap into the camera's native features more effectively to enhance the image quality. I've set a width constraint of 3072 pixels in my `getUserMedia()` call, but I've also tried out the ImageCapture API, and the results haven't been impressive. Could WebAssembly provide any improvements here?
3 Answers
I'm curious why the image quality isn't meeting your expectations. For instance, when using services like getbananas.net, I find their live stream pretty clear, and taking screenshots from that results in great high-res images.
You might want to check out this project as they seem to be working on something similar: [Glimesh Broadcast Box](https://github.com/Glimesh/broadcast-box). It could give you some insights on handling camera streams better!
If your goal is just to let users capture a still image, you could potentially leverage file inputs with the `capture` attribute. This allows direct access to the camera for still images. But from what I gather, you'd prefer the user to select a specific moment from the live stream, right?
I appreciate the link! However, my goal isn't to stream live video but to grab still images from the video feed without broadcasting. Just trying to clarify my use case!