方式1

Navigator 对象包含有关浏览器的信息。

  1. navigator.mediaDevices.getUserMedia();//获取一个媒体流

开启摄像头简单代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5. </head>
  6. <body>
  7. <div>
  8.     <div id="play">开启摄像</div>
  9.     <div id="take">拍照</div>
  10.     <video id="video"></video>
  11.     <!-- 尽量在canvas标签上设置宽高 -->
  12.     <canvas id="canvas" width="300px" height="300px"></canvas>
  13. </div>
  14. <script>
  15.     // 开启摄像
  16.     document.getElementById('play').onclick = () => {
  17.         //获取媒体流
  18.         navigator.mediaDevices.getUserMedia({
  19.                 video: true //开启视频流
  20.             }).then(res => {
  21.             //将返回值给video设置上
  22.             //src 是播多媒体文件的；srcobj 是实时流
  23.             document.getElementById('video').srcObject = res
  24.             //将video启动
  25.             document.getElementById('video').play()
  26.         })
  27.         // 失败就失败了
  28.     }
  30.     // 拍照、canvas绘制
  31.     document.getElementById('take').onclick = () => {
  32.         let ctx = document.getElementById("canvas").getContext('2d')
  33.         //将获取的图片生成照片
  34.         ctx.drawImage(document.getElementById("video"), 0, 0, 300, 300)
  35.         document.getElementById("canvas")
  36.     }
  37. </script>
  38. </body>

这种方法在手机端是无法获取到的

自动获取摄像头

  1. <body>
  2. <video id="video"></video>
  3. <canvas id="canvas"></canvas>
  4. <div id="div" style="background:rosybrown;width: 200px;height: 200px">开启摄像头</div>
  5. <div id="div1" style="background:rosybrown;width: 200px;height: 200px">拍照</div>
  6. </body>
  7. <script>
  8.     var video = document.getElementById('video');
  9.     var div = document.getElementById('div');
  10.     var div1 = document.getElementById('div1');
  11.     var canvas = document.getElementById('canvas');
  12.     var deviceInfoId = ""; //摄像头ID
  13.     let num = 0; //摄像头数量
  14.     let carema = []; //摄像头ID数组
  15.     //在页面加载完成后获得设备ID数组
  16.     window.onload = navigator.mediaDevices.enumerateDevices().then(res => {
  17.         //res是全部的外设 找到摄像头的外设存下来
  18.         for (let i = 0; i < res.length; ++i) {
  19.             if (res[i].kind === 'videoinput') {
  20.                 carema.push(res[i].deviceId)
  21.             }
  22.         }
  23.         deviceInfoId = carema[1];//第二个id当做默认摄像头 0索引获取不到 1是前置 2是后置
  24.     })
  26.     div.onclick = () => {
  27.         //navigator.userAgent可以获取打开的设备
  28.         var ua = navigator.userAgent.toLowerCase();
  29.         if (ua.match("android") == "android") {
  30.             alert("android");
  31.         }
  32.          //获取媒体流
  33.         navigator.mediaDevices.getUserMedia({
  34.             //通过deviceId获取摄像头
  35.             video: {deviceId: deviceInfoId,}
  36.         }).then(res => {
  37.             video.srcObject = res;
  38.             video.play();
  39.         })
  40.     }
  41.     div1.onclick = () => {
  42.         let ctx = canvas.getContext('2d');
  43.         ctx.drawImage(document.getElementById("video"), 0, 0, 200, 200);
  44.         //将图片转成Base64加密数据 可以传给后端让后端解析
  45.         var data = canvas.toDataURL("image/png");
  46.     }
  47. </script>

方式2

通过input调取摄像头进行拍照

  1. accept表示，直接打开系统文件目录。让你进行选择
  2. capture如果没有会让你进行选择文件或者打开相机 设置后会直接打开相机
  3. //直接打开相机拍照
  4. <input type="file" accept="image/*" capture="camera">
  5.  //直接打开摄像机
  6. <input type="file" accept="video/*" capture="camcorder">
  7.  //这个好像会也会打开相机
  8. <input type="file" accept="audio/*" capture="microphone">