let constraints; function handleVideo(){ const constraints = { video: { facingMode: { exact: 'user' } } }; var video; navigator.mediaDevices.getUserMedia(constraints). then((stream) => { video = document.createElement("video") video.srcObject = stream video.play() video.onloadeddata = () => { ctx.height = video.videoHeight } }) } Sé que al cambiar el environment exact se puede cambiar entre la cámara frontal y la trasera. Pero no sé cómo hacer esto onclick.
Algo como esto :
function handleVideo(cameraFacing) { const constraints = { video: { facingMode: { exact: cameraFacing } } } return constraints }; function turnVideo(constraints) { let video; navigator.mediaDevices.getUserMedia(constraints) .then((stream) => { video = document.createElement("video") video.srcObject = stream video.play() video.onloadeddata = () => { ctx.height = video.videoHeight } }) } document.querySelector(".frontCamera").addEventListener("click", () => { turnVideo(handleVideo("user")); }) document.querySelector(".backCamera").addEventListener("click", () => { turnVideo(handleVideo("enviroment")); }) <div class="frontCamera">front</div> <div class="backCamera">back</div>