Skyway Walkers

SkyWayを使ったサービスを個人開発しています

ライブ配信やビデオ通話に、複数言語で字幕を付ける(OBS + Talk To CSV + Google翻訳)

こんにちは。iwatendoです。

 ライブ配信やビデオ通話サービスに、Google翻訳で複数言語の字幕を付けれる仕組みを作ってみたので紹介します。  

youtu.be

同時多言語翻訳のやり方について

 表題に書いた通り、Talk To CSV + OBS + Google翻訳を使用してます。

 Talk To CSVの使い方については以下のページにまとめましたので、使ってみたい方は以下のページを参考にしてください。

同時多言語翻訳の仕組みについて

 Talk To CSVはブラウザのみで動作するチャットサービスです。OBSにはTalk To CSVのチャットメッセージだけのWebページを表示しています。(OBS表示用に文字を大きくし背景を透過にしたWebページを準備しています)

 冒頭の動画では、OBSに4枚のブラウザソースを追加し、それぞれのページでGoogle翻訳をしています。 

さまざまなサービスへの適用

OBSに表示できる為、さまざまな用途に多言語翻訳が利用できます。

  • 動画作成(冒頭の動画もOBSで作成してます)
  • 動画配信 ( YouTube Live / Twitch 等)
  • ビデオ通話 ( Google Meet / Zoom / Discord / LINE 等)

実際にYouTube Liveで使って頂いた動画のアーカイブのご紹介

 もなかえりさんは、ずっとTalk To CSVを一番使ってくれている方で、今回の翻訳機能についても、もなかえりさんからTwitterで同時翻訳できないか相談を受けた事がきっかけでした。

 もなかえりさんは音声入力機能も使用しています。音声入力の誤変換も多いので、それプラス Google翻訳の誤変換で大変な事にならないか、例えば悪気が無くても物凄い凄い誤変換をしてしまって視聴者の方に不快な思いをさせてしまわないかとか、ちょっと視聴しててハラハラしてたりします(笑)。

 でも、もなかえりさんの配信の中で、外国の方が翻訳された字幕を見て、もなかえりさんにコメント欄で話かけているのを見て、少しだけジーンとしました。

 私の作った小さなWebサービスでも、誰かと誰かを繋ぐ事に役立てた気がして。

 まぁ、ほとんどGoogle翻訳のおかげなんですけどね(笑)

 

 さいごに、他にもこんな事ができたらいいのにな~という要望等ありましたら、できる範囲で考えてみますので、ブログのコメントかTwitterの方に気軽にご連絡ください。

 それでは。

 

f:id:iwatendo:20210228160324j:plain

Gerd AltmannによるPixabayからの画像

Google Chrome (Web Speech API) 複数ページへの同時音声入力について

こんにちは iwatendo です。

YouTube Live や Twitch配信で Talk To CSV を使ってくれている、もなかえりさんから以下のような相談を頂いたので、今日はちょっとそれについて書いていきます。

これはバグという訳じゃなくて無くて、基本的にGoogle ChromeのWeb Speech APIを利用しているサイトは、音声入力を同時に行うことができないようです。

例えば、Google翻訳等でも同時に音声入力で複数言語に翻訳しようとしても「現在、音声入力できません」というメッセージが表示され片方が音声入力ができなくなります。

f:id:iwatendo:20210227005708p:plain

 ただし、プロファイルが別々のGoogle Chromeの場合、音声入力の同時利用が可能となるようです。

以下の画像は、左側は通常起動したChromeで、右側が別プロファイルで起動したChromeで、音声入力が同時使用が可能になっています。(※Windows環境のみで確認。他環境でも実現可能かどうかは未検証です)

f:id:iwatendo:20210227010129p:plain

 別プロファイルでGoogle Chromeを起動する手順は以下の通りです。

  • まず、新しく Google Chrome のショートカットを作ります。
  • ショートカットのプロパティを開き、以下のような起動オプションを追加します
  • --user-data-dir={別プロファイルの保存先}
  • 例)--user-data-dir=D:\Chrome\TalkToCSV 
  • 上記で指定した場所に新しいGoogle Chromeのプロファイルが作成されます。 

f:id:iwatendo:20210227002335p:plain

  • 別プロファイルで起動した場合、最初はChromeにログインしていない状態で起動されます。
  • 一度ログインしてしまえば、後は通常Chromeと同じように利用できます。
  • 同一アカウントでも、別のアカウントでもログイン可能です。
  • 通常起動したChromeと、別プロファイルで起動したChromeのタブは、まとめる事ができないようです。
  • 別プロファイルは、起動オプションの保存先さえ変えれば、何個でも作れるようです。

別プロファイルを使用してTalk To CSVを使用する場合の注意点

  • 注意点としては、ブラウザ内データベース(IndexedDB)も別々に保持されるためTalk To CSVの「音声認識結果の文字列変換定義」等を登録をしている場合は、インポートしなおす必要があります。

 参考にさせて頂いたサイト:【Google Chrome】別のユーザー(別プロファイル)で複数Chromeを起動する方法 | CGメソッド

YouTube Liveに音声入力で字幕を付ける(OBS + Talk To CSV):使い方編

こんにちは iwatendoです。

 表題の件について以前もブログ記事を書きましたが、今回は具体的な使い方を説明していきたいと思います。

音声入力で字幕を付けたYouTube Live配信

 実際に OBS+Talk To CSV で字幕を付けたLive配信を「もなか えり」さんがやっています。そのアーカイブを見て頂くと、どんな感じで字幕を付けれるかわかります。(もともと音声入力で字幕を付けるアイディアは もなか えり さんと とげきち さんのアイディアでした)

youtu.be

字幕の付け方

まず Talk To CSVGoogle Chromeで起動します。

  • Talk To CSVを起動すると、以下のような画面が表示されます。
  • 「音声入力」のコンボから「日本語」を選択すると音声入力が開始されます。
  • 初回起動時のみマイクの使用許可を聞かれるので許可してください。

f:id:iwatendo:20201011170622p:plain

OBS側の字幕表示方法

  • Talk To CSVの上段のコンボから「OBS用URL」を選択し、その隣の「URLコピー」をボタンをクリックします(クリップボードにURLがコピーされます)
  • OBS側でソースにブラウザを選択します。

f:id:iwatendo:20201011171021p:plain

  • 「ソースを作成/選択」は、適当に名前を付けてOKします。

f:id:iwatendo:20201011171140p:plain

  • URLの箇所に Talk To CSVクリップボードにコピーしたURLを貼り付けます。
  • 幅や高さは自由設定してください。

f:id:iwatendo:20201011171400p:plain

  • 少し待つと、Talk To CSVでのメッセージがOBS上に表示されます。

f:id:iwatendo:20201011171924p:plain

  • (注意)接続用のURLは、Talk To CSVを起動する度に変更されます。その為、毎回コピー&ペーストが必要になります。
  • 表示される文字サイズはOBS側のブラウザソースの拡大・縮小で調整可能です。
  • 字幕には発言者の名前も表示されますが、Talk To CSV側で名前を未入力状態にしておくとOBS側に名前が表示されません。

f:id:iwatendo:20201011175612p:plain

複数人での字幕付与について

 もともとTalk To CSVはオンライン会議等で、音声入力で議事録を取る事を目的としたサービスです。そのため複数人で字幕を付けるといったような使い方もできます。

 たとえば、ゲーム配信で一緒にプレイしているメンバーとDiscordで会話をしながら
Talk To CSVにも接続してもらい、各自が音声入力をONにしてもらう事で参加メンバー全員の会話を字幕として表示するといった事が可能です。

 Talk To CSVに接続してもらうには、メニューの上段のコンボから「招待用URL」を選択して「URLをコピー」を押し、そのURLを一緒にゲームをプレイするメンバーに伝えて接続して貰います。(このURLもホスト側の Talk To CSVを起動しなおす度に変わるので注意してください)

 ちなみに Talk To CSVは、プログラムの都合で多重起動できないような制御をいれているのですが、片方をGoogle Chromeのシークレットモードで起動すれば多重起動可能です。「URLをコピー」して、シークレットモード側のブラウザにURLを貼り付けて起動すれば、とりあえず試しに一人で動かしてみる。といった事も可能です。

f:id:iwatendo:20201011172807p:plain

誤変換対策

 音声入力は誤変換されることも多いため、発言の訂正機能も追加しました。表示済みのメッセージをクリックする事によりメッセージが編集モードとなります。

 自分以外が発したメッセージも編集可能であり、OBS上に表示される字幕にもメッセージの修正内容が反映されます。この機能を利用して配信者以外のメンバーがサポートとして字幕を修正するといったことも可能です。

f:id:iwatendo:20201011173519p:plain

 その他の誤変換対策として、特定のキーワードを文字列置換させるといった事も可能です。それと同時に、特定キーワードに対して絵文字やアイコンを設定する事も可能です。設定手順としては、まずはExcelGoogle スプレッドシートにて、以下ような形式で変換内容を定義します。

f:id:iwatendo:20201011174121p:plain

 上記例では人名やニックネームの変換が上手くいかないケースが多い為、大量の誤変換キーワードを設定しています(これだけ設定しても、また違った誤変換がされるケースもある為、設定は結構大変です)

 その他、変換処理は定義順に実行しますので変換結果をさらに変換させる事が可能です。上記例では「iwatendo」の誤変換を「iwatendo」に変換した後にアイコンを付ける設定をしています。

 変換内容を定義した後はCSVファイルに出力し、以下のページから設定を取り込む事で Talk To CSV に反映されます。(この取り込み内容は、ブラウザに保存されますので毎回実行する必要はありません)

f:id:iwatendo:20201011174935p:plain

絵文字やアイコン付きの字幕表示例

f:id:iwatendo:20201011180013p:plain

技術的な話

 最後に技術的な話となりますが、仕組み的には Talk To CSVを通常起動しているブラウザと、OBS側で起動しているブラウザにてWebRTCのDataChannelを利用したデータ通信をしています。この通信部分にはNTT Communications様のSkyWayを利用しています。

webrtc.ecl.ntt.com

 

良かったら使ってみてください。
それでは。 

 

f:id:iwatendo:20201011094523j:plain

Alexas_FotosによるPixabayからの画像 

Google Chrome + Google Meet 使用時にマイク音量が勝手に下がる現象について

こんにちはiwatendoです。

 自分が開発しているWebサービス(Talk To CSV)で表題のような現象が発生してました。原因を調査したところ、どうやらJavaScript内で getUserMediaでAudio情報(マイク情報)を取得した状態で、マイクの入力音量がゲージを振り切った場合に音量が下がる事がわかりました。

 また、Google Meet等のブラウザでビデオ通話する為のサービス等でも同現象が発生する事を確認しました。解決策は発見できてないのですが調べてもなかなか情報が出て来ない現象だった為、備忘録として書いておきます。

現象の検証環境

現象の検証方法

f:id:iwatendo:20201003120621p:plain

 こんな感じで表示しておいて

f:id:iwatendo:20201003120924p:plain
あとは大声を出す・・のは迷惑なので、マイクに息を全力吹きかけます。(マイクブーストが可能であれば、ブーストすれば結構簡単にMAX行きます)

f:id:iwatendo:20201003121307p:plain

 緑のゲージがマイク音量のゲージです。マイクのレベルが 100 → 88 になってますが、頑張って何度も息を吹きかけ続けるとどんどん下がっていきます。

 これ自動的には元には戻らないみたいなので、何かのタイミングで大きな音を出してしまった場合にマイクレベルが下がってしまい、知らない間に通常の会話の音量が小さくなってしまうので注意が必要という感じです。

 このあたりを見ると、結構前からGoogle Chromeではこのような仕様で動作していたようです。

support.google.com

support.google.com

 

 ブラウザが原因というのがわかっているので、Google Meetの場合はFireFoxを使用する事でこの問題を回避できるようです。(Braveでもこのマイクレベルが下がる現象を確認したので、Microsoft Edge等を含むChromium系のブラウザで発生するものと思われます)

 そこまで大きな問題では無いのですが、マイクレベルが勝手に下がると困る人もいると思われますので、何か解決方法が見つかったら追記したいと思います。  

それでは。

f:id:iwatendo:20201003124223j:plain

 Free-PhotosによるPixabayからの画像

絵文字のライセンスについて調べてみました

こんにちは iwatendoです。

 絵文字自体はUnicodeに含まれているものですが、TwitterFacebook等のSNSに表示される絵文字や、iPhoneAndroid端末で見た場合の絵文字画像が違って見える事があります。これは各プラットホーム側で独自の絵文字を作っていてそれを表示させている為のようです。

 自作のWebサービス等で絵文字を使用したいと思ったのですが、Unicode標準の絵文字は若干味気ないので、各SNS等で使用されている絵文字を自作のWebサービスで使用できるかどうかライセンスについて調査してみました。

Twitterの絵文字について

コード部分についてはMITライセンスですが、アイコンのライセンスについては Creative Commons BY 4.0 のようです。

github.com

自作Webサービスへ組み込む方法は、Let's EMOJIさんのこのページが参考になります。

lets-emoji.com

Androidの絵文字(Note-Emoji)について

絵文字のフォントのライセンス:SIL Open Font License, version 1.1

ツール類や画像リソースは  Apache license, version 2.0 

github.com

自作サイトで使うのであれば、フォントをGitHubからダウンロードしてきて設置するのが良さそうです(未検証)

Appleの絵文字について

 一次ソースは見つけられなかったのですが、以下のサイトを見るとAppleの絵文字を自作のサービスに含めるのはNGのようです。

 自作のWebサービスiPhone等で見た場合に、Appleの絵文字が自動的に表示されるのは全然問題ないと思うのですが、AndroidWindows端末で見た場合に同じようにAppleの絵文字で表示させるような実装はNGとなりそうです。
note.com

5509.hatenablog.com

Facebookの絵文字について

 こちらも一次ソースは見つけられなかったのですが、以下のサイトを見るかぎりFacebookの絵文字のライセンス情報は公開されていないとの事でした。

 こちらも自作のサービスに含めるのはやめておいた方が良さそうです。

emojipedia.org

www.plagiarismtoday.com

Emoji Oneについて

 コード部分についてはMITライセンス ですが、絵文字については商用利用する場合は、有料のプレミアムライセンスが必要なようです。非商用の場合はフリーライセンスで大丈夫なようです。

github.com

注意点

 ライセンスは変更されるケースもあるようなので、実際に自分のサイトに適用する場合は最新のライセンス状態を確認してから適用するようにしたほうが安全です。

最後に

 他にもまだ絵文字の種類はあるとは思うのですが、自分が少し調べて見つけたのはこれくらいでした。他にも何か良さそうなのがあれば追記していきたいと思います。

 個人的にはFacebookの絵文字が良いなと思ってたのですが、自分のサービスに組み込むならGitHubに公開されているTwitterGoogleの絵文字が無難かなと思われました。

 それでは。

 

f:id:iwatendo:20200922081736j:plain

Gino CrescoliによるPixabayからの画像

YouTube Liveに音声入力で字幕を付ける(OBS + Talk To CSV)

こんにちは iwatendoです。

 YouTube Live等のライブ配信にて、音声認識で字幕を表示する方法はいくかあると思うのですが、今日はOBS Studio + 私が開発しているTalk To CSVというサービスを利用してYouTube Liveに字幕を表示する方法を紹介したいと思います。

 もともと Talk To CSVは、ZoomやGoogle Meet使用したオンライン会議にて音声入力をテキストに変換して、最終的にCSVに出力する事を目的として開発したサービスでした。

 このサービスを もなか えりさんがSecond LifeYouTube Live配信で字幕表示する為に試験的に使ってみたそうです。もなか えりさんの配信に出演している とげきち さんから連絡を頂き、こういった使い方もできる事を知りました。

ライブ配信の下部に表示されているのが Talk To CSVで音声入力された文字列です。
(※とげきち さんが、OBSのカスタムCSSの設定をし表示を整えたとの事です)

 完全に想定外の利用方法だったので驚きましたが、結構便利な使い方のように思われましたのでもなか えりさんと とげきち さんの了承を頂いてブログに書かせて頂く事にしました。

 具体的には、以下のような方法で表示しています。

  • Talk To CSVはブラウザ間で直接チャットができる機能を持っており、URLを伝えるだけでチャットに参加する事ができます。
  • OBSの配信ソースに「ブラウザ」があり、指定したURLのページをライブ配信上に表示する事ができます。
  • Talk To CSVのチャットクライアントのURLを、OBSの配信ソース「ブラウザ」のURLに指定します。
  • 見た目を変更する為にはカスタムCSSを指定します(OBS上で指定可能です)

 つまり、音声入力でチャットできるWebサービスのチャット内容をYouTube Liveに表示させているイメージです。現状はOBS上に良い感じに表示させるためにはカスタムCSSが必要となりますが、近日中にOBS用ページを実装予定です。

誤変換の問題について

 Talk To CSV音声認識には Speech Recognition API を使用しています。この音声認識はPC版のGoogle Chromeであれば無料で利用できるAPIなのですが、誤変換も多く発生します。

 上記のような誤変換から、まったく意図しない品の無い誤変換がされる事もあったりして、YouTube Live配信をみていると、申し訳ない気持ちになる事もあります。

 残念ながら私の力では音声入力の変換精度を上げる事はできない為、音声認識の変換結果を特定キーワードを置換できる仕組みを実装してみました。

 Speech Recognition Text Modify : 音声認識結果の文字列変換定義の登録

 最近のもなか えりさんの配信で試験的に使用して頂いてて、名前の誤変換は多少改善されたようです。

 名前はなるべく誤変換して欲しくないと思う人も多いと思うのですが、音声入力で一番正確に変換するの難しい部分ではないかと感じています。

 特に日本人の名前は同じ読みで違う漢字を使うパターンが非常に多いため、音声入力で正確に変換するのは非常に困難です。とりあえず現状では、こういった方法でしか、誤変換を減らす方法が無いように思われました。

耳が聞こえない人の為の字幕表示について

 もなか えりさんは聴覚障害を持つ友人の為にYouTube Liveにリアルタイムで字幕を付けたかったとの事です。私自身も聴覚障害者の為のWebサービスを開発したいと思っていたこともあり、このような使い方をして頂いて非常に嬉しく思います。

 ただ、音声入力での字幕表示は、まだまだ誤変換が多く、音声無しでは会話の流れを正確に掴むのはのはまだまだ難しいなぁ・・というのが正直な感想です。

 音声入力の変換精度は上げれないのですが、少しでもライブ配信の楽しい雰囲気を伝えれるようにする為、誤変換の対策と同時に、特定キーワードを絵文字にしたりアイコン表示する機能も付けてみました。

 実際にその機能を使った動画はまだ無いので、近いうちにどのように表示されるか検証動画をアップしてみたいと思います。

最後に

 今日は記念すべき「えりさんぽ」100回目の配信でしたので、その配信を視聴しながらこのブログを書いてます。もなか えりさんは癒し系ボイスで、何回かYouTube Live配信を見ているうちに、私もすっかりファンになってしまいました。皆さんも良かったら見てみてください。

 それではまた。 

 2020.10.12 追記 もう少し詳しく使い方を書きました。iwatendo.hateblo.jp

Communication Board:スマホを入力装置に、ブラウザをフリップボードにするサービス

何年か前に映画「聲の形」を見て号泣した事をきっかけに、作ってみたサービスを紹介したいと思います。

始めに

このサービスは以下のような用途を想定しています。

  • 喋れない人が誰かに言葉を伝えるためのツールとして

  • 耳が遠い人に言葉を伝えるためのツールとして

  • 外国人とのコミュニケーションの為のツールとして

具体的に、どのような事ができるかは動画にしてみました。

youtu.be

 開発中のサービス

以下のURLから起動可能です(但し、PCのGoogle Chromeで開く必要があります)

(注1)利用する端末や環境によっては動作しない可能性あります。
(注2)PCやスマートフォンがスリープ状態になると切断します。

基本的な使い方

各種設定について

f:id:iwatendo:20200620181051p:plain

  • 文字サイズ : ブラウザ側に表示する文字サイズを変更可能です。
  • 同期表示 : スマホ側の入力がブラウザ側にリアルタイムに反映されます。(チェックを外した場合、送信ボタンを押さないとブラウザ側に反映されません)
  • 表示端末との再接続 : スリープ等で接続が切れた場合に押すと再接続されます。
  • 接続用キーの表示 : 複数の端末の端末で表示する場合に使用します。(通常の用途では使用しません)

注意事項

  • QRコード(接続用のID)は毎回変更されます。1度接続に使用されたQRコード(接続用ID)は再利用される事はありません。
  • その為、毎回QRコードを読み込む必要があります。
  • iPhoneQRコードで読み込む場合は、QRコードリーダーからではなく、標準カメラからQRコードを読み込んでページを開いてください(その方が何かと安定します)

f:id:iwatendo:20200621111114p:plain

その他、便利な使い方

  • 右上の翻訳ボタンから、他言語に翻訳可能です。また「+」ボタンからタブを増やしていくことで、複数の言語にリアルタイム翻訳する事が可能です。

f:id:iwatendo:20200621152204p:plain

このサービスの仕組みについて

  • SkyWay (WebRTC) のDataChannelを利用しています。
  • ブラウザ間で通信をしている為、通信内容はサーバーに保持されません。
  • サービス提供者の私も通信の内容を傍受できない仕組みになっています。

上級者向けの使い方

 文字列以外にも、埋め込みHTML等の表示が可能です。これについては後日、説明の記事を書きたいと思います。(動画内のいらすとやの画像は画像として送っているわけではなくHTMLとして送信しています)

簡単に仕組みを書いておくと

  1.  PCのブラウザに、埋め込みHTMLを保存
  2. 上記の埋め込みHTMLデータを、スマートフォンに転送
  3. スマートフォン側から、埋め込みHTMLをPCに送って表示

 データを準備するPC(1)と、データを表示するPC(3)は別々でも大丈夫です。

 例えば、自宅のPCで埋め込みHTMLを準備し、スマホに転送しておき、会社のPCにそれらを表示させるような用途を想定しています。

 データは全てブラウザのDB(IndexedDB)に保持されます。こちらも外部サーバーには保持されず、利用者以外はアクセスできない仕組みです。