javascript 调用摄像头

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

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

发表回复

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