js摄像头



<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>GetUserMedia实例</title>

</head>

<body>

        <!--

        理想情况下我们应该先判断你的设备上是否

        有摄像头或相机，但简单起见，我们在这里直接

        写出了HTML标记，而不是用JavaScript先判断

        然后动态生成这些标记

    -->

    <video id="video" width="640" height="480" style="border:solid 1px green" autoplay></video>

    <button id="snap">Snap Photo</button>

    <canvas id="canvas" width="640" height="480" style="border:solid 1px gray"></canvas>

</body>

<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);

    }

       document.getElementById("snap")

       .addEventListener("click", function() {

    context.drawImage(video, 0, 0, 640, 480);

});

}, false);

</script>

<html>
巴特西

js摄像头

最新文章

热门文章
