Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
SwiftとGPUImageを使った
動画アプリMagicMovieの裏側
Presented by BEST10 Inc.
1
2015/08/07 村田佑介
2
自己紹介
BEST10 Inc. CTO 村田佑介
@muratayusuke
http://muratayusuke.com
経済学部
↓
楽天の人事(新卒採用)
↓
楽天のエンジニア
↓
BEST10株式会社CTO
略歴
3
行きつけグルメアプリ BEST10
4
MagicMovie for Instagram
5
旅行系サービス
?
6
suGATALOG
7
持ちネタ
BEST10
  → グルメ、Parse、Mixpanel
MagicMovie
  → 動画
suGATALOG
  → ファッション、カメラオーバーレイ
8
持ちネタ
BEST10
  → グルメ、Parse、Mixpanel
MagicMovie
  → 動画
suGATALOG
  → ファッション、カメラオーバーレイ
9
MagicMovieでやっていること
1. 撮影する
2. フィルターをかける
3. 結合する
4. 音楽をつける
5. 光漏れフィルターをかぶせる
6. エンドロールをつける
10
GPUImage
•これなに?

An open source iOS framework for GPU-based image
and video processing

→ GPUを使った画像処理ライブラリ



https://g...
11
GPUImage
•フィルターのサンプル多数

examples/iOS/FilterShowcaseSwift

→ 実機でビルドしたら色んなフィルターが試せる
12
MagicMovieでやっていること
1. 撮影する
2. フィルターをかける
3. 結合する
4. 音楽をつける
5. 光漏れフィルターをかぶせる
6. エンドロールをつける
13
1. 撮影する
14
1. 撮影する
GPUImageCameraカメラの入力
GPUImageView
addTarget
画面に表示
GPUImageMovieWriter ファイルに保存
addTarget
15
1. 撮影する
// 表示用のビューを作成
let videoView = GPUImageView()
// カメラの入力を拾ってくるやつ
let videoCamera = GPUImageVideoCamera(sessionPre...
16
MagicMovieでやっていること
1. 撮影する
2. フィルターをかける
3. 結合する
4. 音楽をつける
5. 光漏れフィルターをかぶせる
6. エンドロールをつける
17
2. フィルターをかける
GPUImageCamera
カメラの入力 GPUImageView
addTarget
GPUImageMovieWriter
addTarget
GPUImageFilter
addTarget
18
2. フィルターをかける
// 正方形に切り取るフィルター
let cropFilter = GPUImageCropFilter(cropRegion: CGRect(0, 0.125, 1.0, 0.75))
// カメラをフィルター...
19
MagicMovieでやっていること
1. 撮影する
2. フィルターをかける
3. 結合する
4. 音楽をつける
5. 光漏れフィルターをかぶせる
6. エンドロールをつける
20
3. 結合する
21
3. 結合する
素材動画
(複数可)
GPUImageView
addTarget
GPUImageMovieWriter
addTarget
GPUImageMovieComposition
22
3. 結合する
@interface GPUImageMovieComposition : GPUImageMovie
@property (readwrite, retain) AVComposition *compositon;
@p...
23
3. 結合する
•AVFoundation プログラミングガイド



https://developer.apple.com/jp/documentation/
AVFoundationPG.pdf
24
MagicMovieでやっていること
1. 撮影する
2. フィルターをかける
3. 結合する
4. 音楽をつける
5. 光漏れフィルターをかぶせる
6. エンドロールをつける
25
4. 音楽をつける
素材動画
(複数可)
GPUImageView
addTarget
GPUImageMovieWriter
addTarget
GPUImageMovieComposition
選んだ音楽
26
MagicMovieでやっていること
1. 撮影する
2. フィルターをかける
3. 結合する
4. 音楽をつける
5. 光漏れフィルターをかぶせる
6. エンドロールをつける
27
5. 光漏れフィルターをかぶせる
結合した動画
GPUImageView
addTarget
GPUImageMovieWriter
addTarget
GPUImageMovieComposition光漏れ動画
28
MagicMovieでやっていること
1. 撮影する
2. フィルターをかける
3. 結合する
4. 音楽をつける
5. 光漏れフィルターをかぶせる
6. エンドロールをつける
29
6. エンドロールをつける
結合した動画
GPUImageView
addTarget
GPUImageMovieWriter
addTarget
GPUImageMovieComposition光漏れ動画
エンドロール
30
6. エンドロールをつける
private class EndRollLayer: CALayer {
let logoLayer: CALayer
let imageSize: CGSize
override init!() {
log...
31
今後の展望
•他のスタートアップと連携?

→ ロゴ選べるようにするとか

→ CMのパロディ動画を撮れるようにするとか
32
Contact
BEST10 Inc. CTO 村田佑介
@muratayusuke
http://muratayusuke.com
Upcoming SlideShare
Loading in …5
×

SwiftとGPUImageを使った動画アプリMagicMovieの裏側

2015/08/07 Retty Teck Cafe #3 発表資料

SwiftとGPUImageを使った動画アプリMagicMovieの裏側

  1. 1. SwiftとGPUImageを使った 動画アプリMagicMovieの裏側 Presented by BEST10 Inc. 1 2015/08/07 村田佑介
  2. 2. 2 自己紹介 BEST10 Inc. CTO 村田佑介 @muratayusuke http://muratayusuke.com 経済学部 ↓ 楽天の人事(新卒採用) ↓ 楽天のエンジニア ↓ BEST10株式会社CTO 略歴
  3. 3. 3 行きつけグルメアプリ BEST10
  4. 4. 4 MagicMovie for Instagram
  5. 5. 5 旅行系サービス ?
  6. 6. 6 suGATALOG
  7. 7. 7 持ちネタ BEST10   → グルメ、Parse、Mixpanel MagicMovie   → 動画 suGATALOG   → ファッション、カメラオーバーレイ
  8. 8. 8 持ちネタ BEST10   → グルメ、Parse、Mixpanel MagicMovie   → 動画 suGATALOG   → ファッション、カメラオーバーレイ
  9. 9. 9 MagicMovieでやっていること 1. 撮影する 2. フィルターをかける 3. 結合する 4. 音楽をつける 5. 光漏れフィルターをかぶせる 6. エンドロールをつける
  10. 10. 10 GPUImage •これなに?
 An open source iOS framework for GPU-based image and video processing
 → GPUを使った画像処理ライブラリ
 
 https://github.com/BradLarson/GPUImage
  11. 11. 11 GPUImage •フィルターのサンプル多数
 examples/iOS/FilterShowcaseSwift
 → 実機でビルドしたら色んなフィルターが試せる
  12. 12. 12 MagicMovieでやっていること 1. 撮影する 2. フィルターをかける 3. 結合する 4. 音楽をつける 5. 光漏れフィルターをかぶせる 6. エンドロールをつける
  13. 13. 13 1. 撮影する
  14. 14. 14 1. 撮影する GPUImageCameraカメラの入力 GPUImageView addTarget 画面に表示 GPUImageMovieWriter ファイルに保存 addTarget
  15. 15. 15 1. 撮影する // 表示用のビューを作成 let videoView = GPUImageView() // カメラの入力を拾ってくるやつ let videoCamera = GPUImageVideoCamera(sessionPreset: AVCaptureSessionPreset640x480, cameraPosition: .Back) videoCamera.outputImageOrientation = .Portrait // カメラをビューに接続 videoCamera.addTarget(videoView) // もらった映像をファイルに書き出すやつ let movieWriter = GPUImageMovieWriter(movieURL: movieURL, size: CGSize(width: 480, height: 480)) movieWriter.shouldPassthroughAudio = true videoCamera.addTarget(movieWriter) videoCamera.audioEncodingTarget = movieWriter // 撮影開始 videoCamera.startCameraCapture() movieWriter.startRecording()
  16. 16. 16 MagicMovieでやっていること 1. 撮影する 2. フィルターをかける 3. 結合する 4. 音楽をつける 5. 光漏れフィルターをかぶせる 6. エンドロールをつける
  17. 17. 17 2. フィルターをかける GPUImageCamera カメラの入力 GPUImageView addTarget GPUImageMovieWriter addTarget GPUImageFilter addTarget
  18. 18. 18 2. フィルターをかける // 正方形に切り取るフィルター let cropFilter = GPUImageCropFilter(cropRegion: CGRect(0, 0.125, 1.0, 0.75)) // カメラをフィルターに接続 videoCamera.addTarget(cropFilter) // フィルターをアウトプットに接続 cropFilter.addTarget(videoView) cropFilter.addTarget(movieWriter)
  19. 19. 19 MagicMovieでやっていること 1. 撮影する 2. フィルターをかける 3. 結合する 4. 音楽をつける 5. 光漏れフィルターをかぶせる 6. エンドロールをつける
  20. 20. 20 3. 結合する
  21. 21. 21 3. 結合する 素材動画 (複数可) GPUImageView addTarget GPUImageMovieWriter addTarget GPUImageMovieComposition
  22. 22. 22 3. 結合する @interface GPUImageMovieComposition : GPUImageMovie @property (readwrite, retain) AVComposition *compositon; @property (readwrite, retain) AVVideoComposition *videoComposition; @property (readwrite, retain) AVAudioMix *audioMix; - (id)initWithComposition:(AVComposition*)compositon andVideoComposition:(AVVideoComposition*)videoComposition andAudioMix:(AVAudioMix*)audioMix; @end
  23. 23. 23 3. 結合する •AVFoundation プログラミングガイド
 
 https://developer.apple.com/jp/documentation/ AVFoundationPG.pdf
  24. 24. 24 MagicMovieでやっていること 1. 撮影する 2. フィルターをかける 3. 結合する 4. 音楽をつける 5. 光漏れフィルターをかぶせる 6. エンドロールをつける
  25. 25. 25 4. 音楽をつける 素材動画 (複数可) GPUImageView addTarget GPUImageMovieWriter addTarget GPUImageMovieComposition 選んだ音楽
  26. 26. 26 MagicMovieでやっていること 1. 撮影する 2. フィルターをかける 3. 結合する 4. 音楽をつける 5. 光漏れフィルターをかぶせる 6. エンドロールをつける
  27. 27. 27 5. 光漏れフィルターをかぶせる 結合した動画 GPUImageView addTarget GPUImageMovieWriter addTarget GPUImageMovieComposition光漏れ動画
  28. 28. 28 MagicMovieでやっていること 1. 撮影する 2. フィルターをかける 3. 結合する 4. 音楽をつける 5. 光漏れフィルターをかぶせる 6. エンドロールをつける
  29. 29. 29 6. エンドロールをつける 結合した動画 GPUImageView addTarget GPUImageMovieWriter addTarget GPUImageMovieComposition光漏れ動画 エンドロール
  30. 30. 30 6. エンドロールをつける private class EndRollLayer: CALayer { let logoLayer: CALayer let imageSize: CGSize override init!() { logoLayer = CALayer() let image = UIImage(named: "Endroll") imageSize = image?.size ?? CGSizeZero logoLayer.contents = image?.CGImage logoLayer.opacity = 0.0 super.init() let logoAnimation = CABasicAnimation(keyPath: "opacity") logoAnimation.beginTime = 0.5 logoAnimation.duration = 2.5 logoAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut) logoAnimation.fromValue = 0.0 logoAnimation.toValue = 1.0 logoAnimation.removedOnCompletion = false logoAnimation.fillMode = kCAFillModeForwards logoLayer.addAnimation(logoAnimation, forKey: nil) addSublayer(logoLayer) } }
  31. 31. 31 今後の展望 •他のスタートアップと連携?
 → ロゴ選べるようにするとか
 → CMのパロディ動画を撮れるようにするとか
  32. 32. 32 Contact BEST10 Inc. CTO 村田佑介 @muratayusuke http://muratayusuke.com

×