Teiten 1.3.0にバージョンアップ - 動画をアーカイブできるようにした

( macOS )

Teitenのバージョンアップを行いました。

バージョンアップ内容は以下の内容です。

  • 動画にその時の時間を加えました。
  • 指定された時間ごとに３秒動画を撮ってそれを結合できるようにしました。

もっと監視っぷりを高めたくこの更新を行いました。

処理内容

  • 動画を保存する
  • 保存された動画を結合する
  • 動画には録画された時間帯を表示させておく

動画を保存する

今まで出力に

  • AVCaptureStillImageOutput

を利用していたが新たな出力先に

  • AVCaptureMovieFileOutput

を登録した。

保存された動画を結合する

以前自分が作成したプラグイン[NKJMovieComposer]()でさくっと実装した

let movieComposition = NKJMovieComposer()
movieComposition.videoComposition.renderSize = CGSize(width: self.size.width, height: self.size.height)

for i in 0..<self.files.count {

    let beforeTimeDuration = movieComposition.currentTimeDuration
    let moviePath = self.files[i]

    // movie
    let movieURL = NSURL(fileURLWithPath: moviePath)
    //let layerInstruction = movieComposition.addVideo(movieURL)
    _ = movieComposition.addVideo(movieURL)

    (snip...)
}

動画には録画された時間帯を表示させておく

時間帯は動画ファイルのメタ情報から取得できるのでそれを利用する。あとは動画が切り替わるごとにその文字列を切り替えればいい。 動画上にCALayerを敷いてそこで文字列を表示するのにCATextLayerを使ってアニメーションさせればしたいこは実現できた。

// today
let dateFormatter = NSDateFormatter()
dateFormatter.dateFormat = "yyyy/MM/dd HH:mm"

// text layer
let textLayer = CATextLayer()
textLayer.frame = CGRect(x: self.size.width - 400.0 - 10.0, y: 10.0, width: 400.0, height: 52.0)
textLayer.string = dateFormatter.stringFromDate(self.dates[i])
textLayer.fontSize = 48.0
textLayer.alignmentMode = kCAAlignmentRight
textLayer.foregroundColor = NSColor.whiteColor().CGColor
textLayer.shouldRasterize = true
textLayer.opacity = 0.0
layerRoot.addSublayer(textLayer)

// animation
let offsetTimeDuration = CMTimeSubtract(movieComposition.currentTimeDuration, beforeTimeDuration)
let animation = CABasicAnimation(keyPath: "opacity")
animation.beginTime     = (i == 0) ? AVCoreAnimationBeginTimeAtZero : CMTimeGetSeconds(beforeTimeDuration)
animation.duration      = CMTimeGetSeconds(offsetTimeDuration)
animation.repeatCount   = 1
animation.autoreverses  = false
animation.fromValue     = NSNumber(float: 1.0)
animation.toValue       = NSNumber(float: 1.0)
animation.removedOnCompletion = false
textLayer.addAnimation(animation, forKey:"hide")

最後はそのアニメーションをAVVideoCompositionCoreAnimationToolを使ってVideo Compositionに登録する。

// animation
movieComposition.videoComposition.animationTool = AVVideoCompositionCoreAnimationTool(postProcessingAsVideoLayer: layerVideo, inLayer: layerRoot)

これで上記にある動画は実現できた。

まとめ

今回は既存の知識で何とかできたのでそれほど技術的に達成感はないものの、動画ネタはまだ自分の中でまだまだ冷めてないことがわかった。また、何か面白そうなことがあれば試していきたいと思う。 監視最高。