久しぶりの更新となります。
アジャストの渕上です。

私の更新回では、笑い男の画像で顔をマスクできるビデオチャットを実装したいと思っています。

前回の記事では、画像の顔認識を行い顔の部分を笑い男でマスクする処理を、
OpenCV + python テストし、OpenCVを使えば画像の顔認識が簡単にできることがわかりました。

今回は一旦コードを書く手を休め、ビデオチャット化する方法を検討してみます。

WebRTC

まず、ビデオカメラで撮影した動画を異なるPCに、
リアルタイムに共有するにはどうしたらいいのか考えてみました。

少し調べてみたところ、WebRTCという仕様があるようです。
この技術を使うと離れたネットワークにいるPC同士をP2Pで接続して、
Webカメラで撮影した動画の共有もできるみたいです。
(Web上の情報をナナメ読みしただけなので、認識違いがあればご指摘お願いします!)

ビデオチャットの実現はできそうなのですが、P2Pでやり取りするとなると、
いったいどこでOpenCVを噛ませてやればいいのか思いつきませんでした。

socket.io

残念ながらWebRTCでは実現することが難しそうなので、
次にnode.js + socket.ioの利用を検討してみます。

socket.ioはnode.js向けのWebSocketの実装で、
ブラウザからサーバへのデータ送信、
サーバからブラウザへのデータ送信を
画面遷移なしで実現するモジュールです。

socket.ioを用いて下記の要件を満たすことができれば、
ビデオチャット実現に近づくことができるかもしれません。

  1. Webカメラで撮影しているデータをsocket.ioを使ってwebサーバに渡す
  2. Webサーバ上でOpenCVによる加工を行う
  3. 加工したデータをsocket.ioを使ってブラウザに返す

2は前回のコードを流用して実現することができそうです。
node.jsからpythonスクリプトを実行してみてもよさそうですし、
npmにもOpenCVモジュールがあるようなので、
node.jsだけで完結させることもできるかもしれません。

3も、1,2が実現できれば何とかなりそうな気がします。

問題は1の部分です。
これは下記の手順で実現することができそうでした。

a. webカメラのデータをvideoタグのsrc要素に設定
b. videoタグのフレームが更新されるたびにcanvasタグに転写
c. canvasの中身をdataURIに変換
d. dataURIをsocket.ioを使ってwebサーバに送信

えっと、「できそうでした。」とか偉そうに書いてますが、
口惜しいことに自分一人でこの方法にたどり着くことができず、
Google検索の力を借りて先人たちの知恵を拝借してしまいました。

言われてみればなるほど確かになのですが、、
もっと柔軟な発想ができるように努力します!

次回予告

次回は今回検討した方法を実装して、動作テストをしてみたいと思います。