zoukankan      html  css  js  c++  java
  • html5 调用摄像头

    ---移动设备---

    <input type="file" capture="camera" accept="image/*" id="cameraInput" name="cameraInput">

    ---PC------

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    </head>
    <script type="text/javascript">
    // Put event listeners into place
    window.addEventListener("DOMContentLoaded", function () {
    // Grab elements, create settings, etc.
    var canvas = document.getElementById("canvas"),
    context = canvas.getContext("2d"),
    video = document.getElementById("video"),
    videoObj = { "video": true },
    errBack = function (error) {
    console.log("Video capture error: ", error.code);
    };

    // Put video listeners into place
    if (navigator.getUserMedia) { // Standard
    navigator.getUserMedia(videoObj, function (stream) {
    video.src = stream;
    video.play();
    }, errBack);
    } else if (navigator.webkitGetUserMedia) { // WebKit-prefixed
    navigator.webkitGetUserMedia(videoObj, function (stream) {
    video.src = window.webkitURL.createObjectURL(stream);
    video.play();
    }, errBack);
    }
    else if (navigator.mozGetUserMedia) { // Firefox-prefixed
    navigator.mozGetUserMedia(videoObj, function (stream) {
    video.src = window.URL.createObjectURL(stream);
    video.play();
    }, errBack);
    }
    }, false);

    // Trigger photo take
    document.getElementById("snap").addEventListener("click", function () {
    context.drawImage(video, 0, 0, 640, 480);
    });
    </script>
    <body>
    <video id="video" width="640" height="480" autoplay></video>
    <button id="snap">
    Snap Photo</button>
    <canvas id="canvas" width="640" height="480"></canvas>
    </body>
    </html>

  • 相关阅读:
    电商网站秒杀与抢购的系统架构[转]
    解决sublime无法安装软件的问题
    oracel中decode的使用
    使用Spring进行远程访问与Web服务[转]
    解决maven传递依赖中的版本冲突
    Linux下rz,sz
    spring bean 使用继承
    Java14-ListIterator
    Java13-Iterator的应用
    Java11-ArrayList常用的方法
  • 原文地址:https://www.cnblogs.com/dodui/p/3645139.html
Copyright © 2011-2022 走看看