Overlay a static img with the webcam image

Question

Overlay a static img with the webcam image

Navigation

#1 by (1 votes)

0

Well, it's a simple project, a "site" that accesses the web cam, captures the image and sends it to a server.

IwasabletoimplementthewebcamwiththefollowingHTML5codewithjavascript:

<html><head><metacharset="utf-8">
        <meta content="stuff, to, help, search, engines, not" name="keywords">
        <meta content="What this page is about." name="description">
        <meta content="Web Cam" name="title">
        <title>Web Cam</title>

<style>
            #container {
                margin: 0px auto;
                width: 500px;
                height: 375px;
                border: 10px #333 solid;
            }
            #videoElement {
                width: 500px;
                height: 375px;
                background-color: #666;
            }
        </style>
    </head>

<body>
    <button id="snap">Snap Photo</button>
    <div id="container">
        <video autoplay="true" id="videoElement">

        </video>
    </div>
    <script>
        var video = document.querySelector("#videoElement");

        navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;

        if (navigator.getUserMedia) {
            navigator.getUserMedia({video: true}, handleVideo, videoError);
        }

        function handleVideo(stream) {
            video.src = window.URL.createObjectURL(stream);
        }

        function videoError(e) {
            // do something
        }
    </script>
    <script>// 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);</script>
</body>
</html>

My current issue is how to put this background image and adjust the camera so that it is in this 3x4 size and that when you press a button it takes the photo and leaves it in place of the badge.

The part of sending the photo to a servlet and etc, I can do but that initial part is very difficult for me.

html css

asked by anonymous 24.07.2015 / 05:24

1 answer

How to do insert with values posted in textarea Insert multiple objects with Doctrine Dbal

score 1 · Accepted Answer

One option is to use the jQuery Webcam plugin to capture the image, assigning it as the source of a img element % of your page in method (or event) onSave .

Your code would look more or less like the following logic:

$("#camera").webcam({
    width: 320,
    height: 240,
    mode: "callback",
    swffile: "/download/jscam_canvas_only.swf",
    onTick: function() {},
    onSave: function(data) { 
        var col = data.split(";");
        var img = image;

        for(var i = 0; i < 320; i++) {
            var tmp = parseInt(col[i]);
            img.data[pos + 0] = (tmp >> 16) & 0xff;
            img.data[pos + 1] = (tmp >> 8) & 0xff;
            img.data[pos + 2] = tmp & 0xff;
            img.data[pos + 3] = 0xff;
            pos+= 4;
        }

        if (pos >= 4 * 320 * 240) {
            ctx.putImageData(img, 0, 0);
            pos = 0;
        }

        // Coloque a imagem no elemento img nesse ponto.
    },
    onCapture: function() {},
    debug: function() {},
    onLoad: function() {}
});