[Vue.js]時計？タイムコードを表示するWebアプリ

タイムコードを表示するWebアプリを作りました。
https://heterotactic-locati.000webhostapp.com/timer.html

複数台のカメラで同時に撮影するときに、最初または最後にこのアプリを撮っておくと、映像同士の時刻を合わせやすくなります。 機材がなくてもいい、お手軽な同期アプリとしてご利用ください。

【使い方】
使い方はここにあるとおり、ビデオカメラでWebアプリの画面を撮影することで、映像の時刻をフレーム単位で割り出せるというものです。
カチンコという、いわゆる「アクション！（カンッ）」ってやるやつの代わりに使います。
ちゃんとした撮影機材があれば、専用の機材と線でつないで時刻を同期するのですが、そのような機材は手元になく・・・家庭用ビデオカメラで似たようなことをするためにこのWebアプリを作成しました。複数のカメラで同時に撮影し、あとで編集するようなケースではこれがめちゃめちゃ役に立ちます。

時刻同期の機能は作っていないため、29.7 fpsみたいなことはできません。
代わりではないですが、タイムコードの上にバーを表示しています。これで、画面表示されたタイミングが1frameのなかのどのタイミングだったのかが分かるようになっています。
たとえば30fpsで動かすとき、画面やブラウザはたいてい60fpsなので、同じタイムコードを2回表示することになるわけです。それを撮影したとしても、２回表示したうちのどちらが撮影されたのかまではわかりませんので、複数カメラの映像をつなげるときに若干のズレが起こります。（音がずれるので少し違和感が出ます）
もし印がバーの左側なら表示された値の通り、中央なら0.5frameのあたり、右側なら次のフレームに近いと判断でき、1frame未満も調整できるようになっているわけです。

別の使い方ですが、Clockモードを選ぶと、時計として使えます。

【使ったテクノロジー】
フレームワークはVue.js＋Vuerifyを使っています。npmでビルドするのが面倒だったので、CDNから持ってくるだけになっています。思ったよりVuerifyはサイズ小さい。

スポンサード・リンク