はじめに

前回、作ったものに顔認識ライブラリを使って顔認識ができるか実験してみました。
結論書くと失敗しました。（上手く認識できませんでした）
face.jsがネットで引っかかってきたのですが、あまり認識されなかったのでfacedetectionを使ってみましたが、こっちのほうが酷かった...。

参考

環境

前回のものそのまま使います。

準備

facedetectionのダウンロード

ディレクトリ構成

public
├ js
│ └ libs
│ └ jquery.facedetection.min.js
└ index.html

ソースコード

<!doctype html>
<html>
    <head>
        <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script src="https://skyway.io/dist/0.3/peer.min.js"></script>
        <script src="https://skyway.io/dist/multiparty.min.js"></script>
        <script src="https://skyway.io/dist/screenshare.min.js"></script>
        <script src="./js/libs/jquery.facedetection.min.js"></script>
        <style>
            body {
                margin: 0;
            }
            #message {
                width: 190px;
                margin: 10px;
            }
            #streams {
                position: absolute;
                top: 10px;
                margin-left: 200px;
            }
            .video{
                margin: 0px 0px 0px 5px;
                width: 300px;
                border: 1px solid #000000;
                border-radius: 10px;
            }
            #streams .my-video {
                -webkit-transform: scaleX(-1);
                -o-transform: scaleX(-1);
                -moz-transform: scaleX(-1);
                transform: scaleX(-1);
            }
            #streams .face {
            position: absolute;
            border: 2px solid #FFF;
        }
        </style>
    </head>
    <body>
        <div id="message">
            <form>
                <input type="text"><button type="submit">send</button>
            </form>
            <p class="receive">
            </p>
        </div>
        <div id="streams">
            <div>
                <!-- <button id="start-screen" data-muted="false">start screen</button> -->
                <button id="video-mute" data-muted="false">video mute</button>
                <button id="audio-mute" data-muted="false">audio mute</button>
                <button id="face-detect" data-muted="false">face detect</button>
            </div>
        </div>
        <script>
            multiparty = new MultiParty({
                "key": "0b0aa54d-e0a1-48cd-8b63-5e3ba38026ab",
                "reliable": true,
                "debug": 3
            });

            screen = new SkyWay.ScreenShare({debug: true});

            multiparty.on('my_ms', function(video) {
                var vNode = MultiParty.util.createVideoNode(video);
                vNode.setAttribute("class", "video my-video");
                vNode.volume = 0;
                $(vNode).appendTo("#streams");
            }).on('peer_ms', function(video) {
                console.log("video received!!")
                console.log(video);
                var vNode = MultiParty.util.createVideoNode(video);
                vNode.setAttribute("class", "video peer-video");
                $(vNode).appendTo("#streams");
                console.log($("#streams"))
            }).on('ms_close', function(peer_id) {
                $("#"+peer_id).remove();
            })

            multiparty.on('message', function(msg) {
                $("p.receive").append(msg.data + "<br>");
            });

            multiparty.on('error', function(err) {
                alert(err);
            });

            multiparty.start();

            $("#message form").on("submit", function(e) {
                e.preventDefault();

                var $text = $(this).find("input[type=text]");
                var data = $text.val();

                if (data.length > 0) {
                    data = data.replace(/</g, "&lt;").replace(/>/g, "&gt;");
                    $("p.receive").append(data + "<br>");
                    multiparty.send(data);
                    $text.val("");
                }
            });

            $('#start-screen').click(function () {
                if (screen.isEnabledExtension()) {
                    screen.startScreenShare({
                        Width: $('#Width').val(),
                        Height: $('#Height').val(),
                        FrameRate: $('#FrameRate').val()
                    },
                    function (stream) {
                        $('#my-video').prop('src', URL.createObjectURL(stream));

                        if(existingCall != null){
                            var _peerid = existingCall.peer;
                            existingCall.close();
                            var call = peer.call(_peerid, stream);
                            step3(call);
                        }

                        localStream = stream;

                    },function(error){
                        console.log(error);
                    },function() {
                        alert('ScreenShareを終了しました');
                    });
                } else {
                    alert('ExtensionまたはAddonをインストールして下さい');
                }
            });

            $('#stop-screen').click(function() {
                localStream.stop();
            });

            $("#video-mute").on("click", function(ev) {
                var mute = !$(this).data("muted");
                multiparty.mute({video: mute});
                $(this).text("video " + (mute ? "unmute" : "mute")).data("muted", mute);
            });

            $("#audio-mute").on("click", function(ev) {
                var mute = !$(this).data("muted");
                multiparty.mute({audio: mute});
                $(this).text("audio " + (mute ? "unmute" : "mute")).data("muted", mute);
            });

            $("#face-detect").on("click", function(ev) {
                ev.preventDefault();

                $('.face').remove();

                if ($('#streams > .video')[0].paused) {
                    $('#streams > .video')[0].play();
                    return;
                } else {
                    $('#streams > .video')[0].pause();
                }

                $('#streams > .video').faceDetection({
                    interval: 1,
                    complete: function (faces) {
                        console.log(faces)
                        for (var i = 0; i < faces.length; i++) {
                            $("<div>", {
                                "class": "face",
                                "css": {
                                    "position": "absolute",
                                    "left":     faces[i].x + "px",
                                    "top":      faces[i].y + "px",
                                    "width":    faces[i].width  + "px",
                                    "height":   faces[i].height + "px"
                                }
                            })
                            .insertAfter(this);
                        }
                    },
                    error:function (code, message) {
                        alert('Error: ' + message);
                    }
                });
            });
        </script>
    </body>
</html>

結果

「face detact」ボタンを押すと動画が一時停止され、停止状態を顔認識します。
最初、なんどやっても矩形がでてこないのでデバッグをいれてみました。
そうすると心霊的なほどの精度の検出結果が描画されました。
下記の赤枠で囲った部分が顔として認識されてます。
デバッグは[Object, time: XX]と記載された箇所のみ認識されています。

まとめ

だめだこりゃ。
他にライブラリ探した見たけど目新しいものは見つけられなかった。
仮に認識されても重いんだろうなぁ...。
個人的には失敗ものも載せるのもなかなかおもしろいとおもいます。

全ページリンク