How to enable taking of a photo directly in a HTML page (and not opening the camera app)?

Question

I know the

<input type="file" accept="image/*" capture>

method to allow the user to take a picture (and similar other examples here with accept="video/*" , etc.), and when using this, clicking on the <input> usually opens the phone's camera app , allows the user to take a photo, and then goes back to the original page.

But how, with Javascript, to have a preview of the camera directly in a HTML page, in a <div> and a "Take photo" button, ie not have to open the phone's camera app?

(Of course the user would have to grant access to the phone camera)

Answer 1

Thanks to this tutorial , I finally found the solution using getUserMedia .

NB: since recent versions of Chrome, for security reasons, it only works if the site is HTTPS. You can start Chrome with "C:\Program Files\Google\Chrome\Application\chrome.exe" --unsafely-treat-insecure-origin-as-secure="http://123.123.123.123" if you want to test it on a non-HTTPS website.

 var videoElement = document.querySelector('video'); var audioSelect = document.querySelector('select#audioSource'); var videoSelect = document.querySelector('select#videoSource'); audioSelect.onchange = getStream; videoSelect.onchange = getStream; getStream().then(getDevices).then(gotDevices); function getDevices() { return navigator.mediaDevices.enumerateDevices(); } function gotDevices(deviceInfos) { window.deviceInfos = deviceInfos; for (const deviceInfo of deviceInfos) { const option = document.createElement('option'); option.value = deviceInfo.deviceId; if (deviceInfo.kind === 'audioinput') { option.text = deviceInfo.label || `Microphone ${audioSelect.length + 1}`; audioSelect.appendChild(option); } if (deviceInfo.kind === 'videoinput') { option.text = deviceInfo.label || `Camera ${videoSelect.length + 1}`; videoSelect.appendChild(option); } } } function getStream() { if (window.stream) { window.stream.getTracks().forEach(track => { track.stop(); }); } const audioSource = audioSelect.value; const videoSource = videoSelect.value; const constraints = { audio: {deviceId: audioSource? {exact: audioSource}: undefined}, video: {deviceId: videoSource? {exact: videoSource}: undefined} }; return navigator.mediaDevices.getUserMedia(constraints).then(gotStream).catch(handleError); } function gotStream(stream) { window.stream = stream; audioSelect.selectedIndex = [...audioSelect.options].findIndex(option => option.text === stream.getAudioTracks()[0].label); videoSelect.selectedIndex = [...videoSelect.options].findIndex(option => option.text === stream.getVideoTracks()[0].label); videoElement.srcObject = stream; } function handleError(error) { console.error('Error: ', error); }

 <div id="container"> <div class="select"><label for="audioSource">Audio source: </label><select id="audioSource"></select></div> <div class="select"><label for="videoSource">Video source: </label><select id="videoSource"></select></div> <video autoplay muted playsinline></video> </div>