読者です 読者をやめる 読者になる 読者になる

アールテクニカ地下ガレージ

アールテクニカ株式会社の製品開発・研究開発・日々の活動です

iOSの映像の外部出力(1) - 実装と環境

外部出力 COLORCODE VJ iOS

Author

ハダ

本ブログで記事を書くことになりました、羽田と申します。
弊社のiOSアプリ「COLORCODE VJ」(以下CCVJ)のプログラムを担当しており、アプリ製作過程で培った経験を元にしたシリーズ連載です。

iOSの映像の外部出力」シリーズとして、iPadからHDMIなどを経由した外部出力に関する内容を以下の3回に渡ってお送りします。

  1. Appleサンプルから見る基本的な仕組み
  2. 外部出力の環境情報
  3. CCVJ開発における外部出力の問題



1.Appleサンプルから見る基本的な仕組み

それでは、まずはAppleサンプルから見る基本的な仕組み」について進めたいと思います。

1-1.外部出力の仕方について

iPhone/iPadなどのiOS端末では、TV/モニター/プロジェクターなどに画像や音声を出力する事ができます。

大きく分けて、AirPlayによる方法とケーブル接続の2種類があります。

AirPlay
AppleTVに対して、同一LAN内の無線で接続します。
無線接続は大変便利ですが、動きのある画面の場合に遅延を感じます。

ケーブル接続
Lightning端子から出力するには専用のアダプタを接続する必要があります。
細かい出力に関する制限や、古い端末の30ピン端子の場合などについては今回は主題ではないので省略します。

Apple Lightning Digital AVアダプタ
Apple Lightning - VGAアダプタ

AVアダプタはHDMIによる接続で映像と音声を1本で出力できますが、VGAアダプタは映像のみの出力なので、音声の出力には別途イヤホンジャックで出力する必要があります。

ミラーリングだけでは足りない外部出力機能

さて、先の方法で繋いだら出力先にiPhone/iPadの画面が表示されているでしょう。

貴方の表示したい画面がアプリの画面全体の場合、単純なミラーリングで欲求は満たされます。
しかし、アルバムから選択した写真だけを表示して選択中の画面は表示したくないなどの、画面の一部だけを表示したい場合にはアプリ側で外部出力をコントロールする必要があります。

1-2.公式サンプル解説

ここからは、ExternalDisplay(公式サンプル)を参考に外部出力の概要を把握していきたいと思います。

注意

プロジェクト名がExternalDisplayの為、ExternalDisplayと付いたクラスやxibがいくつもありますが、実際には外部出力側のViewだけではなく端末側の画面やクラスだったりもします。この辺りが少し見る上で誤解を生みやすいかもしれません。

プロジェクト概要

・ExternalDisplayAppDelegate.m/h
通常のAppDelegateです。
・ExternalDisplayViewController.m/h
端末側のクラスと、外部出力用のビューを管理しています。
外部出力のウィンドウ(extWindow)はPresoModeViewControllerに作成任せています。
・PresoModeViewController.m/h
外部出力のポイントとなる部分はここなので後ほど解説します。
・MainWindow.xib
ExternalDisplayViewControllerを含む端末側のベースとなるxib。
・ExternalDisplayViewController.xib
端末側のビューと、外部出力側に表示するMainView/ExtViewというUIImageViewがあります。MainView/ExtViewは外部出力側で表示切り替えするので、ExtView1とExtView2と付いている方が適切な気がします。
・PresoModeViewController.xib
外部出力の解像度や出力ビューの切り替えのUIです。

外部接続のポイント

接続までの流れは以下のようになっています。

1.外部接続イベント登録
2.接続イベントで解像度選択表示
3.解像度選択で外部ウィンドウ作成
4.外部ウィンドウへビュー設定


1.外部接続イベント登録
外部接続イベントを登録します。

PresoModeViewController.m


2.接続イベントで解像度選択表示
外部接続イベント発生時にスクリーン情報を取得し、解像度選択を表示します。

PresoModeViewController.m


3.選択された解像度で外部ウィンドウ作成
選択されたら外部ウィンドウを新規作成します。
OpenGLを使用する場合は、外部ウィンドウにビューを設定するまでコンテキストを作成できません。

PresoModeViewController.m


4.外部ウィンドウへビュー設定
サンプルでは1と2の画像を切り替えて表示しています。

ExternalDisplayViewController.m


以上の流れで外部出力が構築されます。
サンプルと同じように選択したビューを切り替えて表示すれば、端末側と外部に違う表示をする事は簡単です。
また、切断イベントについても同じように解放処理を実装する必要があります。
CCVJではケーブルの抜き差しやAirPlayの切断など、ふとしたタイミングで解放と再生の復帰が発生して苦労しました。


さて、サンプルの実装について解説したところですが、次回は外部出力の環境に立ち戻り、外部出力アプリの開発とデバッグについて解説したいと思います。
外部出力の為の環境情報>>

COLORCODE VJ

COLORCODE VJ

  • ART Teknika Inc.
  • 写真/ビデオ
  • ¥2,900


Author

ハダ

iOS/Android/Windows/Macなど各プラットフォームを手がけています。
前職は家庭用ゲームのプログラマでしたが、最近はスマホとPCでばかりゲームしています。

スポンサーリンク