js摄像头拍照、摄像-526互联

备份留着万一用到，转自：https://cloud.tencent.com/developer/article/1357730?from=15425

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title></title>

    <style type="text/css">
        
    </style>
</head>
<body>
    <div>
         <b>调用移动端摄像头</b><br>
         <label>照相机： <input type="file" id='image' accept="image/*" capture='camera'></label>
         <label>摄像机： <input type="file" id='video' accept="video/*" capture='camcorder'></label>
     </div>
     <hr>
     <div class="box1">
         <div>
             <button onclick="getMedia()">开启摄像头</button>
             <video id="video" width="600" height="400" autoplay="autoplay"></video>
         </div>
         <div>
             <button onclick="takePhoto()">拍照</button>
             <canvas id="canvas" width="600" height="400"></canvas>
         </div>
     </div>
</body>
</html>
<script type="text/javascript">
    function getMedia() {
         let constraints = {
             video: {
                 width: 600,
                 height: 400
             },
             audio: true
         };
         //获得video摄像头区域
         let video = document.getElementById("video");

         // 这里介绍新的方法，返回一个 Promise对象
         // 这个Promise对象返回成功后的回调函数带一个 MediaStream 对象作为其参数
         // then()是Promise对象里的方法
         // then()方法是异步执行，当then()前的方法执行完后再执行then()内部的程序

         // 避免数据没有获取到
         let promise = navigator.mediaDevices.getUserMedia(constraints);
         // 成功调用
         promise.then(function (MediaStream) {
             /* 使用这个MediaStream */
             video.srcObject = MediaStream;
             video.play();
             console.log(MediaStream); // 对象
         })
         // 失败调用
         promise.catch(function (err) {
             /* 处理error */
             console.log(err); // 拒签
         });
     }

     function takePhoto() {
         //获得Canvas对象
         let video = document.getElementById("video");
         let canvas = document.getElementById("canvas");
         let ctx = canvas.getContext('2d');
         ctx.drawImage(video, 0, 0, 600, 400);
     }
</script>

摄像头

摄像头obs