SlideShare a Scribd company logo
1 of 32
Download to read offline
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://github.com/BradLarson/GPUImage
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(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
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))
// カメラをフィルターに接続
videoCamera.addTarget(cropFilter)
// フィルターをアウトプットに接続
cropFilter.addTarget(videoView)
cropFilter.addTarget(movieWriter)
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;
@property (readwrite, retain) AVVideoComposition *videoComposition;
@property (readwrite, retain) AVAudioMix *audioMix;
- (id)initWithComposition:(AVComposition*)compositon
andVideoComposition:(AVVideoComposition*)videoComposition
andAudioMix:(AVAudioMix*)audioMix;
@end
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!() {
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
今後の展望
•他のスタートアップと連携?

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

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

More Related Content

Featured

5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summarySpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project managementMindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...RachelPearson36
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Applitools
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at WorkGetSmarter
 
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...DevGAMM Conference
 
Barbie - Brand Strategy Presentation
Barbie - Brand Strategy PresentationBarbie - Brand Strategy Presentation
Barbie - Brand Strategy PresentationErica Santiago
 
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them wellGood Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them wellSaba Software
 
Introduction to C Programming Language
Introduction to C Programming LanguageIntroduction to C Programming Language
Introduction to C Programming LanguageSimplilearn
 
The Pixar Way: 37 Quotes on Developing and Maintaining a Creative Company (fr...
The Pixar Way: 37 Quotes on Developing and Maintaining a Creative Company (fr...The Pixar Way: 37 Quotes on Developing and Maintaining a Creative Company (fr...
The Pixar Way: 37 Quotes on Developing and Maintaining a Creative Company (fr...Palo Alto Software
 
9 Tips for a Work-free Vacation
9 Tips for a Work-free Vacation9 Tips for a Work-free Vacation
9 Tips for a Work-free VacationWeekdone.com
 
I Rock Therefore I Am. 20 Legendary Quotes from Prince
I Rock Therefore I Am. 20 Legendary Quotes from PrinceI Rock Therefore I Am. 20 Legendary Quotes from Prince
I Rock Therefore I Am. 20 Legendary Quotes from PrinceEmpowered Presentations
 

Featured (20)

5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
 
ChatGPT webinar slides
ChatGPT webinar slidesChatGPT webinar slides
ChatGPT webinar slides
 
More than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike RoutesMore than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike Routes
 
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
 
Barbie - Brand Strategy Presentation
Barbie - Brand Strategy PresentationBarbie - Brand Strategy Presentation
Barbie - Brand Strategy Presentation
 
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them wellGood Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
 
Introduction to C Programming Language
Introduction to C Programming LanguageIntroduction to C Programming Language
Introduction to C Programming Language
 
The Pixar Way: 37 Quotes on Developing and Maintaining a Creative Company (fr...
The Pixar Way: 37 Quotes on Developing and Maintaining a Creative Company (fr...The Pixar Way: 37 Quotes on Developing and Maintaining a Creative Company (fr...
The Pixar Way: 37 Quotes on Developing and Maintaining a Creative Company (fr...
 
9 Tips for a Work-free Vacation
9 Tips for a Work-free Vacation9 Tips for a Work-free Vacation
9 Tips for a Work-free Vacation
 
I Rock Therefore I Am. 20 Legendary Quotes from Prince
I Rock Therefore I Am. 20 Legendary Quotes from PrinceI Rock Therefore I Am. 20 Legendary Quotes from Prince
I Rock Therefore I Am. 20 Legendary Quotes from Prince
 

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