HTML5 calls the camera code

HTML5 calls the camera code

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Display Webcam Stream</title>
 
<style>
#container {
  margin: 0px auto;
  width: 500px;
  height: 375px;
  border: 10px #333 solid;
}
#videoElement {
  width: 500px;
  height: 375px;
  background-color: #666;
}
</style>
</head>
 
<body>
<div id="container">
  <video autoplay="true" id="videoElement">
  
  </video>
</div>
<script>
var video = document.querySelector("#videoElement");

if (navigator.mediaDevices.getUserMedia) {
  navigator.mediaDevices.getUserMedia({ video: true })
    .then(function (stream) {
      video.srcObject = stream;
    })
    .catch(function (err0r) {
      console.log("Something went wrong!");
    });
}
</script>
</body>
</html>

If you cannot call it, make sure that the URL is HTTPS, and only HTTPS can be called successfully.

If you want to call this page in an iframe and can’t turn on the camera, please add allow=”camera *” in the < iframe; Microphone *” will do.

For example< iframe allow=”camera *; microphone *” src=”opencam.html” >


Posted

in

by

Tags:

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *