Clever Geek Handbook

5分でiOSビデオプレーヤーとレコーダーを作成する

こんにちはHabraの人々



猫の下で、iOS用のストリーミングビデオを使用してアプリケーションを作成する方法について、手順を追って説明します。 Xcode、クライアントAPIを備えたSDK、ストレートアーム（原則としてオプション）、およびコーヒーが必要です。







今日は、BaaS バックエンドレスプラットフォームを迅速かつ簡単に使用して、サーバーにビデオを記録し、その後再生できるiOSアプリケーションを作成する方法を示します。



（プラットフォーム上のすべてのAPIのロシア語レビューの最初の投稿を見逃した方は、 こちらで見つけることができます。）



メディアサービスの説明
Media Services API （メディアストリーム）-「オンデマンド再生」とライブストリーミングビデオおよびオーディオを提供するサービスのセット。 アプリケーションは、録画またはライブ放送用に、ビデオカメラとマイクからのストリームを公開できます。 記録されたメディア（ビデオまたはオーディオ）とライブストリームは、他のクライアントで再生できます。



説明：メディアサービスを使用すると、クライアントアプリケーションからサーバーにビデオまたはオーディオをストリーミングし、このストリームを他のデバイスで再生できます。 サービスファイルを使用してダウンロードしたメディアコンテンツを再生することもできます。



アプリケーションの例：ビデオ会議、ビデオチャット、すべてのデバイス（電話、タブレット、PCカメラ）からの同時またはすべてのデバイスへのライブビデオブロードキャスト、サーバーへのビデオまたはオーディオの直接録音、ライブオーディオブロードキャスト（ラジオ、音楽）



IPAメディアサービスの追加情報とアルゴリズムはドキュメントで見つけることができます 。



したがって、開始するには、「Xcode」を実行します



[ファイル]-> [新規]-> [プロジェクト]

-> [シングルビューアプリケーション]を選択し、[次へ]ボタンをクリックします

-> ave。 "SimpleVideoService"で、アプリケーションの名前を入力します。

->デバイスとして「iPhone」を選択し、「次へ」をクリックします

->プロジェクトを保存する場所を選択します



これで、1つのビューを持つプロジェクトができました。

バックエンドレスプラットフォームに接続するアプリケーションには、IDと秘密キーを割り当てる必要があります。 これはAppDelegate.mで行われます。 



1 #import "AppDelegate.h" 2 #import "Backendless.h" 3 4 // ***         *** 5 6 static NSString *APP_ID = @""; 7 static NSString *SECRET_KEY = @""; 8 static NSString *VERSION_NUM = @"v1"; 9 10 @implementation AppDelegate 11 12 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 13 { 14 [backendless initApp:APP_ID secret:SECRET_KEY version:VERSION_NUM]; 15 return YES; 16 } 17 18 .....


APP_IDおよびSECRET_KEYの値は、開発者のWebコンソールから取得する必要があります。 コンソールにログインし 、「作成/選択」（新しいアプリケーションを選択または作成）して、「管理」アイコンをクリックします。 デフォルトのサブキーはアプリ設定です：







「コピー」ボタンを使用して、iOSアプリケーションのIDと秘密鍵の値をコードにコピーします。 コピーした値をそれぞれ「APP_ID」と「SECRET_KEY」に割り当てます。



Viewコンポーネントをメインウィンドウにドラッグアンドドロップします







便宜上、ワークスペースの背景色を変更します。







ビデオストリームを制御するボタンを追加する







iOS用のSDK http://backendless.com/downloadsをダウンロードし、ライブラリを解凍してプロジェクトファイルにドラッグします。







また、次の標準ライブラリも必要です。







ViewController.mを開き、バックエンドレスをインポートして、以下に示すように定数を定義します。 



 1 #import "Backendless.h" 2 3 #define VIDEO_TUBE @"videoTube" 4 #define STREAM_NAME @"defaultStreamName"


次の変数を割り当てます。 



 1 @interface ViewController () 2 { 3 MediaPublisher *_publisher; 4 MediaPlayer *_player; 5 }


ViewController.hを開き、* previewプロパティを宣言して、カメラから画像を取得し、* playbackViewで記録されたビデオを再生します。 



 1 @property (strong, nonatomic) IBOutlet UIView *preview; 2 @property (strong, nonatomic) IBOutlet UIImageView *playbackView;


* previewプロパティは「View」に関連付けられている必要があります。 これを行うには、「ビュー」コンポーネントを選択し、「新しい参照アウトレット」を「プレビュー」にドラッグアンドドロップします。







この「ビュー」はカメラに使用されます。 ビデオを再生するには「ビュー」も必要です。 「画像ビュー」を追加し、それを* playbackViewに関連付けます。



次に、ボタンコントロールハンドラーを作成し、ViewController.hに署名を追加する必要があります。 



 1 -(IBAction)onStopBtn:(id)sender; 2 -(IBAction)onPlayBtn:(id)sender; 3 -(IBAction)onRecordBtn:(id)sender;


メソッドの実装をViewController.mに追加します。



ビデオ録画 



 1 - (void)onRecordBtn:(id)sender 2 { 3 MediaPublishOptions *options = [MediaPublishOptions recordStream:self.preview]; 4 _publisher =[backendless.mediaService publishStream: STREAM_NAME tube:VIDEO_TUBE options:options responder:self]; 5 }


3行目で、MediaPublishOptionsインスタンスを作成し、記録されたビデオを表示するUIコンポーネントをバインドします。



4行目で、パブリッシャーを作成します。 パブリッシャーコンストラクターは、ストリーム名、チャンネル名、オプション、およびレスポンダーを受け入れます。 ユーザーが録画を停止すると、ビデオを確認または現在公開（ブロードキャスト）してから、ストリームから切断し、パブリッシャーとプレーヤーにnilを割り当てます。 



 1 -(void)onStopBtn:(id)sender 2 { 3 if (_publisher) 4 { 5 [_publisher disconnect]; 6 _publisher = nil; 7 } 8 9 if (_player) 10 { 11 [_player disconnect]; 12 _player = nil; 13 } 14 }


録画したビデオを再生する 



 1 - (void)onPlayBtn:(id)sender 2 { 3 MediaPlaybackOptions *options = [MediaPlaybackOptions recordStream:self.playbackView]; 4 _player = [backendless.mediaService playbackStream:STREAM_NAME tube:VIDEO_TUBE: options:options responder:self]; 5}


3行目では、MediaPlaybackOptionsインスタンスを作成し、記録されたビデオを表示するUIコンポーネントに渡します。



4行目では、メディアプレーヤーを作成します。 コンストラクターは、ストリーム名、チャンネル名、オプション、およびレスポンダーを受け入れます。 レスポンダーは自分自身を指すため、ViewControllerクラスはIMediaStreamerDelegateを実装する必要があります。



IMediaStreamerDelegateを実装しているため、次のコードを追加して、ストリームの変更に対応する必要があります。 



 1 -(void) streamConnectFailed:(id)sender code:(int)code description:(NSString *)description 2 { 3 NSLog(@"<IMediaStreamerDelegate> streamConnectFailed: %d = %@", (int)code, description); 4 [self onStopBtn:sender]; 5 6 NSString *message = (code == -1) ? 7 @"Unable to connect to the server. Make sure the hostname/IP address and port number are valid\n" : 8 [NSString stringWithFormat:@"connectFailedEvent: %@ \n", description]; 9 UIAlertView *av = [[UIAlertView alloc] initWithTitle:@"Error:" message:message delegate:nil cancelButtonTitle:@"Ok" otherButtonTitles:nil]; 10 [av show]; 11 } 12 13 -(void) streamStateChanged:(id)sender state:(StateMediaStream)state description:(NSString *)description 14 { 15 switch (state) { 16 17 case MEDIASTREAM_DISCONNECTED: { 18 19 [self onStopBtn:sender]; 20 break; 21 } 22 23 case MEDIASTREAM_PAUSED: { 24 25 [self onStopBtn:sender]; 26 break; 27 } 28 29 case MEDIASTREAM_PLAYING: { 30 31 // PUBLISHER 32 if (_publisher) { 33 34 if (![description isEqualToString:@"NetStream.Publish.Start"]) { 35 [self onStopBtn:sender]; 36 break; 37 } 38 } 39 40 // PLAYER 41 if (_player) { 42 43 if (![description isEqualToString:@"NetStream.Play.Start"]) { 44 UIAlertView *av = [[UIAlertView alloc] initWithTitle:@"Error:" message:[NSString stringWithString:description] delegate:nil cancelButtonTitle:@"Ok" otherButtonTitles:nil]; 45 [av show]; 46 break; 47 } 48 49 self.playbackView.hidden = NO; 50 } 51 break; 52 } 53 54 default: 55 break; 56 } 57 }


ほとんどすべての準備が整いましたが、ボタンをハンドラーに関連付けることは残っています。







残りのボタンについても同じことを繰り返します。



それだけです:)。 コーヒーが完成し、プレーヤーは働いています。 プロジェクトコードはこちらからダウンロードできます 。


More articles:


All Articles