Help us understand the problem. What is going on with this article?

SkyWayを使ったビデオチャットに顔認識ができるか試してみた

More than 3 years have passed since last update.

はじめに

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

参考

https://github.com/jaysalvat/jquery.facedetection

環境

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

準備

facedetectionのダウンロード

https://github.com/jaysalvat/jquery.facedetection/blob/master/dist/jquery.facedetection.min.js

ディレクトリ構成

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]と記載された箇所のみ認識されています。

FireShot Capture 40 -  - http___localhost_13000_.png

スクリーンショット 2017-07-06 9.47.30.png

まとめ

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

全ページリンク

neriai
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away