JSFiddle - React, Tailwind, and code Playground

HTML

<button id="button">Open Video Stream</button>
<video id="video"></video>

JavaScript

let cameras;

const reliable_function = async () => {
	const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" }});
  const video = document.querySelector("#video");
  video.srcObject = stream;
  video.onloadedmetadata = function(e) {
    video.play();
  }
}

const unreliable_function = async () => {
	await navigator.mediaDevices.getUserMedia({ video: true });
  const devices = await navigator.mediaDevices.enumerateDevices();
  cameras = devices.filter(device => device.kind == "videoinput");
  console.log(cameras);
	// CHANGE DEPENDING ON YOUR REAR CAMERA INDEX IN THE `cameras` array 
  const rear_camera_idx = 3;
	const stream = await navigator.mediaDevices.getUserMedia({ video: { deviceId: { exact: cameras[rear_camera_idx].deviceId }}});
  const video = document.querySelector("#video");
  video.srcObject = stream;
  video.onloadedmetadata = function(e) {
    video.play();
  }
}

document.querySelector("#button").addEventListener("click", async () => {
  await reliable_function();
  // await unreliable_function();
})