zoukankan      html  css  js  c++  java
  • 调用本地摄像头并通过canvas拍照

    首先我们需要新建一个video标签,并且放到html里边

    var video = document.createElement("video");
    video.autoplay="autoplay";

    document.body.appendChild(video);

     利用navigator对象

     navigator.mediaDevices.getUserMedia({
      audio:true,
      video:true
    })

     这样就调用了摄像头和录音器

     navigator.mediaDevices.getUserMedia({
            audio: false, video: true
      }).then(function (result) {
            video.srcObject = result;
      })

     利用video的srcObject属性和promise的then方法,把开启摄像头后的返回值给video标签,就显示出来了

    全部的实现代码如下:

    var video = document.createElement("video");
    video.autoplay="autoplay";
    document.body.appendChild(video);
    navigator.mediaDevices.getUserMedia({
        audio: false, video: true
    }).then(function (result) {
        video.srcObject = result;
    })

     现在我们继续写canvas拍照的步骤

    <video id='myVideo' hidden></video>
    <canvas id='snap' width='500' height='500' style="border:1px solid #ccc"></canvas>
    <button id='control'>拍照</button>
    <script>
    var snap = document.getElementById('snap');
    var context = snap.getContext('2d');
    var videoSrc = null;
    navigator.mediaDevices.getUserMedia({
        audio: false, video: true
    }).then(function (result) {
        videoSrc = result;
        console.log(videoSrc)
        myVideo.srcObject = videoSrc;
    })
    control.addEventListener('click',function(){  
        context.drawImage(myVideo,0,0,500,500);
        console.log(navigator.mediaDevices)
    })
    </script>

    新建canvas画布,获得context

    隐藏video

    canvas.drawImage方法的第一个参数放video即可调用canvas拍照

  • 相关阅读:
    SQLSERVER 数据连接字符串
    c#中 间隔两个小时执行一次
    移动开发者的自学宝典:十大在线编程学习网站
    C#j将DataTable转换成List
    C#将list转换为datatable
    SQL Server 高性能写入 摘抄
    解决控制面板删除不了的程序卸载
    卸载SQL 2008 R2 出现警告26003
    删除重复数据
    大数据量数据优化
  • 原文地址:https://www.cnblogs.com/sowhite/p/6481150.html
Copyright © 2011-2022 走看看