情報管理LOG
yoshinon

ITやモバイル機器、iPhone、手帳や本など。

iOSでもできる!PC+iPhone+無料ツールで字幕付きZoomや配信をする方法

2020年05月23日
ソフト 0
2020052200.png


情報管理LOGの@yoshinonです。
この数日、Twitterに投稿された1本の動画が、ものすごく話題になっていました。なんと、PC+Android+無料ツールでリアルタイム字幕付きの動画配信をやっている様子が映っていたのです。しかし、残念なことにiOSでは難しいのではないかと言われていました。

いやいや、そんなことはないはずです!

「Androidでできることは、iPhoneでもできるはず!」という謎の原動力に突き動かされて、とうとう実用レベルでリアルタイムで字幕を生成して、映像に重ね合わせる方法を見つけました。これは、社会の役に立つ技術だと思いますので、ぜひ多くの方にシェアしていただければ幸いです。
前置きが長くなってしまいましたが、どうぞ!

追記:Zoomでは、反転した状態がデフォルトで、相手先で成城に見えるため記事の中ほどにある水平反転の必要性はありませんでした。(20200523 10:25)


  
【 iOSでもできる!PC+iPhone+無料ツールで字幕付きZoomや配信をする方法 】  

 1.一本の衝撃的な動画

 2.事前準備

 3.OBSにアプリの画面を入れる

 4.Zoomの外部カメラとして読み込む








まずは、一本の衝撃的な動画をご覧ください。




これ、すいごくないですか?
これは、PCを介して、Androidで音声入力した文字をリアルタイムで字幕化しているのです。

実は、これに先立つ動画もありました。
落合陽一氏が、同じようにGoogleの音声変換を画面上に重ねて表示させるという動画です。



有料記事ですが、これについて気づきなどが書かれています。

音声文字変換とスイッチャーで捗るビデオ文字コミュニケーション / #日々短文雑記|落合陽一|note



最初の動画の技術的な俯瞰図は、こんな感じ。




このTwitterのスレッドでは、さらに細かな技術的なやりとりがなされているのですが、残念ながら音声入力の入力元としては、Androidではできるけど、iOSではできないみたいな感じで書かれていました。うーん、残念。
と、諦めるような情報管理LOGではありません。

やれぬなら、やってしまおうホトトギス

(何か違う)の精神でやってみたらできてしまいました。
さあ、iOSユーザーもぜひ、この未来感溢れる感じでZoomとかやってみましょう。





まずは、事前にアプリなどを入れておく必要があります。

【PC】
PCに入れておく必要があるのは、上の長谷芳樹氏が紹介していたOBSというソフトウェアです。これは、動画をキャプチャして重ねたり、それを外部カメラとして他のアプリに渡すことができるというすごいソフトです。配信アプリとしても使われているみたいですね。



それと、iPhoneというか、iOS全般の問題である画面のミラーリングをPCでもできるようにするためのソフトとして、Apower Mirrorというソフトも入れてください。有料アプリですが、基本無料で使えます。

ApowerMirror-スマホをリアルタイムにミラーリング/制御する



【iOS】
iOS側は、1つだけです。
UDトークという主に聴覚に障害がある方向けのアプリで話した言葉が、文字に変換されるアプリです。これの素晴らしさについて語り始めたら、非常に長くなるので、また別記事で書きたいと思います。iOSの音声入力は、一定時間を過ぎると自動的に止まってしまうので短い文章ぐらいならiOS標準ので良いですが、長い会話とか、長文を音声変換するのには向いていません。ところが、UDトークは、そういう時間的な制限なく音声入力が可能なのです。

UDトーク
UDトーク
開発元:Shamrock Records, Inc.
無料
posted withアプリーチ






1.OBSを起動する
PC側でOBSを起動します。画面構成は、こんな感じです。
※OBSの画面は、最大化しないこと!(←重要です)

2020052201.png



2.Apower Mirrorを起動し、iPhoneの画面をミラーリングする
次にApower Mirrorを起動します。

2020052202.png



同一、Wi-Fi上であれば、AppleTVと同じような手順でiPhone側からミラーリングできます。




そうすると、iPhoneの画面がPC上のApower Mirrorにミラーリングされます。
無料版は、下の方に透かしが入りますが、全然気にしなくて良いです。
※この画像は、1年ぐらい前の私のホーム画面ですね。(参照:私が、最近注目しているアプリ達を紹介します





3.UDトークの「トークを始める」
UDトークの「トークを始める」をタップします。

2020052203.png



この段階では、音声認識はスタートしません。下の赤いボタンをタップすると音声認識がスタートしますが、まだ始めなくて良いです。先にやることがあります。

2020052204.png



4.Apower Mirrorの画面サイズを変える
Apower MirrorにUDトークの画面が配信されているはずですが、実はUDトークは画面をミラーリングしてもiPhoneと同じ画面になりません。このような真っ黒な画面として配信されるのです。気にしないでおきましょう。

2020052205.png



ただし、画面サイズがやたら大きいので、小さくしてしまいましょう。

Image from Gyazo

もしも、PCが二画面の人は、OBSとApower Mirrorは、画面を別にした方が良いです。
1画面のみの人も画面が狭くなっちゃいますが、大丈夫です。




5.Zoomを立ち上げる
この段階でZoomを立ち上げましょうか。
今回は、Zoomで説明していますが、外部カメラを取り込み可能なものならGoogle MeetやMicrosoft Teamsでも大丈夫!

新規ミーティングで開始します。この段階では画面の取り込みサイズを測るためなので、正式なミーティングでなくてもOKです。



6.OBSでソースの指定をする
いよいよOBSで画面を作っていきます。
下の方にある「ソース」の+部分をクリック。

2020052206.png



「画面キャプチャ」をクリック。

2020052207.png



「ソースの作成」は、新規作成でOK。
※デュアルディスプレイの人は、「画面」でキャプチャする画面を選べます。

2020052208.png

2020052209.png


このように1画面の人は、合わせ鏡のように無限に続いて行くみたいな画面になります。

2020052210.png




まずは、Apower Mirrorの画面をキャプチャします。OBS上で取り込み範囲を指定していきます。赤い点の上にカーソルを乗せてAltキーを押しながらドラッグすると取り込み範囲を切り取ることができます。ここでは、Apower MirrorがミラーリングしているiPhoneの画面だけを指定します。

2020052211.png



7.OBSでカメラの映像を取り込む
Zoomでは、外部カメラとしてOBSを読み込むので、OBS上でWebカメラの映像を取り込まなくてはなりません。先ほどの「ソース」で今度は、「映像キャプチャデバイス」をクリック。

2020052212.png



これも、「新規作成」でOK。

2020052213.png



そうすると、OBS上にカメラの映像も取り込まれます。

2020052214.png



8.レイアウトを決める
この段階でどのような感じで配信したいのかレイアウトを決めていきます。先ほどの字幕やカメラの映像を、表示させたい位置や大きさに指定していきます。
この時にUDトークの方で音声認識させて字幕を表示させて文字の大きさを確認しながらやると良いです。割と拡大しないと文字が小さいかも。

2020052215.png



9.字幕を透過させる
このままだと黒い四角が残ったままなので、字幕部分を透過させていきます。字幕部分のところを右クリックして「フィルタ」を選びます。

2020052216.png



左下の+をクリック。「カラーキー」を選びます。

2020052217.png

2020052218.png


「フィルタ名」は、適当にOK。

2020052219.png



「色キーの種類」をクリック。「カスタム色」を選択。

2020052220.png



「色を選択」をクリック。

2020052221.png



黒を選びましょう。

2020052222.png



そうすると…字幕が透過された!

2020052223.png



10.色ソースを追加する
でも、なんか明るい部分の字幕の文字が見づらいので、見やすくしてみたいと思います。「ソース」から「色ソース」を追加します。

2020052224.png



これも適当にOK。

2020052225.png



「色を選択」から私は黒色を選択しました。これは、好みで。

2020052226.png



大きさを字幕とほぼ同じ大きさに変えてえます。

2020052227.png



11.色ソースを半透明にする
「ソース」で色ソースの順番を「画面キャプチャ」の下にします。

2020052228.png



そして、「色ソース」で右クリックして、「フィルタ」

2020052229.png



「クロマキー」を選択。

2020052230.png



不透明度を70%ぐらいにしておきます。

2020052231.png



そうすると、良い感じになりました。

2020052232.png



ここまでできたら、準備は完了です。





では、いよいよZoomの外部カメラとして読み込みます。
でも、その前にOBS側で「ツール」→「VirtualCam」を選択。

2020052233.png



「START」をクリック。

2020052234.png



いよいよZoomで「OBS-Camera」を選択します。

2020052235.png



すると…おぉ、映りましたね!
しかし、字幕が反転していることが分かります。

2020052236.png

追記:Zoomでは、こちら側の画面で反転して見えていても、相手先ではちゃんと表示されるため、あえて反転せずともOKです。したがって、以下の水平反転の必要はありません。


そこで、OBS上で字幕部分を右クリック→「変換」→「水平変換」で反転してくれます。

2020052237.png



これで直りました!

2020052238.png



では、実際の字幕生成の様子を見てみましょう。
こんな感じで字幕がリアルタイム生成されているのが分かります。

Image from Gyazo



 eyeglass2.png 情報管理LOGの眼
 これは、聴覚障害の方にもありがたいですね

単にリアルタイム字幕生成を楽しんでも良いのですが、Zoom上の聞き取りづらさの解消や、聴覚障害の方にもかなり使えるのではないかと思います。こういう技術がもっと一般化すれば良いですね。

今回の記事を書くにあたって参考にさせていただいた記事。

OBSをバーチャルカメラとして出力してZoomやTeamsで映像ソースとして認識させる方法 | 技術的な何か。
OBSの正しい画面キャプチャーのやり方。「範囲指定できないの?」という人へ - 新・VIPで初心者がゲーム実況するには
【要点は3つだけ!】OBS Studioの詳しい使い方・設定方法をご紹介┃ゲーム配信初心者でも今すぐ配信可能! | esports PLUS






関連記事

コメント0件

コメントはまだありません