使用js调用设备摄像头并实现拍照

使用getUserMedia这个API来获取摄像头的权限并实现拍照

在线体验:https://811w1z2xwj.codesandbox.io/

下面是源码:


<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>使用js调用设备摄像头并实现拍照title>
  <script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js">script>
  <style type="text/css">
    *{margin:0;padding:0}video{width:200px}button{width:100px;height:60px}
  style>
head>
<body>
  
  <div class="box">
    <video src="">video>
    <button class='shot'>拍照button>
    <canvas id='canvas'>canvas>
    <img src=''>
  div>
  
  <script type="text/javascript">
    // 视频大小
    var constraints = {audio: true, video: {width: 200,height: 250}};
    // 开启视频
    navigator.mediaDevices.getUserMedia(constraints).then(function(mediaStream) {
      console.log('getUserMedia:', mediaStream)
      var video = document.querySelector('video');
      video.srcObject = mediaStream;
      video.onloadedmetadata = function(e) {
        video.play();
      };
      
      // 使用canvas进行拍照
      var canvas = document.getElementById('canvas')
      $('button').on('click', function () {
        canvas.getContext('2d').drawImage(video, 0, 0, 200, 250);
        $('img').css('src', canvas.toDataURL("image/png"))
      })
      
    }).catch(function(err) {
      console.log(err.name + ": " + err.message);
    });
    
  script>
body>
html>

这么牛逼的功能,兼容性怎么样,亲测chrome和火狐可以,iOS嘛,看下面webkit官网截图
使用js调用设备摄像头并实现拍照_第1张图片

不知道苹果的工程师在考虑啥,隔壁都实现好几年了
文档地址:https://webkit.org/status/#feature-mediastream-recording-api

注意,如果使用chrome查看代码需要在https协议或者localhost下才能生效,建议使用火狐查看

你可能感兴趣的:(js)