はじめに

去年の冬休みの自由研究として個人的に作ったものを紹介させていただきます。
ここで作ったものは社内で年に数回催されているハッカソン・アイデアソンにも提出しました。

この時はまだオンラインイベントだったのですが、最近はオフラインが復活してグループ会社からも参加があって非常に盛り上がっております。

冬休みのとある風景

たっぷりの時間で懐かしの動画を見返していた私。昔の動画は実声やソフトウェアトークなどの音声が無く、字幕のみの動画も多かった。
字幕動画はゲーム音声をそのまま楽しめるという利点もあるけど、画面を集中して見ないといけないので結構疲れることがわかった。

せっかくだしこれを改善するってのを冬休みの自由研究にして会社のオンラインハッカソンで発表するか！

技術調査や実装

視聴ページに外付けする形をイメージしたのでブラウザ拡張で実装することを最初に決めて、それに合うものを調べていきました。

OCR

Tesseract.js

日本語にも対応していてwasmでの高速化なども入っているライブラリ。処理速度は十分だけど精度はそこそこ

AWS

その時調べた感じだと日本語に非対応だった

Azure AI Vision

API通信だから間に合うか？と思ったけど間に合う速さで精度も良かった！無料枠もあったのでTesseract.jsに追加してこれを利用する実装も入れることに

音声読み上げ

SpeechSynthesis

ブラウザにそういうAPIが存在する。どこかで聞いたことがあるような音声なので親しみやすい

VOICEVOX

無料！アプリを立ち上げておけばHTTPでAPIリクエストを投げれば音声データを作れる。よく聞く音声なので親しみやすい

ブラウザ拡張で利用する場合にはちょっとだけ手間がかかるので注意

字幕検出

毎フレームOCRにかけてテキストが変更されていたら読み上げと実装できればそれが理想ではあるが、Tesseract.jsもそこまでは厳しく、また精度の問題でテキストの差分が無駄に出てきてしまう。
Azure AI Visionも毎フレームAPIリクエストを投げるのはレートリミットに引っかかりましたしお金が…！

OpenCV

画像処理といったらこれ。OpenCV.jsとしてwasmも提供されている。
背景差分法の実装が入ってるので閾値を適当に決めて雑に検出するよう実装を作った

こちらもブラウザ拡張で利用するには色々と乗り越えないといけない制約があるので注意

タイマー起動＆ユーザー操作

動画シリーズが同じなら字幕の間隔というのも概ね一定だったりするので、タイマー起動で差分があれば読み上げという形でも使用に耐えうる感じにはなった
追加でCtrl+右クリックなどでOCR起動のフックを入れたりして、自分で操作することも可能に

その後

無事に完成して個人で使って楽しむクオリティを出せました。そしてオンラインハッカソンでも発表し、高評価をいただけました！

ただし冬休みに懐かしの動画を見返すというのは、シリーズ全部は見終わりませんでした！

まとめ

ブラウザ拡張・ORC・読み上げといった組み合わせで各種技術情報を調べて実装しました。

こういったもののアウトプット先としてハッカソンやLTといったイベントが会社であるのはありがたいです(アドカレもそうですね)。