2

ユーザーがjqueryプラグインを使用してユーザーの顔を検出し、その上にその小道具を重ね合わせた後、ユーザーが自分の写真を撮ることができるようにする多くの小道具からユーザーが選択できるフォトブースを作成する助けが必要です小道具。コードが顔を検出して何かを投影できるようになりましたが、ユーザーが自分の顔でスナップショットを撮ることができる部分をコーディングできないようです。ヘルプ？これが私がこれまでに行かなければならないことです。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>fotogoof</title>

    <link rel="stylesheet" href="css/experiment.css" />    
</head>
    <body class="experiment">
    <div class="wrapper">
        <canvas width="400" height="320" class="mask"></canvas>
        <script src="js/ccv.js"></script>
        <script src="js/face.js"></script>
    </div>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script>
        window.URL || (window.URL = window.webkitURL || window.msURL || window.oURL);

        navigator.getUserMedia || (navigator.getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);

        if (typeof navigator.getUserMedia === "function") {

            (function() {

                var video = document.createElement('video'),
                    content = document.querySelector('.transforming-content'),
                    canvas = document.querySelector('canvas'),
                    context = canvas.getContext('2d'),
                    mask = new Image(),
                    originalFace,

                    SCALE_EXPERIMENT = 'scale',
                    MASK_EXPERIMENT = 'mask',
                    experimentType = /mask/.test(canvas.className) ? MASK_EXPERIMENT : SCALE_EXPERIMENT,

                    gUMOptions = {video: true, toString: function(){ return "video"; }};

                video.setAttribute('autoplay', true);
                mask.src = "img/mask.png";
                context.fillStyle = "rgba(0, 0, 200, 0.5)";
                navigator.getUserMedia(gUMOptions, handleWebcamStream, errorStartingStream);

                function handleWebcamStream(stream) {

                    video.src = (window.URL && window.URL.createObjectURL) ? window.URL.createObjectURL(stream) : stream;
                    processWebcamVideo();
                }

                function errorStartingStream() {
                    alert('Uh-oh, the webcam didn\'t start. Do you have a webcam? Did you give it permission? Refresh to try again.');
                }

                function processWebcamVideo() {

                    var startTime = +new Date(),
                        changed = false,
                        scaleFactor = 1,
                        faces;

                    context.drawImage(video, 0, 0, canvas.width, canvas.height);
                    faces = detectFaces();

                    if(experimentType === MASK_EXPERIMENT) {
                        drawMasks(faces);
                    } else {
                        highlightFaces(faces);

                        if(originalFace && faces.length > 0) {
                            scaleContent(faces[0]);
                        }

                        if( ! originalFace && faces.length === 1) {
                            originalFace = faces[0];
                        }
                    }

                    setTimeout(processWebcamVideo, 50);
                }

                function detectFaces() {

                    return ccv.detect_objects({canvas : (ccv.pre(canvas)), cascade: cascade, interval: 2, min_neighbors: 1});
                }

                function highlightFaces(faces) {
                    if(!faces) {
                        return false;
                    }

                    for (var i = 0; i < faces.length; i++) {
                        var face = faces[i];
                        context.fillRect(face.x, face.y, face.width, face.height);
                    }
                }

                function drawMasks(faces) {
                    if(!faces) {
                        return false;
                    }

                    for (var i = 0; i < faces.length; i++) {
                        var face = faces[i];
                        context.drawImage(mask, face.x * 0.9, face.y * 0.9, face.width * 1.3, face.height * 1.3);
                    }
                }

                function scaleContent(newFace) {
                    var scaleFactor = originalFace.height / newFace.height;
                    content.style.setProperty('-o-transform', 'scale('+scaleFactor+')');
                    content.style.setProperty('-webkit-transform', 'scale('+scaleFactor+')');
                }
            })();
        }
        </script>  
    </body>
</html>

どんな助けでも大歓迎です。

4

0 に答える 0