決定的瞬間を撮り忘れない仕組み
Maker Faire Tokyo 2020 にオンラインで参加しました。
初めて参加しましたが、いろんな工夫がされた作品が多くて楽しかったです。
中でも、良いなと思ったのが、これ。
私も２歳のこどもがいますが、時々**「あーこの瞬間、映像に収めたかった」**っていうタイミングがあるんですよね。で、「もう１回やって！」というと、次はやってくれなかったり、ちょっと違う形になったりして、「あー残念。」と思うことがあります。
このふれAIレコーダーは、音声のみの録音ですが、それでもニーズあります。映像だともっといいと思いますけどね。
で、この「決定的瞬間を撮りたい」ってニーズってあるよなと思い、そこからインスピレーションを得て、自分が以前つくったものをバージョンアップさせてみました。
１人で「笑ってはいけないゲーム」を楽しむアプリ
以前、こんな記事を書きました。
一人笑ってはいけないゲームができるWEBアプリを機械学習でつくった
年末の「笑ってはいけない。」を１人で楽しめるアプリです。TeachableMachineで学習させた「笑顔」を認識すると、おなじみの「デデーン！！」の音が流れます。
そのアウト！の証拠写真を保存する。
ただ、このアプリを使った時、「えーいまの笑ってないでしょ！」って反発する人もいるかもしれません。
なので、一瞬でも笑ってしまったという証拠を捉えるために、その決定的瞬間をスクショに収める機能を実装しました。
それがこちらです。
以前つくった「1人で笑ってはいけない」ゲームができるWEBアプリに、自動スクショ機能をつけました。
— 柳瀬浩之@人材開発×UX専門家 (@btap_hiro) October 9, 2020
これで笑った証拠をバッチリ収められます。
・・・と思いましたが、反応が早すぎて、笑う寸前でもうスクショされちゃうので、まだまだ調整が必要です。#protoout #機械学習 #teachablemachine pic.twitter.com/LsYt19tnum
ただ、スクショのタイミングが早すぎて、笑う前のスクショになってしまっている。。もう少し調整が必要そうです。
もしよろしければ、遊んでみてください。
※私の場合は、上の動画のように顔をかなり近づけた場合に限り、正確に診断できました。また、私の顔で認識しているので、他の方の顔で読み取ってくれるかまだ検証できていません。今後精度を高めていきます
スクショのダウンロードの仕方
本当はダウンロードボタンを実装しようとしたんですが、うまくいかなかったので、現状は、普通にスクショ画像を右クリックから画像を保存してください。
今後は、ダウンロードボタンと、twitterに簡単に共有できるものを作れたらいいかもしれませんね。
決定的瞬間をスクショに収める機能の作り方
まずhtml側のスクショを表示させたい場所に、以下を挿入します。
<canvas id="canvas"></canvas>
scriptタグ内に以下の関数を作り、if文（笑ったと認識した場合）の中で関数を実行させます。
const autoPhoto = function () {
var $canvas = $('#canvas');
$canvas.attr('width', video.videoWidth);
$canvas.attr('height', video.videoHeight);
$canvas[0].getContext('2d').drawImage(video, 0, 0, $canvas.width(), $canvas.height());
$('#download').attr('href', $canvas[0].toDataURL('image/png'));
}
こちらの記事を参考につくりました。
canvasタグを使って動画のスクリーンショットを撮る方法
コード全文
こちらをご覧ください。
家族や友だちと過ごす年末を少しでも楽しく
今年はコロナでなかなか思うように外出できず、また帰省もしにくい日々を送っています。もしかしたら、年末もオンラインで家族や友だちと正月を迎える、ということもあるかもしれません。
そんな時に、このアプリでみなさんが少しでも楽しく過ごせたらなと思いますので、みんなが楽しめる精度に仕上げていきたいと思います。