QRコードひとつでNATも超えて映像受信できるNDI RemoteがUT/インタビューで使えるかも?

Pocket

先日からちらほら名前を出しているNDIというネットワーク経由の映像配信プロトコルがあります。

先日こちらのメジャーバージョンアップとなるNDI5がリリースされました。従来の(私の理解では)NDIは同一LAN内での配信がメインだったのに対し、NDI5ではインターネット越しのリモート配信をセキュアにかつ簡便に行えることを主眼としているようです。

NDIはいくつかのユーティリティ群の集合体ですが、NDI5に含まれるNDI Remoteというツールを使うと、ZoomやTeamsのミーティング招待を送るように、URL(とそれを示すQRコード)を発行し、招待された側は特別なアプリ不要でブラウザから開くだけで映像と音声を招待者に送ることができます(ブラウザのカメラ及びマイクアクセスを許可する必要あり)。招待した側がどのように映像を受け取るかというと、(他にもあると思いますが)NDI Webcam Inputというツールを起動しておき、そこから仮想ウェブカメラにリダイレクトする形になります。NDI Webcam Inputが起動していると、ZoomやTeams、OBS Studioといったツールのカメラ選択メニューに「NewTek NDI Video」という仮想カメラが出現し、それを選ぶと、遠方から送られてくる映像が受け取れ、Zoomなどに流せる、というわけです。ZoomやTeamsに流すだけなら最初から被招待者をZoomやTeamsのミーティングに参加してもらえばいいんじゃ?という気もしますが、メリットとしては、

  • スマホの場合でもアプリをインストールしてもらう必要がない
  • ユーザ登録も必要ない
  • より高い画質、解像度の映像を受け取れる(Zoomは標準で720p、Teamsは通信速度に応じてかなりコロコロ変化するで使いにくい)

などがありそう。遅延が少ないというのもNDIの特長と言われていますが、実際のところ様々な条件で比べたわけではないので確証はありません(むしろZoomやTeamsといった会議プラットフォームの方が画質を犠牲にして遅延を最低限に抑える方向に機能するイメージ)。

またWebcam Inputの映像をZoomやTeamsではなくOBS Studioのような録画/配信ツールに入れるなら更にメリットも増えます。

  • 表示(録画)レイアウトを自由にできる
  • 無料プランでも時間制限を気にせず長時間使える(録画もできる)

ただし双方向サービスではないので、インタビューやユーザテストにZoomやTeamsの代わりに単体で導入できるものではないでしょう。今のところ私が使ってみたいなと思うシーンは、ZoomなどでリモートUTをする時、相手の(Zoomでつながった)スマホで画面共有をしてもらうと、インカメラが無効化され相手の表情が見えなくなります。あるいは画面共有だと操作する指が映らないのが難点となります。こういう時に相手方にもう一台スマホなりがあれば、ZoomでNDI RemoteのQRコードやURLを送って、サクっと映像ストリームを増やせるかなと。そちらのスマホで顔なり手元なりを映せるポジションに固定してもらえばいいんじゃないかと。1つのミーティングに同じ場所から複数端末で参加するとハウリングが起きて慌てたりしがちですが、NDI映像を主宰者側で独立ストリームで受け取れるならミュートなどもそちらで制御できます。さらにTeamsならばミーティング側の個別ストリームもNDIで取り出せるので、OBSで自由にレイアウトしたUT動画を組めそうな気がします。

以前にも書いた通り、ケーブルの引き回しに関するメリットもあります。

「またHDMIやUSBの問題としてケーブル長の限界があります。USBは3.0だと数メートルが限界(規格上の上限)ですし、HDMIも10mものばすとケーブルや機器の相性が出やすくなるようです。より長い距離を伝送するにはリピーターのような増幅機器が必要だったり、HDMIだと内部が光ファイバーになっている光学なケーブルなどもあるようですが、NDIだとイーサネットケーブル、場合によってはWi-Fiでもとばせるので低コストで距離が出しやすいのも特長だと言えそうです。」

NDIはこれから注目していきたい伝送方法だと思います。

色々機材的にチャレンジングだったUTのふり返りメモ

Pocket

先日の案件で撮影や配信面で初挑戦をしたので、所感をメモしておきます。

セッテイングとしては、とあるハードウェア製品の調査で最終的に4カメラの映像ストリームをOBS Studioで合成して、ウェブ会議ツールに画面共有で配信という内容でした。4ストリームの内訳は、

  • 対象製品(アングル1)
  • 対象製品(アングル2)
  • 参加者表情
  • 資料提示用プロジェクター画面

てな感じ。セッション/タスクの進行にあわせて特定のストリームをアップにしたシーンを切り替える(タスク中は製品、インタビュー中はプロジェクター、表情は常に右上にPinP、とか)ということもしました。モデレーター、提示プロトタイプ、提示資料の切り替え、見学者からのチャットメッセージ対応、配信映像(シーン)切り替えとワンオペでこなす必要があったので、1ボタンでスイッチできるようにしたりと省力化の工夫もチャレンジの1つでした。

■4ストリームの合成

1台のPCで4ストリームをキャプチャし、合成し、配信するということを安定して行うため、最新ノートPCを導入しました。ゲーミングPCです。8コア16スレッドのRyzen 9というパワフルなCPUを搭載しつつ、GeForce RTX3070という協力なGPUで映像のハードウェアエンコードをこなしたり、AI処理による優秀なマイクノイズ抑止機能が使えたりする点が特徴です。

この性能を14インチに詰め込んだだけあって、さすがにファンはうるさめでしたり、更に外付けというか下にしくタイプのノートPC冷却台もぶん回しました。

ソフトは本ブログでも何度も紹介している定番OBS Studioを使用。HDMI USBキャプチャを複数台つなげたところUSBポートの電力不足か非常に動作が不安定になり、セルフパワー式のUSBハブを入れたり、最終的には1つは後述のNDI(ネットワーク)経由でのキャプチャに切り替えたりしました。

ATEM MINIシリーズの上位モデルであるExtreme /同ISOであれば4系統の映像を好きなレイアウトで合成することができるので、PCとATEM MINIのどちらを買い換えるか悩みましたが、今回は汎用性の高さでPCを選びました。

今のクライアントも追々機材を買い揃える予定ということで、今後また4ストリームの合成が必要になる機会がすぐにあるかわかりませんが、いずれ懐に余裕ができたらATEM MINI Extremeも導入しておきたいなと思います。

教訓:USBは消費電力総量を意識し、セルフパワーハブを使う(特にノートPCの場合)

■デジタル一眼カメラの投入

当初クライアントがもっていたUSB Webカメラ x4台を使用するてはずでしたが、やはりノートPCのUSBポートは電流不足なのかめちゃめちゃ不安定で、ハブに1つずつ挿していくと3台目、4台目あたりで認識しない、映像が止まるなどトラブル続き。カメラに加えてUSBのケーブル長を伸ばすリピーターケーブルも使ったせいもあるかと思います。またUSB Webカメラは光学ズームがなく望遠撮影ができないため、カメラ設置場所に制約がでてしまうので、持ち込みでビデオカメラ + HDMIキャプチャを使用させていただくことにしました。

その際、古いビデオカメラだとHDMI出力にOSD(タッチパネルGUI)が載ってしまったり、撮影してないと電源が落ちてしまうなど問題があり、代わりに写真用に買ったα6600を投入しました。デジタル一眼だと業務用ビデオカメラ同様に各種設定(ピント、ホワイトバランス、露出など)をマニュアルで固定したり、その設定を保存できたりして結果的にかなり便利でした。唯一光学ズームだけは電源入れ直すと戻ってしまい都度再調整していましたが、そこは多くのビデオカメラも同様です。

ビデオカメラの方が光学ズームと長時間録画の安定性の面では信頼感がありますが、本体録画しないでOBS用に映像を出力するだけのデバイスとしてみると、カメラ性能や機能面ではむしろデジタル一眼カメラいいな、という感触です。

■配信用サブモニタの設置

OBS StudioはPCにつながった特定のサブモニタに全画面プレビューを出すことができます(詳細はこちらの記事の「■OBS Studioからサブモニタをプレビュー用に使う」の項をご覧ください)。

独立のモニタに常時プログラム映像を映し、その画面全体をウェブ会議ソフトで画面共有するという体制をとりました。こうすることで常に見学者に見えている映像が確認できて良かったです。メイン画面には進行シートや見学者チャットなどがゴチャついているので、ウインドウ共有だとうっかり他のウインドウがかぶって更新されないエリアなどが出てしまいます。またOBSのUIなど余計なものが配信に映り込まず、映像をフルスクリーンでお届けできる点もマル。

今回はフルHDで配信できるよう液晶の実解像度もフルHDでサイズも手頃なこちらのモニタを導入しました。

ガチ目のフィールドモニターだと画質が良いかわりに7インチとか5.5インチとか小さめのものが主流で、老眼はじまってる目にはピント来てるかの確認などは辛いものがあります。10.8インチというとiPadくらいですが、額縁が細い分専有面積はそれよりもやや小さいくらいで手頃でした。USB Type-C(Alt Mode)なら電源供給も含め1本のケーブルで賄えるのが長所ですが、今回はUSB周りはキャプチャで過負荷状態だったので、電源は付属アダプタからとり映像はHDMI接続としました。

■NDIを使った映像送信

NDIとはNewtek社が開発しているネットワーク映像伝送規格です。HDMI入力映像をネットワーク経由で送受信するハードウェアのエンコーダーやデコーダーもありますが、OBS Studioでも送受信ともに行うことができます。

今回、HDMI-USBキャプチャでUSB周りがパンク気味だったので4つ目のストリームとしてプロジェクターに映像を出していた別PCの画面はNDIプラグインを入れたOBS同士で伝送する方式に切り替えました。ギガビットイーサネット経由でフルHD/30pだと多少遅延を感じましたが、もともと動画と静止画を映示する用であまり遅延は問題にならないコンテンツでしたし、更に途中からは送信画質を720pに落としたりしてからは遅延も気にならなくなりました。

またHDMIやUSBの問題としてケーブル長の限界があります。USBは3.0だと数メートルが限界(規格上の上限)ですし、HDMIも10mものばすとケーブルや機器の相性が出やすくなるようです。より長い距離を伝送するにはリピーターのような増幅機器が必要だったり、HDMIだと内部が光ファイバーになっている光学なケーブルなどもあるようですが、NDIだとイーサネットケーブル、場合によってはWi-Fiでもとばせるので低コストで距離が出しやすいのも特長だと言えそうです。

先日新バージョンであるNDI5が発表され、インターネット越しのセキュアな伝送や、アプリいらずでQRコードなどでURLを共有するだけでスマホのカメラ映像をNDI送信する機能が実装され、今後ますますNDIは目が離せなくなる技術なんじゃないかという気がしています。今後信頼性なども含めて検証をしていきたいテーマです。

■音声収録ミスとバックアップ録音からの救済

今回の音声はRODE Wireless GO2を使いました。実践初投入です。

マスクをしたり参加者とモデレーターの間にアクリルシールドを立てたりした環境でしたが、本製品で互いの口元にワイヤレスマイクを配置できたおかげでクリアな収録ができました。Wireless GO2は音質、安定性、バッテリー保ちなど満点でした。100分のセッションに1時間のインターバルで一日3セッション実施しましたが、インターバル時間の追い充電で余裕をもって回せました。唯一クリップで胸ポケット留めした時に、生地によっては本体の自重でおじぎをしてしまいマイクが下を向いてしまうことがわかったので、別途ネックストラップを首にかけてもらい、それに装着することにしました。長さ調節できるものを百均で買ってきて、首にかけた後で少し持ち上げるように縮めてもらえば、口元への距離も近づいてGoodでした。目立つストラップにしておけば参加者さんがうっかりそのまま首にかけて帰ってしまうリスクも軽減できるかなと。

そして今回OBSの設定ミスで、途中で追加したシーンに音声ソースが追加されておらず、画面レイアウトを特定シーンに切り替えた時だけ音が途切れる、という動画が出来上がってしまいました。そこでWireless GO2の特長である送信機内へのオンボード録音機能で残っていた音声ファイルを使い、Premiere Proで合成して事なきを得ました(デフォルトOFFなので事前に専用ツールで有効化しておく必要があります)。

送信機に残っているデータはRTX Broadcastのノイズ低減フィルターを通らない素の音で、少し音量を持ち上げてやるとさすがに少しホワイトノイズが気になる感じでした。それもPremiere Proのクロマノイズ除去で簡単に消えたので、人の声に限定してみれば音質的な素性は良いんじゃないかと思います。ちなみにRTX BroadcastとPremiere Proのクロマノイズ除去では前者の方がより声の変質が抑えられていて、自然な感じでした。RTX Broadcast >>> クロマノイズ除去 > Krispという感じかな。クライアントからも聞きやすいと言ってもらえてRTX Broadcastが使えるノートPCに買い換えた甲斐があったなと思います。

教訓:音声系統のバックアップは必ず録ろう。

■AutoHotKeyによる1キーオペレーション

プロジェクターに動画や静止画、PowerPointスライドといった資料を映して、それについて感想などを聞くステップがあり、しかも結構な頻度で行き来する必要があった為、マウスで選んでダブルクリックという手間すら惜しんで、キーボードの1~0キーで切り替えられるようにしました。

実装にはAutoHotKeyをいうWindows向けのフリーソフトを活用。設定方法については別記事にまとめてありますのでご覧下さい。

PowerPointファイルの場合、sleepコマンドを使ってファイルを開いた少し後にF5キーを送信するようにしました。

 

さすがに10キーあるとどれが何だったか忘れがちで付箋に書いて貼ったりも。

■マクロキーパッドの活用

同様にプロトタイプを実行するiPadでもモデレーター側でリモート操作する必要があり、プロトタイプ作成者にキーボードショートカットを仕込んでもらい、Bluetoothキーボードの一種であるマクロキーパッドAZ-Macroを活用しました。

PC3台、ATEM Mini Pro、キャプチャアダプタ、USBハブ、充電器などがひしめくモデレーター席で、更にBluetoothのフルキーボードを置くスペースはなかったし、キー数が少ないことで混乱なく所定の操作を一発でトリガすることができました。

AZ-Macroは本体内にキーアサイン設定を書き込むことができるので、AutoHotKeyのようなキーリマップツールを使わなくてもあらかじめ所定のキーコンビネーションを割り当てておける上、それを非Windows環境であるiOSやAndroid、ChromeOSといった端末でも再現できるのが素晴らしい点です。

■まとめ

これだけやっても結局のところ結構ミスしたり切り替え操作したりとワタワタでしたが、クライアントさんも温かい目で見守ってくれていたのでなんとか無事終わらせることができました。

ようやく対面でUTが実施できるところまで戻ってきましたが、まだまだ首都圏は油断ならない状況ですし、見学者はリモート、という流れは感染が収まっても続いてく可能性は高いので、これからも精進していきたいと思います。

なんやかんやでゲーミングノートPC含めて新規導入機材が嵩んでしまったので、これから頑張って元を取っていかねばなりませんので、お仕事のご相談お待ちしております。UT自体は自分達で回せるよという場合でも、機材や配信周りの案件でもご相談いただければと思います。

UTの際、AutoHotKeyで動画や静止画を素早く提示する

Pocket

とあるUT(ユーザテスト)案件で、プロジェクターを使って参加者に動画や静止画を次々切り替えながら提示するという要件がありました。

もちろんPCをプロジェクターにつなげてマウスでファイルをダブクリックしていけばできてしまうことなんですが、ファイル一覧から目的のファイルを選んでダブルクリックして全画面に切り替えて、などしてるとなかなかにモタつきます。ファイル一覧や余計な部分が見られてしまうのもよろしくない場合もありますし、都度ExplorerやFinderの画面が見えてしまうと没入感が失われてしまったり、薄暗い部屋で黒っぽいコンテンツを見ていた時にいきなり真っ白な画面になるのも目に刺さります。

ということで、今回の案件では以下の方法で、

  • 1ファイル1ショートカットキーを割り当て1ストロークで呼び出す
  • 毎回Explorerに戻らずスライドショーのように行き来できる
  • ファイル名や再生UIなど余計なものを画面に出さない

ことを実現しました。なおAutoHotKey、VLCというフリーソフトを用います。Windowsでない方、会社のルールでフリーソフトを入れられない方はごめんなさい。

■AutoHotKeyで特定ファイルを1キーで開く

AutoHotKeyは特定のキー操作に対して様々な自動処理を割り当てることができる常駐ソフトです。通常はキーの入れ替え(別のキーストロークを送信)などで使われますが、特定のソフトやアプリを開いたり、マクロで連続操作などをすることもできる万能ツールです。

設定ファイルは.ahkという拡張子のテキストファイルで作成し、これをダブルクリックすることで適用されます。なので設定を書き換えた後は.ahkファイルをダブルクリックしておくのをお忘れ無く。

またAutoHotKeyの動作を停止した場合は、タスクトレイから緑の「H」アイコンを探し、右クリックして「Exit」を選べば終了します。設定ミスでまともにキーボードが使えなくなった時は慌てずAutoHotKeyを終了しましょう。

今回の設定ファイル例はこんな感じ。できるだけ日本語(2バイト文字)などは使わない方がトラブル軽減ですが使う場合はファイルをShiftJISで保存するのがポイントのようです。

セミコロンの行はコメント行で動作上は無視されます。メモなどに。

は再読込時に確認ダイアログを出さないという指定です。

がワンセット。1行面が入力(1が押されたら)、2行目が操作内容(c:\hoge\picture1.jpgを開く)、3行目はセット終わりを明示、となっています。Returnの前に操作内容を複数行書けばマクロ(バッチ)として使えます。操作が1つしかない時は、

のように1行で書いてReturnを省くこともできますが、個人的にはReturnで区切った方が見やすいかなと思います。

「1」は色々と多用するので、モディファイヤーキーを追加したいという時は、Shiftなら「+」、Ctrlは「^」、Altは「!」をつけます。例えばCtrl+1を押した時、というのは、

に変更します。

Windows Media Playerでは全画面表示切り替えはダブルクリックまたはAlt + Enterのようなので、動画を開いた後でAlt+Enterを押すという流れを自動化してみましょう。

動画が開ききらないうちにキー操作しても無視されてしまうので、「sleep,2000」で2秒(2,000ミリ秒)ウェイトを入れています。「Send,!{Enter}」でAlt(=!)とEnterを同時押ししています。{}で括るのはe+n+t+e+rというキーストロークではなくEnterキーだよということを明示するのに必要です。なくても大丈夫なケースもありますが経験上あった方が確実に動作することが多い気がします。

AutoHotKeyは他にも色々なことができます。特定のアプリ限定のショートカットを設定したり、逆にバックグラウンドにいる特定のアプリをフォアグラウンドに呼び戻してから操作をさせたり。もしご興味あればこちらの記事もご覧ください。

さて、これで2キーを押すとmovieA.mp4が再生され、一瞬おいて全画面に切り替わるようになりましが。が、実際に運用すると問題が出てきます。Alt+Enterはトグルなので、既に全画面表示している動画がある場合、逆に全画面解除されたりします。また全画面表示時に余計なUIが表示されたりといったこともWindows Media Playerの制限です。そこで他の細かなオプション設定ができるビューワーソフトを使うこと

■VLCで全画面表示

設定の多彩さといえばVLCが定番です。下記の設定を適用することでいい感じになると思います。

・詳細設定項目を表示する

「ツール」->「設定」
左下の「設定の表示」で「すべて」に切り替え

・上記操作を毎回しなくてよくする

「インターフェース」(第一階層)下の「詳細設定オプションを表示」をON

・全画面表示時にスライダーなどのUIを出さなくする

サブツリーの「メインインターフェース」→「Qt」を開く
「全画面表示モードでコントローラーを表示」をOFF

・ファイルを開いた時にデフォルトで全画面モードにする

「ビデオ」(第一階層)を選択
「全画面ビデオ出力」をON

・最初に数秒ファイル名が表示されるのを止める

上記画面で「ビデオにメディアタイトルを表示」をOFF
以上をしたら「保存」をして設定画面を閉じます。これをすると必ずファイルが全画面になり、UIも出なくなるので戸惑いますが、ダブルクリックすれば全画面モードが解除され設定メニューにもアクセスできるので憶えておいてください。
最後に使いたいファイル拡張子をVLCで開くように関連付け設定をしておくのをお忘れ無く。VLCはjpgなど静止画ファイルも扱えるので、動画と静止画が混在していても問題ありません。

OBS Studioの出力映像を外部レコーダーで負荷分散するTips

Pocket

OBS Studioは録画と配信が同時にできるスグレモノのフリーソフトですが、PCがあまりハイスペックではない場合(dGPU非搭載PC等)、1台に両方を賄わせようとすうると厳しいものがあります。そこでHDMI入力のある外部レコーダーやキャプチャ装置をつけた他のPCにどちらかを任せてしまうことを考えます。しかしその際に問題になるのが、PCの画面をHDMIでそのままミラーリング出力した場合、OBSのUIなども一緒に映り込んでしまいます。なんらかの方法で範囲指定してクロップした場合も、解像度が落ちてしまったり、うっかりウインドウ位置を変更したら録画位置から外れてしまうなどの問題があります。

これを解決するためのOBS Studioの便利技を見つけたので書き残しておくことにします。

皆さんは2画面モニタのPC(ノートPC+プロジェクターなどでも可能)PowerPointのスライドショーを使ったことはおありでしょうか。あれってメインモニタ(=内蔵モニタなど)側には様々な操作をするUI込みのスライドが映り、サブ画面(=プロジェクター側)にはスライドのみが全画面表示されます。あの状態であればサブ画面側のHDMI映像をそのまま録画すれば余計なものが映り込んだり、表示区域がズレたりといった事故は起きません。以下でお伝えるのはまさにそれをOBS Studioで実現するための方法です。

Windowsで説明しますが、Macでも基本同じようにできるはずです。

1) 録画(配信)機器をサブモニタとして認識させる

PCにサブ画面用のHDMI出力があればそこに録画機器をつなぎます。設定によってはメインモニタとサブモニタに同じ内容が表示されるミラーリング(複製)モードになっている場合があります。ディスプレイ設定を開き、「1|2」のような表示になっていたらミラーリングモードです。

ミラーリング設定になっている場合の表示

この場合、そのまま画面を下にスクロールし、「マルチディスプレイ」から「表示画面を拡張する」を選びます。

ミラーリング(複製)から拡張設定に変更

そうすると最初の図が下のように「1」と「2」が別々に分かれて配置されると思います。これでサブモニタが独立した第2モニタとして設定されたことを示します。1と2の位置関係は変更可能ですが、今回はどこにあっても構いません。解像度は録画機器が対応する最大解像度になっていると思いますが、必要なら変更しておきます。

デスクトップ拡張モードに変更した状態

■OBS Studioからサブモニタをプレビュー用に使う

次にOBSを起動し、プレビュー画面上で右クリックし下図のように「全画面プロジェクター」→外部モニタのモデル名を選びます。写真ではATEM Mini Proをつないでいますがメーカー名のBlackmagic Designを略した「BMD HDMI」という名前で認識されていました。

OBSのプレビューを右クリック

これで、OBSが出力用にレンダリングしている映像がセカンダリモニターに文字通り全画面表示されます。プライマリモニター上でOBSのサイズをかえたりしても影響を受けません。またスタジオモード(シーン変更などをプレビューしてから反映させる2画面モード)を使っても常に出力画面側が送られます。

後は録画機器側で録画するだけです。応用としては、外部接続を配信用のエンコーダー機器にするとか、HDMI-UVCキャプチャアダプタで別PCに取り込むとかも可能でしょう。

これでOBSが稼働するPC側では録画(配信)を行わなくてよくなるので、その分負荷を下げられるわけです。HDMIケーブル1本で接続できるので比較的距離をおいた場所に配置できる点も良いです。

試してないですが、キャンバスや出力解像度を4Kとかにして、Elgato 4K60S+のようなハードウェア4Kキャプチャ機器をつなげば、フルHD x4みたいなマルチカメラ映像も縮小無しで高解像度に安定して4Kキャプチャできちゃうのじゃないかなと。

参考になれば幸いです。

NDIを使ってTeamsインタビューの録画レイアウトをカスタマイズする

Pocket

TeamsやZoomを使ってリモートUTやリモートインタビューを実施することも増えているご時世かと思います。こうしたオンライン会議ツールはボタンひとつで録画が行われるのも便利な部分ですが、UTに使うににはやや難点あります。それは複数の画面ストリーム(UTだと、参加者カメラ、モデレーターカメラ、画面共有など)を1つの録画映像としてレイアウトする時の自由度の低さです。UTでは画面共有がメインで大きくみたいことがほとんどだと思いますが、そこの制御が自動まかせで意図通りにいかないことがあります。3ストリームが単純2×2の四分割とかになると、無駄に顔が大きく映っていて、共有画面が小さく文字が読めない、しかも1/4は真っ黒で無駄、みたいな。Zoomだといくつかのパターンから選べるみたいですが、これもやっぱり制約は残ります。画面の右上が重要だから話者は左下に置きたい、とか。こうしたレイアウトはサーバー側で組まれた状態で配信されるので、クライアント側ではどうしようもないと思っていました。

しかし、TeamsでNDI出力という機能を使うと、参加者毎、画面共有、アクティブスピーカー(自動切り替え)といったストリームを個別に取り出せ、しかもOBS Studioのプラグインを使えば独立のソースとして扱えるということがわかりました。OBS上で独立ソースとして受けられるのであれば、レイアウトは好きに組み放題で、それを録画したり別のサービスに配信したりも可能です。またこれらの映像/音声はネットワークを経由した伝送になるので、TeamsクライアントとなるPCとOBS Studioで録画/配信を行うPCを分けることができ負荷分散させることもできます。

ということで早速テストしてみました。

Teamsの映像/音声を外部送信するのはプライバシー的な問題もあって許可設定が多段になっていているので順を追って説明します。

■Teams管理者画面でNDI出力を許可する

はい、いきなりこれが一番大きな壁です。大元のところでNDIを許可する必要があります。私は個人契約なのでホイっとONにするだけですが、企業アカウントとかだと管理者に事情を説明してONにしてもらうのが大変かも知れません。頑張ってください。全員まとめてON/OFFではなく会議ポリシーというのを複数作成してわけることができるので、きちんと設定すればリスクは最低限にできるはずです。

参考までに「Teams管理センター」(Web)の画面を貼っておきます「会議ポリシー」を開くと、作成済みのポリシーセット一覧画面になるので、許可したいポリシーセットを選びます。私は個人なので「グローバル(組織全体の規定値)」を選んで丸ごと許可してしまいました。「NDIストリーミングを許可する」を「オン」にします。以下の第二、第三の壁があるので、意図せず会議が盗聴されるようなリスクはほぼないんじゃないかなと思います。

Web管理画面

■Teamsクライアントアプリ上で有効化する

次がTeamsアプリ上での許可です(ブラウザやモバイルアプリではできません)。「アプリのアクセス許可」を開くと「ネットワークデバイスインターフェイス(NDI)」という項目があるので有効化します。

PC用Teamsアプリの設定

これはトラップがあって、「Teamsアプリを起動する度にオフに戻る」仕様となっています。うっかり有効化したままにならないようにとの配慮なんでしょうが、忘れがちなので↓の操作ができなかったらここを再確認してみてください。

■会議ごとの開始操作

最後に会議中の開始操作が必要です。三点メニューから「NDIで送信」を選びます(止める時も同じところから)。

会議中に個別に開始操作

ここまでしてようやくネットワーク上にNDIフォーマットでのポートが開くことになります。

■OBS Studioで受信する

NDIはNewTek社が策定した規格なので、準拠している製品からなら送信や受信ができます。ここでは無料ツールのOBS StudioをTeamsと同一PC上で起動してテストします。

OBS Studioの基本操作はこちらの記事などを参考にしてください。

OBS Studio単体ではまだNDIに対応しておらず、別途こちらのプラグインをインストールします。Releaseページからお使いのOSにあわせたインストーラーをダウンロードしインストールします(Windows版は再起動が必要でした)。

インストール後にOBSを起動すると、ソース一覧に「NDI Source」が出現するはずです。こちらを追加してやるとプロパティ画面が開き、「Source name」プルダウンメニューにTeams会議上の参加者別のストリームが現れます。

NDI Sourceからストリーム一覧が選べる

この例だと「ローカル」が同一PC上のカメラ画像、「古田一義」がスマホから参加したカメラ画像、「共有画面」はその名の通り共有画面で、「アクティブなスピーカー」は今しゃべっている人のカメラ画像に自動で切り替わるストリームだと思います。

必要な数宇だけ「NDI Stream」ソースを追加し、ここでそれぞれのストリームを選んでやるだけです。

ちなみにTeamsはネットワーク速度にあわせて解像度を変化させていまうので、それに追随させずに大きさを固定にする方法はこちらの記事が参考になります(「余談」のすぐ上の辺り)。

「アクティブなスピーカー」をソースにする場合も設定しておくのが良いかも知れません(スマホ参加者だと縦長になったり)。

■まとめ

今まで名前くらいしか知らなかったNDIという規格ですが、色々と使い道がありそうです。Teamsから個別のストリームが取り出せるならば、インタビューをTeamsで実施しつつ、OBSで特定の画面だけ取り出したり自在にレイアウトをした映像を見学者向けにZoomで配信したりとかもできます。

またスマホのカメラ映像をNDI出力するアプリを使えば、OBSのソースに直接取りこめるので、なんらかのツールでいちどPCの画面に映したものをOBSでウインドウキャプチャする、みたいなことをしなくて済むようになり、画面の使用効率を良くなるしおそらく負荷的にも軽くなるんじゃないかと期待されます。そうしたアプリとしてはNDI HX CameraがiOS、Androidともにあります。

iOS版がちと良いお値段しますが、憶えておいて機会ができたら試してみようと思います。

他にもHDMI入力をNDI出力したり、その逆をするハードウェア製品も存在するようで、思索が広がります。

ちなみにATEM Miniシリーズで有名なBlackmagic Design社からも似たようなネットワーク映像/音声ストリーム->HDMI変換装置Streaming Bridgeが出ていますが、NDIとは互換性がないようです。どちらかといえばRTMP勢で、ATEM MiniやOBSからの配信を受けてHDMIでモニターに映すなどするものと思っておけばよさそう。NDIはローカルネットワークでのやりとりに使うものですが、RTMPならインターネット経由でも使えるので、用途で使い分ける感じですね。こちらも機会があれば試してみたいものです。

 

ノートPCでOBS Studioの負荷テスト(3カメラ、USBマイク、Teams送信)

Pocket

近く機材持ち込みUTで3カメラの映像をミックスしてTeamsに中継することになりそうなので、手持ち機材で追いつくかどうか検証してみました。

■機材説明

PC

2018年購入のDELL XPS 15 2-in-1(9575)で、第8世代のCore i7/定格3.1GHz、4コア8スレッドのCPUに、AMD Radeon Vega Mをオンチップで抱き合わせた8705Gという異色のモデル。メモリが16GB、SSDが1TBという感じ。

ゲーミングPCとまでは行かないまでも、独立GPU(dGPU)がついています。ただしOBS StudioはどちらかといえばNvidia (GeForce)贔屓で、最近ではNvidia Broadcast(音声ノイズ除去)相当のライブラリも搭載するなどして、「ノートでOBS Studio配信するならGeForce RTX搭載モデルだよね」という風潮があります。エンコード処理はCPU単体で回すかdGPUのハードウェア支援を受けられるかでかなり負荷が違うので、どうだろうなーと思っていました。

映像ソース

クライアントが所持するカメラを使用。UVC互換のフルHD Webカメラを3アングル。のでHDMIキャプチャなどは必要なし。そのままOBSの「映像キャプチャ」デバイスとして認識させられるはず。

今回のテストでは同型、同性能のWebカメラが3台手元になかったので、少し古い製品も含めての計測になりました。

  • 4K/60pのLogicool BrioをフルHD/30p設定
  • 同じくLogicoolのかなり古いWebカメラを864×480/15fps
  • XPS内蔵カメラを1280×720/30p

という設定。1920×1080/30pよりやや軽いコンディションになるので、代わりにというかタスクマネージャーのCPUグラフを「ウインドウキャプチャ」で取り込んで配置してみました。

(2021.6.15追記:フルHDx3ソースのテストも結果のところに追記しました)

BRIOはなぜかUSBハブ経由では映らず本体Type-Cポートに直結する必要がありました。ここらへん、当日のカメラでどうなるかわからないのでハブやA->C変換アダプタはいくつか予備をもっていこうと思います。

2021.6.15追記:BrioのハブはXPS9575の左側のThuderbolt3対応ポートにしたらハブ経由でも映像がとれました。

音声ソース

本番でも使う予定のRODE Wireless Go IIをUSB接続。送信機を2台起動しステレオの単一トラックとして入力。

またいつも使用しているNVidia Broadcastのノイズキャンセルが使えないので、代わりにKrispをインストールして試してみました。

設定周り

OBS Studioでのエンコード出力レートは2.5Mbps。また仮想ビデオ機能をオンにして、Teamsのカメラソースに選択し無人のオンライン会議に流した状態で計測を行いました。本番でも自分以外はすべて見学者でカメラ、マイクをオフにする想定なので、おそらくTe

■OBSでハードウェア支援は受けられる?

CPUダイにRadeon Vega Mが統合されているので、obs-media-encoderをインストールすればOBS Studioでハードウェア支援を受けられるかと思いきやメニューの現れず。

ただしIntel側の支援機能である「QuickSync H.264」が出ていたのでそれを使うことに。

■測定結果

結論からいうと「どうにかいけそう」という感じ。OBS上の読みで10%前後、タスクマネージャーによるシステム全体の負荷が50%前後で推移して30分くらいは正常に録画できました。録画したままKrispをインストールしたらOBSが落ちたのでそれはまぁそのせいだと思って一旦計測は終了。本来は90分程度のセッションになるので本番前に一度は回しておきたいところ。

そしてKrisp(CPU演算を使うノイズキャンセラー)を有効にしたところ、システム負荷が+10%といったところです。つまり60%台。一応余裕はあります。

ゲームをしながらOBSで録画/配信をするとなると厳しいですが、そういうメインタスクなしで純粋にエンコードするだけならなんとか賄えそうかなという感想です。各ソースが1080p/30pになったりするとどう変わってくるかですが、一応次のテストではこの構成でいってみようと思います。

あるいはそれまでにAMDのハードウェア支援も試してみたいところ。

追記:結局OBSでAMDのハードウェア支援(VCE)を有効にできてはいませんが、代わりにXSplit Broadcasterを使って同じフルHDx3ストリームで録画しながら仮想カメラ機能でTeams配信を行ってみたところ、システム全体のCPU使用率は50~60%の微増。かつ同時にブラウザを起動すると100%になりがちとなりました。警告ダイアログも出ました。OBS使用中でも同じ様に跳ね上がるものの80~90%台に収まる感じ。XSplitでは明示的にCPU/Intel QuickSyncVideo/AMD VCEの使い分けを指定できるので、QSVに固定してみても傾向はかわらず。XSplit自体の重さなんでしょうか。エフェクトなどは充実していてちょっと使ってみたいとも思ったんですが、今回の案件ではちょっと厳しいかな。余裕のあるリモート調査(デスクトップPCが使える時)などに試してみようと思います。

フルHD x3入力で追試

Brio、ATEM Mini Pro、AverMedia BU110を組み合わせて本番に近いフルHDの3入力体勢を組んで追試しました。結果は大差なし。むしろ下がったくらいで40%前後(タスクマネージャー読み)で録画&Teams配信できました。またソースをON/OFFしたり、入力解像度をフルHDと720pで切り替えたりしてもさほど変わらなかったことから、「入力ソース解像度に寄らず、レンダリング後の出力映像のエンコード負荷が大半を占める」ということが言えそうです。もちろんソースをOFFにする毎に僅かずつCPU負荷は下がっていくんですが、全部OFFにしてタスクマネージャーの画面キャプチャのみにしても30%台のままで、1ソース辺りの負荷は2,3%の誤差という感触でした。

OBS Studioでの録画(H.264変換)と、仮想カメラ機能を経由してTeamsがエンコードしてるのと同じ映像を2ストリームで変換してる気がしますが、どちらもハードウェアエンコードが効いているんでしょうかね。

■もしダメだったら…

近日中に予定されている接続テストで本番通りのセットアップをして検証する予定ですが、もし負荷が厳しそうとなったら、この辺りのeGPU箱を買って、自宅メイン機のRTX3070を一時的に付け替えてみようかと思っています。幸いXPS 9575はThunderbolt3に対応しています。これならばRTX Broadcastも使えた上でかなり余裕ができるんじゃないかと。

内蔵Radeonがある状態できちんと動いてくれればいいんですが、、、

もう少し安い3万円台のものもあるし、Chromaの光る要素とかは別にいらないですがw、USB3.1のAポートが4つと、Ethernetポートがついているので、ごちゃつきがちな出張荷物、配線を多少でもスッキリさせられるならこれでいっかなと思っています。

あるいはDSP内蔵オーディオインターフェイスのUA AppoloシリーズにC Suice C-Vox Noise & Ambience Reductionというノイキャンプラグインが出ていて気になっています。

これはプラグインソフトウェアをDSPで動かしPC側に負荷をかけないで音声フィルターをかけられる製品らしいのです。ただプラグインだけでも$300以上するし、ハードもDSPコア数が1つのもっとも安いものでも数万円。あわせると結構なお値段だし、そもそもこのプラグインが1DSPモデルでちゃんと動くかどうかもよくわからず手を出しあぐねています。自宅で使う分にはRTX3070 + NVidia Broadcastで特に不満がないので悩ましいです。

むしろ今後少しずつ会場実査が戻ってくるならばノート向けRTXグラフィックが載ったPCに買い換えるのが一番いいかなと思いいます。ちょうどRazerのBlade 14の新モデルが海外で発表され、中モデルが$2,200なら日本はいくらよ、、とドキドキしています。

■画面共有かカメラ映像か?

OBS Studioに「仮想カメラ」機能があるため、ついTeamsやZoomでは参加者カメラの映像として送信しがちですが、本当にそれがベストかはケースバイケースだと思います。まずZoomは基本的にカメラ映像が720pになる模様。法人ライセンスの場合は申請すれば1080p封印が解かれるらしいですが、それが難し場合は画面共有を使ってOBS Studioの画面なしろキャプチャした方が綺麗な可能性もあります。

Teamsの場合はネットワーク速度に応じて自動調整されてしまいますが、一応1080pが最初から使えるようです。

■Krisp所感

ついでにはじめて使ってみたKrispの感想をNvidia Broadcast(以下NB)と比べて。ぶっちゃけNBの方が品質は高いです。ノイズキャンセル力は甲乙つけがたいですが、フィルターをすり抜けた人の声がNBの方が自然で違和感がない。Krispのはよく聞くと人の声の中にノイズのようなクリップのようなザリザリ感があります。会場でどうにも外来ノイズが酷いようなら検討しますが、いまのところお金を払ってまで使いたいクオリティじゃないなというのが正直な感想です。

■まとめ

eGPUボックス買ったり、自宅デスクトップからRTX3070を付け外ししたりはしんどいなと思ってましたが、今回はCPUが100%に貼り付くみたいなギリギリ感はなくなんとか乗り切れそうな気がして一安心です。でもまぁファンはずっとシューシュー言い続ける状態だし、より静かに安定して実査録画ができるならeGPUボックス導入してしまうのもアリかなぁと思わなくもないです。ただIntel、AMD、NVidiaのグラボが混在してしまう状態になって、まともにOBS Studioが動いてくれるかって面も不安でいまいち思い切れないというところ。

大量の写真を(スクショ)を1枚1スライドでPowerPointに貼る

Pocket

ユーザビリティ調査の報告書を作るとき、画面毎の考察をするセクションで大量のスクショを1枚1枚パワポに貼っていくことがあります。今回それが特に手間に感じる量だったので、なんかバッチ処理する方法がないか調べてみたところ、普通にPowerPointの機能がありました。

「挿入」→「フォトアルバム」がそれです。選択するとこんなダイアログが表示されます。

操作手順はこんな感じ。

  1. 「ファイル/ディスク(F)…」ボタンで取り込みたい写真を一括選択する。
  2. 「写真のレイアウト(P)」を「1枚の写真(タイトル付き)」にする。
  3. 「枠の形(M)」は「四角形、背景の影付き」がオススメ
  4. 「作成(C)」をクリック

「Boom!」(死語)

「挿入」のくせに新しいスライドファイルが作成されるのはご愛敬。また黒背景がデフォルトになっているので、「デザイン」タブで白地のものに切り替えます。

2.で「タイトル付き」を選ばないとスライド全面に写真が貼り付けられるのでリサイズが手間になります。3.で影付きを指定するのは、白背景のスクショだと背景との境界線がわからなくなるからですがそこは好き好きで。

あらかじめドキュメントテンプレートがある場合は「テーマ(T)」で選んでおいても良いでしょう。

[オマケ] スクショを連続撮影する時のおすすめツール

画面の特定部分をスクショするのはWindows10標準の「切り取り&スケッチ」でも可能ですが、ブラウザ内に表示されたプロトタイプの外枠にあわせて毎回矩形指定したり、ファイル名を指定して保存するのは手間です。そんな時は太古から存在するWinShotがオススメ。

ショートカットキーを自由に決めて、同じ矩形範囲をバシャバシャ撮れますし、保存先を決めておけば連番で自動保存できます。古すぎてPNG保存ができない(JPEG、BMPのみのが玉に瑕ですが、使い勝手でこれに勝るものに出会えていません(もしあったら教えてください!)。私はBMPで保存して(これまた古の)IrfanViewあたりでバッチ変換かけます。PhotoShopでももちろんできますがIrfanViewの方が手になじむ。

またカーナビなど実機製品の画面写真を撮りたい時は三脚を立てて画角を固定したカメラでバシャバシャ撮っておき、あとでLightroom Classicで切り抜き、角度補正、露出補正、ホワイトバランス補正などを一括でかけるのがオススメです。リモコンシャッターやリモートアプリが使えるカメラなら、シャッター押す度にちょっとずつカメラがズレるなんてことも防げるので確実です。

 

オンラインインタビュー/プレゼン中のスライド操作を簡便化する

Pocket

ZoomやTeamsなどオンライン会議ツールでプレゼンテーションや資料共有しながら会議をすることが増えてきたと思います。そんな時、PowerPointでスライドを表示しつつ、Zoomでチャットコメントを読み書きしたり、さらに予定表を確認したりWeb検索したりと様々なアプリケーションを併用してデスクトップがわちゃわちゃしがちです。私もオンラインインタビュー等をする場合、資料提示用のパワポ、参加者プロフィールや予定表のExce、インタビューガイドのWord、Zoom/Teamsなどオンライン会議ツールのウインドウ、さらにはカメラ映像をOBS Studioで制御しようなどとすると大変です。

そんな時でも最優先でPowerPointのスライドを制御(ページめくり)したくて方法を模索しました。

ちなみに最新のZoomやTeamsではPowerPointファイルを直接共有ウインドウやバーチャル背景として選択できるようになっており、これを使うとZoom/Teamsのミーティングウインドウ上でスライドめくりボタンで移動することができかなり使い勝手が良いです。ただPowerPoint固有の機能(ペン記入とか)が制限されたり、そもそもPowerPoint以外のツールを使いたいこともあるので、今回はややマニアックな方法で実現することにしました。

完成イメージとしては、「そのアプリがフォアグラウンドにいても(=PowerPointがバックグラウンドにいても)、Ctrl + PageUp/Downを押すとPowerPointがフォアグラウンドに来た上でページが移動する」というスタイル。PageUp/Downはカーソルキーやスペースキー操作の陰に隠れて忘れられがちですが、こちらもPowerPointの標準のスライドめくりショートカットです。これにCtrlを追加することで、グローバルなキーボードショートカットにする、というワケです。普段からPageUp/Downなんて使わないよって人なら、Ctrlなしをトリガーにしてもいいでしょう。

実現方法としてはAutoHotKeyという多機能キーボードショートカットカスタマイズツールを使います。
AutoHotKeyの使い方をイチから説明すると大変なボリュームになるので、とりあえずコード例だけ。AutoHotKeyをインストール後、これをメモ帳などにコピペし、「いつでもパワポ.ahk」みたいな名前で保存(拡張子のahkはAutoHotKeyの頭文字です)し、ダブルクリックすればAutoHotKeyが起動してこの設定が読み込まれます。タスクトレイにグリーンの「H」アイコンがいれば常駐している証です。

「^PgDn::」が起動キーの定義で「^」がCtrlキーです。Altなら「!」、Shiftなら「+」に変更します。Altキーを押しながら右カーソルなら「!Right::」でいけると思います。
ミソは「if WinExist(“ahk_exe POWERPNT.EXE”)」のところで、起動中のアプリにパワポがあったらという条件設定を意味します。「WinActivate」でアクティブ化(フォアグラウンド化)し、「Send {PgUp}」で文字通りキーコードを送信しているという寸法です。

個人的にはパワポウインドウはOBSなどで見えていれば良い場合もあるので、バックグラウンドのままとか最小化したまま、仮想デスクトップの別画面に追い出した状態のまま、とかもチャレンジしたんですが上手くいきませんでした。ControlSendコマンド辺りを使ってどうにか、と思ったんですが成功しませんでした。なんか方法をご存じの方がいたら是非お知らせください。

またこの例ではあまり使っていないキーコンビネーションをトリガーに使いましたが、先日裏ブログで紹介したマクロパッドなどに割り付けて1キーで制御するのもアリかなと思います。

この手のことはElgatoのStream Deckがメジャーですが、AutoHotKeyを駆使すれば「特定のアプリに対して送信」「特定のアプリがフォアグラウンドにいる時だけ送信」などの制御も可能なため、安価に近いことが実現できると思います。

キートップが液晶で動的に変化はしませんが、既製品ではこういう小型キーボードも使えると思います。

AutoHotKeyは究めればかなり複雑な制御ができるので是非研究してみてください。

OSを問わずブラウザで使える「動画眼Lite」をリリースしました

Pocket

前記事のチラ見せからそう間を置かずリリースしていたのに、ブログでお知らせするのを忘れていました。

ひと言でいうと、インストール不要でWindows以外でも使える動画眼のビューワーを作ったよ、というお話です。JavaScriptベースの専用データ形式ファイルを用意する必要がありますが、同時にリリースした動画眼2.4で出力できるようにしてあります。なので、インデックスデータを作る人だけはWindows版動画眼をインストールして使う必要がありますが、閲覧オンリーであれば動画ファイル、htmlファイル、JSファイルの3点セットがあればWebブラウザを使ってインデックス付き動画を再生、頭出しすることができます。Macはもちろん、Webサーバーに置けばタブレットOS(iPadOS、Android、ChromeOS)でも利用可能です(スマホは画面レイアウト的に未対応です)。

動画眼Liteの詳細はこちら。GitHubリポジトリはこちら。ただしわざわざダウンロードしなくても、動画眼2.4からJSファイルをエクスポートする時にHTMLファイルも自動的に最新版を落として適切にリネーム保存してくれるようになっています。

動画眼Liteの動作デモはこちら。ガチのUT動画素材で公開可能なものがないので、個人でYoutubeにアップしたレビュー動画です。またテキストはPremiere Proのβ版機能の「音声のテキスト化」を使って書き起こしたものです。この機能で書き起こしたデータを動画眼にインポートする機能を2.3で実装しています。

組み合わせてご活用いただくとかなり簡単/安価にテキスト書き起こしUT動画見返し環境が構築できると思います。

 

UT/インタビュー動画見返しツール「動画眼」の簡易ビューワーをチョイ見せ

Pocket

謹製の動画再生ツール「動画眼2」は動画再生中のメモをタイムインデックスとセットで記録し、メモをクリックすることで簡単に当該シーンを頭出しして再生できるツールです。

最近、手軽に利用できるようになってきた各種クラウド音声書き起こしサービスを使ってUT/インタビューの全発話を文字起こしすることで、全文検索などの新しい利用方法が見えてきており、先日も動画編集ソフトのAdobe Premiere Proが先行公開機能として「音声テキスト化」をリリースして、早速その結果を取りこめるバージョンアップをいたしました。

こうして利用シーンが広がってくると、足枷になるのが

  • 専用ツールのインストールが必要になること
  • Windows専用であること

といった部分になってきます。動画眼2はフリーで提供しているため、年額数万円かかる電子署名を取得するに至っておらず、Windows8/10ですとダウンドーロ/インストール時にSmartScreenによる警告が出る状態です。法人ですとPCへのソフトインストールは許可制だったりして、私自身も実務でクライアントに薦めづらい状況があります。Mac版も作りたいと思いつつなかなか着手できていません。

そんな状況を改善するため、HTML5/JavaScriptを使った簡易ビューワー「動画眼Lite」を作ってみました。特徴として、

  • 動画ファイル、発話データファイルに加えHTMLファイルを同一フォルダにおくだけ
  • Webサーバーに配置せず、PCのローカルストレージ上に置いた状態からでもOK
  • 互換ブラウザさえ入っていれば追加インストール無しで使用可能(現状ChromeとChromeium Edgeで優先検証。FireFoxとSafariも一応動くが一部表示が崩れる。Web経由ならiPadのSafariでも動きました)

となっています。これなら動画と一緒にHTMLファイルと書き起こしデータファイル(せいぜい数KB)を渡せば相手にも簡単に使ってもらえるのではないかと。

実際にこちらで動いている状態をご確認いただけます。UTの動画は使えないのでプライベートで録ったレビュー動画ですが、、また書き起こしはPremiere Proによる処理ママですので一部不正確な部分もありますが、逆にPremiereに放り込むだけでこれくらいの品質の書き起こし&閲覧環境ができますよというサンプルとして。

アプリ版「動画眼2」と比べての制約としては、

  • テキストの編集はできない
  • 検索もできない(ブラウザの検索機能は利用可能)
  • 話者毎の色付け非対応

となります。編集はJavaScriptのセキュリティモデル(ブラウザでローカルファイルを上書きできると危ないから禁止されている)の関係上、実装は難しそうです。検索と色付けは正式リリースまでにはなんとかしたいと思っています。検索と色付けは対応しました。

またデータファイル形式も動画眼2の.dggn.txtを直接読み込むことは難しいので、動画眼2側で動画眼Lite形式のファイルを吐き出す機能を追加する予定です。

■技術的詳細

以下、JavaScriptの制限など技術的なメモ、課題を書き記しておきます。どなたかお詳しい方に「こんなやり方あるよ」などアドバイスをいただければ有り難いです。

・ファイルを減らす

動画に同梱するファイルをなるべく減らすという意図で、CSSなども久しぶりにHTMLのヘッダー内に置く書き方をしました。またjQueryなどの外部ライブラリも基本使わないでPure JavaScriptで書いています(単に私がjQueryあまり得意でないというのもあるけど…)。

再生制御系のアイコン(▶/II)くらいはもう少し綺麗に描画したいんですが、font-awesomeみたいな外部記号フォントやビットマップを使うとファイルが増えるので躊躇しています。インターネット上のリソースにリンクするのも手だと思いますが、どうせここまでやったなら完全スタンドアローンにこだわってみたいなとか。フォントとかビットマップのようなバイナリをbase64でHTMLに埋め込む方法もあるんでしたっけ?でももし下記のようにメモデータもHTMLに埋め込む場合、あんまりHTMLの可読性が落ちるのもなんだなという気がしますね。

・データファイルの読ませ方

HTMLファイル上のJavaScriptに外部ファイルを自動で読ませるには、外部.jsファイルしかなさそうで、現状はタイムコードとメモのレコードをjson形式にしてあります。HTML側にフォームをもたせて、INPUTタグでユーザがファイルを選択すれば任意のデータファイルを食わせられるんですが、ユーザビリティとしてHTMLファイルを開いたら動画もメモ一覧もパっと出る方が楽だし間違いなくていいかなと思って、自動で読めることを重視しています。

.jsファイル内でオブジェクトを宣言するのであればjsonにこだわらず、オリジナルの.dggn.txtに近いカンマ区切り形式でもいいはずと思ったんですが、なんとなくJavaScriptならjsonだよね、みたいな感覚があったのと、手編集時にもミスが起きにくいかなくらい(そうでもないかな?)。

もっといえば、HTMLファイル内にデータまでもたせてしまえば、動画とHTMLファイルの2つだけで完結できるのでそれはそれでアリかも知れないとか思っています。どのみち動画ファイルのファイル名はハードコーディングするしかないなと思ってますし。1つのフォルダに複数セッションの動画をつっこんで渡すような場面で、ファイルが1つでも減るのは良いかも知れません。

あるいはJavaScriptで同一フォルダ内のファイル一覧が取得できればプルダウンで複数動画選択とかもできそうとか。でもこれもセキュリティ上の制約でできない気がします。