zoukankan      html  css  js  c++  java
  • HTML5按键打开摄像头和拍照

    HTML5实现按键打开摄像头和拍照

    步骤:

    1、创建一个打开摄像头按钮的标签、video标签、拍照的按钮标签、画布

    2、实现打开摄像头的功能

    3、实现拍照功能

     

    具体实现代码:

    <!DOCTYPE html>
    <html>
    <head>
       <meta charset="UTF-8">
       <title>takePhoto</title>
       <script type="text/javascript">
         window.addEventListener("DOMContentLoaded",function(){
         var drawing = document.getElementById("drawing");
           if(drawing.getContext)
          {
            context = drawing.getContext("2d");
          }
         var video = document.getElementById("video");
         var med = {video:true};
         var errBack = function(e)
         {
           alert("An error has occurred",e)
         }
         var onCamera = document.getElementById("onCamera");
         var takePhoto = document.getElementById("takePhoto")

         //实现通过按钮打开摄像头的功能
         onCamera.addEventListener("click",function(){
         f(navigator.mediaDevices && navigator.mediaDevices.getUserMedia)
         {
           navigator.mediaDevices.getUserMedia(med).then(function(stream){
           video.src = window.URL.createObjectURL(stream);
           video.play();
         })
        console.log(navigator.mediaDevices.getUserMedia(med))
        }
        },false);
        //实现将拍照功能
        takePhoto.addEventListener("click",function(stream){
        context.drawImage(video,0,0,640,480)
        },false);
        },false)
        </script>
      </head>
      <body>
        <button id="onCamera">打开摄像头</button>
        <video id="video" width="640" height="480"></video>
        <button id="takePhoto">拍照</button>
        <canvas id="drawing" width="640" height="480">A drawing of something</canvas>
    </body>
    </html>

     

     

     

  • 相关阅读:
    ZedGrapy使用实例
    C#分割字符串(包括使用字符串分割)
    从VS2005项目转换为VS2008项目(C#版)
    关于SQL操作的一些经验
    android socket 编程总结
    Excel绘制人口金字塔图
    使用命令让IE全屏显示指定的页面,适用于触摸屏终端机
    毕业这两年
    使用XML数据结合XSLT导出Excel
    XSLT实现XML作为数据源在web页面显示人口金字塔统计图
  • 原文地址:https://www.cnblogs.com/MyUniverse/p/10014231.html
Copyright © 2011-2022 走看看