AVPlayerで視聴している動画をUIImageにするために四苦八苦した話

1. iOSで動画から
スクショを撮る方法
@gawawa124

2. Who am I ?
• Tomoya Itagawa (@gawawa124)
• フリーランスのiPhoneアプリエンジニア
• Objective-Cを3年くらい
• Swiftは2になってからちょっと触ってた

3. Swiftのお仕事募集中です

4. iOSアプリ上で動画から
スクショが撮りたい

5. AVPlayerで
視聴している動画を
UIImageに変換したい

6. 普通のUIViewの場合は？
func imageFromView() -> UIImage? {
UIGraphicsBeginImageContextWithOptions(size, false, 0)
if let context = UIGraphicsGetCurrentContext() {
layer.renderInContext(context)
let image =
UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return image;
}
return nil
}
問題ない

7. しかし
AVPlayerだと真っ白になる

8. How? - 0.動画再生準備
• AVPlayer（動画を再生するためのもの）
• AVPlayerItem（AVPlayerに渡す動画ファイ
ル）
• AVPlayerLayer（実際に見える画面）

9. How? - 1.CADisplayLinkと
AVPlayerItemVideoOutput
• CADisplayLink（画面更新のたびに呼び出され
るメソッドを提供するタイマーオブジェクト）
• AVPlayerItemVideoOutput（動画から出力さ
れる情報を司っている）
• AVPlayerItemにaddVideoOutputで紐付ける

10. How? - 2.コールバックから
UIImageに変換していく
1. AVPlayerItemVideoOutput
2. CVPixelBuffer
3. CIImage
4. CGImage
5. UIImage
どうしてこんなに面倒な感じなのかは後述

11. CADisplayLinkのコールバックから
UIImageに変換
func displayLinkCallback(sender: CADisplayLink) {
var outputItemTime: CMTime = kCMTimeInvalid
let nextVsync: CFTimeInterval = sender.timestamp + sender.duration
outputItemTime = videoOutput.itemTimeForHostTime(nextVsync)
if videoOutput.hasNewPixelBufferForItemTime(outputItemTime) {
if let pixelBuffer =
videoOutput.copyPixelBufferForItemTime(outputItemTime, itemTimeForDisplay: nil) {
let ciImage = CIImage(CVPixelBuffer: pixelBuffer)
let temporaryContext = CIContext(options: nil)
let videoImage = temporaryContext.createCGImage(
ciImage,
fromRect: CGRectMake(
0,
0,
CGFloat(CVPixelBufferGetWidth(pixelBuffer)),
CGFloat(CVPixelBufferGetHeight(pixelBuffer))))
backgroundImageView.image = UIImage(CGImage: videoImage)
}
}
}

12. CADisplayLinkのコールバックから
UIImageに変換
func displayLinkCallback(sender: CADisplayLink) {
var outputItemTime: CMTime = kCMTimeInvalid
let nextVsync: CFTimeInterval = sender.timestamp + sender.duration
outputItemTime = videoOutput.itemTimeForHostTime(nextVsync)
if videoOutput.hasNewPixelBufferForItemTime(outputItemTime) {
if let pixelBuffer =
videoOutput.copyPixelBufferForItemTime(outputItemTime, itemTimeForDisplay: nil) {
let ciImage = CIImage(CVPixelBuffer: pixelBuffer)
let temporaryContext = CIContext(options: nil)
let videoImage = temporaryContext.createCGImage(
ciImage,
fromRect: CGRectMake(
0,
0,
CGFloat(CVPixelBufferGetWidth(pixelBuffer)),
CGFloat(CVPixelBufferGetHeight(pixelBuffer))))
backgroundImageView.image = UIImage(CGImage: videoImage)
}
}
}
指定するための時間
時間を指定して
pixelBufferを取得

13. CADisplayLinkのコールバックから
UIImageに変換
func displayLinkCallback(sender: CADisplayLink) {
var outputItemTime: CMTime = kCMTimeInvalid
let nextVsync: CFTimeInterval = sender.timestamp + sender.duration
outputItemTime = videoOutput.itemTimeForHostTime(nextVsync)
if videoOutput.hasNewPixelBufferForItemTime(outputItemTime) {
if let pixelBuffer =
videoOutput.copyPixelBufferForItemTime(outputItemTime, itemTimeForDisplay: nil) {
let ciImage = CIImage(CVPixelBuffer: pixelBuffer)
let temporaryContext = CIContext(options: nil)
let videoImage = temporaryContext.createCGImage(
ciImage,
fromRect: CGRectMake(
0,
0,
CGFloat(CVPixelBufferGetWidth(pixelBuffer)),
CGFloat(CVPixelBufferGetHeight(pixelBuffer))))
backgroundImageView.image = UIImage(CGImage: videoImage)
}
}
}
CIImageをそのままUIImageに
するとうまく描画されない！

14. 最適解とは
言いづらいですけど
実装できました

15. Demo

16. 参考資料
• Swift Docs(006 動画の再生) https://sites.google.com/a/gclue.jp/
swift-docs/ni-yinki100-ios/3-avfoundation/006-dong-huano-zai-
sheng
• iOS Developer Library(Real-time Video Processing Using
AVPlayerItemVideoOutput) https://developer.apple.com/
library/prerelease/ios/samplecode/AVBasicVideoOutput/
Introduction/Intro.html
• stack over flow(How to turn a CVPixelBuffer into a UIImage?)
http://stackoverflow.com/questions/8072208/how-to-turn-a-
cvpixelbuffer-into-a-uiimage

17. Thank you!