How To Use Back Camera On Websites With Phone

Almost of the browsers present, including mobile browsers, allow the applications to retrieve and use the data stream coming direct from the user's device camera. But it'due south very common for the devices nowadays to have more than one camera bachelor and nosotros might have a preference which of these cameras is better suited for our app's needs. Fortunately, the Media Stream API has us covered.

Allow'due south showtime remind ourselves how do we admission the video stream from the user's camera at all. The API sits in navigator.mediaDevices and is generic in terms of what kind of media stream it serves. We must specify. that nosotros're particularly interested in video stream. This selects the proper device equally well every bit displays the informative permission prompt for the user. If we requested video only, the browser will enquire for a photographic camera access. If we as well wants sound, the prompt will include both camera and microphone.

Chrome's permissions dialog for video and audio stream

          const stream = expect navigator.mediaDevices.getUserMedia({     video: true,     sound: true })

The API is asynchronous – nosotros'll become the stream when the user accepts the prompt and the browser finds the proper devices. If any of these neglect, our Promise will get rejected.

In case we successfully acquired the stream, nosotros can starting time manipulating it. The simplest thing we can do with information technology is to redirect it to a <video> element. In well-nigh cases, the <video> element has its source specified as a static file, but information technology too tin have whatever stream as its source – including the one we become from the user's device. We need to adhere it programatically:

          const video = certificate.querySelector('video'); video.srcObject = stream; video.play();

Now, our <video> chemical element volition transmit the stream from the photographic camera. So if the front camera is in utilize information technology will deed as a mirror. Just how practice we ensure the proper 1 is used?

Selecting facing mode of the video stream

When we were acquiring the stream, we passed an object every bit a getUserMedia parameter. This object is a stream constraint definition. Nosotros only constrained the stream to include video (and audio) so far. But nosotros can use tighter constraint:

          const stream = wait navigator.mediaDevices.getUserMedia({     video: {         facingMode: 'user'     } })

Here, nosotros put an object including facingMode property equally a video constraint, instead of simple true that accepted any kind of video input. With constraint, we propose the browser for what kind of video stream it should expect for. In the instance, nosotros prepare it to user-facing camera – a.k.a. selfie camera, or the front one. Alternatively, we can specify we want to face up environment, which is what is observed by the back camera.

The constraint gear up this way merely works equally a proffer, though – in case nosotros run this code on a device equipped with back photographic camera merely, we'd become the environs-facing stream anyway, equally it's the merely ane available and it's still better to apply whatever nosotros have available instead of declining in nigh scenarios. But if our requirement is strict and we need to use the front camera or no camera, we can prepare an additional constraint using exact:

          const stream = await navigator.mediaDevices.getUserMedia({     video: {         facingMode: {             exact: 'user'         }     } })

At present, if the device only has an environs-facing photographic camera, we'd non get any stream and the Promise will be rejected with OverconstrainedError.

More constraints

Facing mode is non the but constraint specified past the Media Stream API. We may see the full listing of constraint options using navigator.mediaDevices.getSupportedConstraints() call. And this list might be quite impressive. This is what Chrome fourscore on macOS lists as available:

          {     aspectRatio: true     autoGainControl: truthful     brightness: true     channelCount: true     colorTemperature: true     dissimilarity: true     deviceId: true     echoCancellation: true     exposureCompensation: true     exposureMode: true     exposureTime: truthful     facingMode: true     focusDistance: true     focusMode: true     frameRate: true     groupId: true     pinnacle: truthful     iso: true     latency: truthful     noiseSuppression: true     pointsOfInterest: true     resizeMode: true     sampleRate: truthful     sampleSize: true     saturation: true     sharpness: true     torch: true     whiteBalanceMode: true     width: true     zoom: true     videoKind: true     pan: true     tilt: true }

Obviously, some of these constraint simply make sense for audio and others for video streams.

The ones that might as well be often used are these related with video resolution:

          const stream = look navigator.mediaDevices.getUserMedia({     video: {         width: 1280,         acme: 720     } })

Annotation that like with facingMode, by default this is only a suggestion for what kind of stream nosotros are looking for and the browser might as well provide the 1 with different size. Nosotros might once more use verbal modifier to ask for exactly the size specified, but in case of resolution information technology'southward probably wiser to specify the minimum size we have, using min modifier:

          const stream = expect navigator.mediaDevices.getUserMedia({     video: {         width: {             min: 1280         },         elevation: {             min: 720         }     } })

The browser now will not provide a stream if it's not possible to discover one with at least 1280x720 size.

Selecting both size and facing style

Equally the constraint is an object, cypher stops us from specifying more requirements, possibly with dissimilar modifiers. The browser volition try to match equally many as possible when providing the stream and in case we used exact or min modifiers that can't be satisfied, it will again reject the promise with OverconstrainedError.

          const stream = await navigator.mediaDevices.getUserMedia({     video: {         facingMode: 'environment',         width: {             min: 1280         },         elevation: {             min: 720         }     } })

In this example, we're asking for the stream that should face the environment (back camera) when possible, but we also take if only the front end camera is available. For size we exercise not accept the sizes smaller than 1280 in width or 720 in top.