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

skywayと顔検出で遊ぶチュートリアル

はじめに

SkyWay名前は聞いていたのですが、実際に触ってみるのは初めてです。
とりあえずどんなものなのかなと思って
https://github.com/skyway/skyway-js-sdk
実際にSDKを触ってみました。
こんな簡単にWEBチャット実装できるとは思いませんでした。びっくり。WEBチャットの実装がすぐにできたので、なんか付け加えて顔検出してみたいなと思ったのでやってみました。

まずSkyWayに登録

スクリーンショット 2018-12-31 18.01.24.png

アプリケーションの説明は適当で大丈夫です。
今回はローカル環境でやろうと思います。ホスティングがめんどくさい
登録するとAPIKEYが発行されます

サンプルを試してみる。

https://github.com/skyway/skyway-js-sdk
をcloneして/examples/fullmesh-videochat/script.js

script.js
$(function() {
  // Peer object
  const peer = new Peer({
    key:  'YOUR API KEY`,
    debug: 3,
  });

らへんで先ほどのAPIKEYを設定してあげます
そのままそのディレクトリの中で
python -m http.server 8080
のあとにlocalhost:8080にアクセスすればサンプルが動きました。

スクリーンショット 2019-01-01 2.32.04.png

こいつをちょこっと改造して顔検出してみよう

Javascriptには顔画像検出ができるものがいくつかありますが、
tracking.jsというものが使いやすそうだったのでこれを使ってみます。
https://trackingjs.com
顔認識のサンプルコードはここにあります
https://github.com/eduardolundgren/tracking.js/blob/master/examples/face_alignment_video.html
ダウンロードをしたライブラリの中から必要そうな
../build/tracking.js
./build/data/face-min.js
../src/alignment/training/Landmarks.js
../src/alignment/training/Regressor.js
を取り出して

fullmesh-videochat
 -index.html (これはskywaysdkのもの)
 -script.js
 -tracking.js
 -src
 -data

という構造にしてあげました。
tracking.jsのサンプルコードface_alignment_video.htmlを見てみると

window.onload = function() {
      var video = document.getElementById('video');
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      var tracker = new tracking.LandmarksTracker();
      tracker.setInitialScale(4);
      tracker.setStepSize(2);
      tracker.setEdgesDensity(0.1);
      tracking.track('#video', tracker);
      tracker.on('track', function(event) {
        context.clearRect(0,0,canvas.width, canvas.height);
        if(!event.data) return;
          event.data.faces.forEach(function(rect) {
            context.strokeStyle = '#a64ceb';
            context.strokeRect(rect.x, rect.y, rect.width, rect.height);
            context.font = '11px Helvetica';
            context.fillStyle = "#fff";
            context.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11);
            context.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22);
          });
          event.data.landmarks.forEach(function(landmarks) {
            for(var l in landmarks){
              context.beginPath();
              context.fillStyle = "#fff";
              context.arc(landmarks[l][0],landmarks[l][1],1,0,2*Math.PI);
              context.fill();
            }
          });
      });

tracking.track('#video', tracker);でvideoタグを設定し、
tracker.onメソッドて顔の検出を行うようです。なので、このvideoタグにskywayの相手映像のビデオタグを投げてあげたいと思います。

今度はskywayのscript.jsを見てみます

script.js
  function step3(room) {
    // Wait for stream on the call, then set peer video display
    room.on('stream', stream => {
      const peerId = stream.peerId;
      const id = 'video_' + peerId + '_' + stream.id.replace('{', '').replace('}', '');

      $('#their-videos').append($(
        '<div class="video_' + peerId +'" id="' + id + '">' +
          '<label>' + stream.peerId + ':' + stream.id + '</label>' +
          '<video class="remoteVideos" autoplay playsinline>' +
        '</div>'));
      const el = $('#' + id).find('video').get(0);
      el.srcObject = stream;
      el.play();
    });

色々中身を見ていくと、接続があった時step3が実行されると
room.onで接続情報?streamを取得して、それを接続IDごとのクラスを作り、
その子要素のremoteVideosで映像を流しているみたいです。
つまりこのremoteVideosをtracking.track('#video', tracker)に入れてあげれば顔の検出ができますね!!!!
スクリーンショット 2019-01-01 3.03.47.png

そんなこんなでできたものです。色々おかしいですが
tracking.jsで、目の検出や、口の検出もできるので、これを使えば相手の感情がわかるチャットだったりできますね!!! 今度tensorflow.jsに挑戦します

Why do not you register as a user and use Qiita more conveniently?
  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
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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