CODEWITHSUNDEEP
javascriptgetusermedia
Yaver Javid
Yaver Javid

Reputation: 88

How to switch between front camera and rear camera in javascript?

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
  }
})
}

I know by changing exact to environment can switch between front and back camera. But I don't know how to do this onclick.

Upvotes: 2

Views: 9430

Answers (2)

عبدالرحمن الشرعبي
عبدالرحمن الشرعبي

Reputation: 1

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("environment"));
})
<div class="frontCamera">front</div>
<div class="backCamera">back</div>

Upvotes: 0

Hritik Sharma
Hritik Sharma

Reputation: 2010

Something like this :

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("environment"));
})
<div class="frontCamera">front</div>
<div class="backCamera">back</div>

Upvotes: 5

Related Questions