HTML Image Capture and embed image into page - getUserMedia fallback

Question

I'm working on a site that utilizes the getUserMedia to access the user's webcam and display it in the page. For browsers/devices that don't support getUserMedia, I'd like to have an option where the user can take a picture and upload it into the page.

Is it possible to use the image in the page without uploading it/storing it on my server?

I'm currently trying to use the following to capture the image:

                <form action="#" method="post" enctype="multipart/form-data">
                    <label style="border: 1px solid black;">
                        <input id="image-picker" type="file" name="image" accept="image/*" capture>
                    </label>
                    <input type="submit" value="Upload">
                </form>

I'm not sure how to take the photo and embed it into the page.

Please help!

Answer 1

After doing more research I decided to use this plugin as a fallback which allows users on mobile devices to take a picture of themselves using camera and upload it into the page.