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>

     

     

     

  • 相关阅读:
    链表的一些规律总结
    acclib的尝试
    初入指针
    在一个堆成矩阵中的循环判断(井字棋游戏)
    初学c语言的小套路汇总
    在循环中计算式一正一负的处理
    最大公约数的计算方法
    大数加法
    大数乘法
    复制可见区域到新表
  • 原文地址:https://www.cnblogs.com/MyUniverse/p/10014231.html
Copyright © 2011-2022 走看看