web网页利用JavaScript实现对摄像头的调用

实现效果:

 

代码如下:

<!DOCTYPE html>

<html lang="zh">

 <head>

  <meta charset="UTF-8" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <meta http-equiv="X-UA-Compatible" content="ie=edge" />

  <title>Document</title>

 </head>

 <body>

  <video src=""></video>

  <script type="text/javascript">

   var opt = {

    audio: true,

    video: {

     width: 375,

     height: 603

    }

   };

   navigator.mediaDevices.getUserMedia(opt)

    .then(function(mediaStream) {

     var video = document.querySelector('video');

     video.srcObject = mediaStream;

     video.onloadedmetadata = function(e) {

      video.play();

     };

    })

    .catch(function(err) {

     console.log(err.name + ": " + err.message);

    }); // always check for errors at the end.

  </script>

 </body>

</html>

 

posted @ 2019-11-14 16:56  斑林鸽的代码世界  阅读(1143)  评论(0编辑  收藏  举报