web会議でワーキングメモリを節約する拡張機能を作った。
この記事は個人開発 Advent Calendar 2023 13日目の記事です。
こんな拡張機能を作りました。
会議は疲れる
会議に参加する場合は発言を求められると思います。
そのためには、同期的でリアルタイムに進行していく会議の文脈を理解し、自分の言葉で意見を表現する必要があり、とても疲れます。
会議で楽するためには
楽するのは簡単で、余計な事に頭を使わなければよいのです。
web会議の疲れは、「相手の発言を聞き逃してはならない雰囲気」が疲れと直結しているような気がしています。
聞き逃したら考える事もできませんし。
また、相手が使っているマイクの音質が悪いと言葉を聞き取るだけで疲れてしまいます。
これらの「聞き逃し」、「聞き取り負荷」を減らし、余計なことに頭を使わない拡張機能を作りました。
作ったもの
GoogleMeetで「話し相手の映像内に字幕を表示させる拡張機能」を作りました。字幕を視線移動なしで確認できるようになり、話しながら会話を視覚的に追う事ができます。
これで、聞き取り負荷が軽減され、集中して考える事できます。
作った経緯
私は映画を視聴する時には字幕を使います。なぜか字幕を表示した方が作品に集中できるんですよね。
そういう事もあり、web会議でも字幕を使えば、パフォーマンスが上がるのではと思いました。
ですが、web会議アプリの字幕は映像外に表示される事が多く、映像を見ながら字幕を確認する事はできません。
会議は人の顔を見て進めるので、映像外に表示されると視線移動で疲れてしまいます。
web会議の字幕を映画のように表示できれば自分のパフォーマンスがあがる気がして作ってみました。
実際に使って思った事
単純に映像内に出すだけでは、字幕が更新されるたびに会話から字幕へ意識がもっていかれてしまい、会議に集中できませんでした。
なので「映像」と「字幕」の意識バランスを調整できるよう、字幕の透明度を調整できるようにしました。映像への意識を強める事で、字幕を意識せずに会話ができるようになり、意識すれば字幕が確認できるようになりました。
実装面
やっている事はとても単純です。
- GoogleMeetの字幕ボタンをトリガーにして関数を起動
- 標準の字幕要素を監視して一致する映像要素に発言を挿入し続ける
// 映像要素に発言を挿入する
const appendSpeach = (name: string, speach: name) => {
// 頑張ってnameと一致する映像要素を抽出する
const userVideoElement = documnet.getElementById("video");
// 字幕要素を作る
const speachElement = createElement("div");
speachElement.innerText = speach;
// 映像内に字幕を追加
userVideoElement.appendChild(speachElement);
};
// 標準字幕更新のたびに呼ばれる。
const callback = (mutations: MutationRecord[], observer: MutationObserver) => {
for (const mutation of mutations) {
if (mutation.type === "childList") {
const name = "山田太郎"; // 頑張って名前を抽出する
const speach = "今日はいい天気ですね"; // 頑張って発言を抽出する
appendSpeach(name, speach);
}
}
};
const observer = new MutationObserver(callback);
// Meetの字幕有効ボタンを押下時に実行させる
const clickOriginalCc = () => {
const target = document.getElementById("originalCc");
observer.observe(target, {
childList: true, // 子要素の変更を監視
attributes: true, // 属性の変更を監視
});
};
予想外だった事
GoogleMeetのDom構造に依存しているのでメンテナンスコストが高くなると予想していました。
ですが、1年でselectorを更新したのは1回だけでメンテナンスコストは気になりませんでした。
今後の予定
この拡張機能をベースにして新たに議事録を高速で作成する拡張機能を作りたいです。
Whisperを使えば録音ファイルから議事録を作れますが、長時間マシンリソースを奪ってしまうので使いたくありません。
記録した字幕をgptで整形して出力すれば実装できそうなので、暇な時に作ろうと思います。
おわりに
最後までお読みいただきありがとうございました。
明日の個人開発Advent Calendarは私の「一般向け文字起こしサービスを作った。」です。
完成したコードはこちらです。
Discussion