zoukankan      html  css  js  c++  java
  • HTML5实现在线抓拍

    <!DOCTYPE>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
    <script type="text/javascript" src="/js/jquery1.8.3.js"></script>
    <title>在线拍照</title>
    </head>
    <body>
    <video id="camVideo" width="400" height="328" autoplay></video> <br />
    <button  id="snap">抓图</button> <br />
    <table>
    <tr>
     <td><canvas id="canvas" width="400" height="328" /></td><td><input name="imgData" id="imgData" style="600px"/></td>
    </tr>
    </table>
    <script>
     
    $(function(){
         // 获取元素,创建配置
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        var video = document.getElementById("camVideo");
        var videoObj = { "video": true };
        var errBack = function(error) {
          console.log("Video capture error: ", error.code); 
        };
     
      // 添加视频监听器
      if(navigator.getUserMedia) { // 标准的API
        navigator.getUserMedia(videoObj, function(stream) {
          video.src = stream;
          video.play();
        }, errBack);
      } else if(navigator.webkitGetUserMedia) { // WebKit 核心的API
        navigator.webkitGetUserMedia(videoObj, function(stream){
          video.src = window.webkitURL.createObjectURL(stream);
          video.play();
        }, errBack);
      } else if(navigator.mozGetUserMedia) { // WebKit-prefixed
        navigator.mozGetUserMedia(videoObj, function(stream){
            video.src = window.URL.createObjectURL(stream);
            video.play();
         }, errBack);
      }
       
       document.getElementById("snap").addEventListener("click", function() {
       context.drawImage(video, 0, 0, 400, 328);
       var dataUrl = context.canvas.toDataURL("image/png");
          $( "#imgData" ).val( dataUrl );
       });
    });
    </script>
    </body>
    </html>
  • 相关阅读:
    noip2014提高组day2二题题解-rLq
    uva 1606 amphiphilic carbon molecules【把缩写写出来,有惊喜】(滑动窗口)——yhx
    NOIP2008提高组(前三题) -SilverN
    uva 11134 fabled rooks (贪心)——yhx
    NOIP2008提高组火柴棒等式(模拟)——yhx
    NOIP2008 普及组T2 排座椅 解题报告-S.B.S
    判断https
    redis 在centos下的安装部署
    phpstorm常用快捷键
    yii 打印sql
  • 原文地址:https://www.cnblogs.com/101key/p/3995153.html
Copyright © 2011-2022 走看看