Overlay a static image with the webcam image

Asked

Viewed 1,422 times

0

Well, it’s a simple project, a "website" which accesses the web cam, captures the image and sends it to a server.

Exemplo do projeto

I was able to implement the web cam with the following HTML5 javascript code:

<html>
    <head>
        <meta charset="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 problem is about how to put this background image and adjust the camera so that it is this size 3x4 and that when pressing a button it takes the photo and leaves it static in place of the badge.

The part of uploading the photo to a Servlet and so on, I can do but that initial part is very difficult for me.

html css
  • 3

    Your problem is not the same as the title "Place webcam image inside a static img", your problem is with the image overlay, make a title that matches the problem.

  • Thank you very much!

  • paccamicio can’t understand where your html image is

  • Oops, I deleted it from the code, it was in a <div> but it just didn’t work, I tried all the <div> overlay etc..

1 answer

1


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

Your code would follow more or less 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() {}
});

  • I’ll be checking in early this morning and pass the feedback, but following this logic I think it can solve.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.