javascript 调用摄像头

JavaScript
MediaDevices.getUserMedia() 会提示用户给予使用媒体输入的许可，媒体输入会产生一个MediaStream，里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道（来自硬件或者虚拟视频源，比如相机、视频采集设备和屏幕共享服务等等）、一个音频轨道（同样来自硬件或虚拟音频源，比如麦克风、A/D转换器等等），也可能是其它轨道类型。
  1. <!doctype html>
  2. <html>
  4. <head>
  5.   <title>js调用摄像头拍照上传图片</title>
  6.   <meta charset=“utf-8”>
  7. </head>
  9. <body>
  10.   <button onclick=“openMedia()”>开启摄像头</button>
  11.   <video id=“video” width=“500px” height=“500px” autoplay=“autoplay”></video>
  12.   <canvas id=“canvas” width=“500px” height=“500px”></canvas>
  13.   <button onclick=“takePhoto()”>拍照</button>
  14.   <img id=“imgTag” alt=“imgTag”>
  15.   <button onclick=“closeMedia()”>关闭摄像头</button>
  16.   <script>
  17.     let mediaStreamTrack = null; // 视频对象(全局)
  18.     function openMedia() {
  19.       let constraints = {
  20.         video: { width: 500, height: 500 },
  21.         audio: true
  22.       };
  23.       //获得video摄像头
  24.       let video = document.getElementById(‘video’);
  25.       let promise = navigator.mediaDevices.getUserMedia(constraints);
  26.       promise.then((mediaStream) => {
  27.         mediaStreamTrack = typeof mediaStream.stop === ‘function’ ? mediaStream : mediaStream.getTracks()[1];
  28.         video.srcObject = mediaStream;
  29.         video.play();
  30.       });
  31.     }
  33.     // 拍照
  34.     function takePhoto() {
  35.       //获得Canvas对象
  36.       let video = document.getElementById(‘video’);
  37.       let canvas = document.getElementById(‘canvas’);
  38.       let ctx = canvas.getContext(‘2d’);
  39.       ctx.drawImage(video, 0, 0, 500, 500);
  42.       // toDataURL  —  可传入’image/png’—默认, ‘image/jpeg’
  43.       let img = document.getElementById(‘canvas’).toDataURL();
  44.       // 这里的img就是得到的图片
  45.       console.log(‘img—–‘, img);
  46.       document.getElementById(‘imgTag’).src = img;
  47.     }
  49.     // 关闭摄像头
  50.     function closeMedia() {
  51.       mediaStreamTrack.stop();
  52.     }
  53.   </script>
  54. </body>
  56. </html>

本文链接地址: javascript 调用摄像头

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注