6秒動画アプリ Vineの作り方

22,637 views

Published on

iOS_LT #13で発表した資料です。
AVFoundationを使ってVineのようなアプリを作ってみました。

Published in: Technology, Business
1 Comment
27 Likes
Statistics
Notes
No Downloads
Views
Total views
22,637
On SlideShare
0
From Embeds
0
Number of Embeds
1,322
Actions
Shares
0
Downloads
32
Comments
1
Likes
27
Embeds 0
No embeds

No notes for slide

6秒動画アプリ Vineの作り方

  1. 1. How to make Vine like app? 6秒動画アプリ Vineの作り方 iOS_LT #13 / @himara2 2014/05/28(Wed.)
  2. 2. Vine ・Twitter社の動画アプリ ・6秒動画アプリ ・画面を押してる間だけ撮影 ・短い動画が連結される 特徴 ・ループ再生される
  3. 3. Vineっぽい機能を実装してみよう。
  4. 4. Vineっぽい機能 ・6秒動画アプリ ・画面を押してる間だけ撮影 ・撮影した短い動画が連結される ・ループ再生される
  5. 5. Vineっぽい機能 ・6秒動画アプリ ・画面を押してる間だけ撮影 ・撮影した短い動画が連結される ・ループ再生される
  6. 6. AVFoundation framework をつかう。
  7. 7. 撮影編
  8. 8. @tomonish くんが発表してたやつ http://www.slidesharenet.org/ssuser9c7e21/avfoundation
  9. 9. ① ② ③
  10. 10. ①AVCaptureSesison の準備 // セッションの作成 self.session = [[AVCaptureSession alloc] init]; _session.sessionPreset = AVCaptureSessionPresetHigh; @property (nonatomic) AVCaptureSession *session;
  11. 11. ②入力デバイス(カメラ)の準備 // 入力デバイスの設定 AVCaptureDevice *device = [AVCaptureDevice defaultDeviceWithMediaType:AVMediaTypeVideo]; ! AVCaptureDeviceInput *input = [AVCaptureDeviceInput deviceInputWithDevice:device error:nil]; ! [_session addInput:input];
  12. 12. ③出力デバイス(ファイル)の準備 // 出力デバイスの作成 self.output = [[AVCaptureMovieFileOutput alloc] init]; CMTime maxDuration = CMTimeMakeWithSeconds(60, 30); _output.maxRecordedDuration = maxDuration; _output.minFreeDiskSpaceLimit = 1024 * 1024; ! [_session addOutput:_output];
  13. 13. これで準備はOK! // セッションを開始 [_session startRunning]; セッションの開始
  14. 14. NSString *outputPath = [[NSString alloc] initWithFormat:@“%@%@%d.mp4”, NSTemporaryDirectory(), @“output", outputIndex]; NSURL *fileURL = [NSURL fileURLWithPath:outputPath]; ! [_output startRecordingToOutputFileURL:fileURL recordingDelegate:self]; 録画開始のタイミングで… 録画停止のタイミングで… [_output stopRecording];
  15. 15. #pragma mark - AVCaptureFileOutputRecordingDelegate ! // 録画開始 - (void)captureOutput:(AVCaptureFileOutput *)captureOutput didStartRecordingToOutputFileAtURL:(NSURL *)fileURL fromConnections:(NSArray *)connections { NSLog(@"rec start."); } ! ! // 録画停止 - (void)captureOutput:(AVCaptureFileOutput *)captureOutput didFinishRecordingToOutputFileAtURL:(NSURL *)outputFileURL fromConnections:(NSArray *)connections error:(NSError *)error { NSLog(@"rec end."); // 出力ファイルを指定しておく [_outputPathes addObject:outputFileURL]; } Delegate method 保存したファイルパスをArrayで保持しておく
  16. 16. 撮影開始 → 撮影終了 で .mp4 outputPathes (NSArray)
  17. 17. 合成編
  18. 18. ①コンポジションの準備 // コンポジション生成 self.composition = [AVMutableComposition composition]; AVMutableCompositionTrack *compositionVideoTrack = [_composition addMutableTrackWithMediaType:AVMediaTypeVideo preferredTrackID:kCMPersistentTrackID_Invalid];
  19. 19. ②動画の合成 CMTime startTime = kCMTimeZero; for (NSURL *url in _outputPathes) { // 動画アセットの取得 AVAsset *asset = [AVAsset assetWithURL:url]; AVAssetTrack *videoTrack = [[asset tracksWithMediaType:AVMediaTypeVideo] objectAtIndex:0]; [compositionVideoTrack insertTimeRange:CMTimeRangeMake(kCMTimeZero, asset.duration) ofTrack:videoTrack atTime:startTime error:nil]; startTime = CMTimeAdd(startTime, asset.duration); }
  20. 20. ②動画の合成 CMTime startTime = kCMTimeZero; for (NSURL *url in _outputPathes) { // 動画アセットの取得 AVAsset *asset = [AVAsset assetWithURL:url]; AVAssetTrack *videoTrack = [[asset tracksWithMediaType:AVMediaTypeVideo] objectAtIndex:0]; [compositionVideoTrack insertTimeRange:CMTimeRangeMake(kCMTimeZero, asset.duration) ofTrack:videoTrack atTime:startTime error:nil]; startTime = CMTimeAdd(startTime, asset.duration); }
  21. 21. CMTime startTime = kCMTimeZero; for (NSURL *url in _outputPathes) { // 動画アセットの取得 AVAsset *asset = [AVAsset assetWithURL:url]; AVAssetTrack *videoTrack = [[asset tracksWithMediaType:AVMediaTypeVideo] objectAtIndex:0]; [compositionVideoTrack insertTimeRange:CMTimeRangeMake(kCMTimeZero, asset.duration) ofTrack:videoTrack atTime:startTime error:nil]; startTime = CMTimeAdd(startTime, asset.duration); } kCMTimeZero asset.duration asset1 asset2 asset3 assetの終端に
 次のassetをinsertしていく
  22. 22. ③合成した動画の出力 // 出力する self.exporter = [[AVAssetExportSession alloc] initWithAsset:_composition presetName:AVAssetExportPresetHighestQuality]; _exporter.videoComposition = videoComposition; _exporter.outputURL=[NSURL fileURLWithPath:outputPath]; _exporter.outputFileType = AVFileTypeQuickTimeMovie; [_exporter exportAsynchronouslyWithCompletionHandler:^(void){ // export成功時の処理(カメラロールへの保存など) }];
  23. 23. 「撮影した短い動画の連結」完成! ※音声込みの動画にしたい場合は Audioも録音・合成する必要があります
  24. 24. 参考資料 AVFoundationを使ったキャプチャ機能 - SlideShare AVFoundationで動画の加工合成処理 - qiita iOS4プログラミングブック - Amazon ・撮影に関するクラスの俯瞰に ・合成や編集に関するクラスの俯瞰に ・体系的におさえるならコレ
  25. 25. おわり

×