ビデオに字幕を表示する

# ハッシュを作り、字幕の配列と、表示開始時間、表示する時間（長さ: duration）を記録していく。

subtitleHash = Hash.new

subtitleHash["subtitle"] = subTTexts

subtitleHash["startCMTime"] = startCMTime

subtitleHash["durationCMTime"] = CMTimeSubtract(endCMTime,startCMTime)

subTArray << subtitleHash

end

# 上で作った字幕の情報が入った配列をブロックで処理。

subTArray.each_with_index do |subT,idx|

# NSImage の imageWithSize:flipped:drawingHandler で NSImage オブジェクトを作る。

# イメージの表示領域は、高さ、横幅の最大値を取っている。

image = NSImage.imageWithSize([@maxWidth,@maxHeight],flipped:false,drawingHandler:Proc.new{|handler|

# AVFoundation の所にある波形表示のサンプルと違って、ここでは Core Graphics で描画している。

# まずは、表示するコンテクストの用意。NSGraphicsContext で用意している（CGGraphicsContext ってあるのか？）。RubyMotion では、最後に、to_object を付けないとちゃんと動かない（これがずっとわからなかった）。

context = NSGraphicsContext.currentContext.graphicsPort.to_object

# 塗りつぶしの色の指定。字幕以外は透明にしたいので、NSColor.clearColor で作り、それを CGColor に変換している。

# そして、CGContextFillRect で、指定した Rect を塗りつぶす。

CGContextSetFillColorWithColor(context, NSColor.clearColor.CGColor)

CGContextFillRect(context, CGRectMake(0,0,@maxWidth,@maxHeight))

# 次に、上で準備した字幕テキストを SubTs という変数を作って入れておく。

# 多分、いちいち作らなくても動くと思うが、念のため。

subTs = subT['subtitle']

# lineNum で何行あるかというのを取り出しているのは、表示位置決めのため。

lineNum = subTs.length

# ブロックで処理していく。

subTs.each_with_index do |subTitle,idx2|

# まずは、NSMutableAttributedString オブジェクトを作り、全範囲に対して、上で指定した属性を付ける。

# また、alignment を中央にしているが、今の方法では実は意味がない。ただ、将来のために残しておく。

# alignment を中央にしてはいるが、実はあまり関係ないことに気づいたので、作った NSMutableAttributedString オブジェクトの横幅を表示域の横幅（最大値）から引いた物を半分にした位置から表示することで、中央表示にしている。

textPosX = (@maxWidth - subTitle.size.width)/2

# ここで、NSMutableAttributedString オブジェクトから Core Text の line オブジェクトを作っている。

# drawAtPoint でも表示できるが、このような面倒くさい処理にしているのは、次に行うアウトラインをきれいに描くため。

line = CTLineCreateWithAttributedString(subTitle)

# 作った CTLine オブジェクトから、Glyph の情報を得て、それを使ってアウトラインを描いている。

# 実はよくわかっていない。この辺りを参考にしたので、当たってみてください。http://qiita.com/nofrmm/items/abd8d47ccf1191f4ba13

# CTLineGetGlyphRuns で Glyph を配列として取り出しているので、それをブロック処理。

# CGPathCreateMutable で CGPath として情報を集めていく準備。

runs = CTLineGetGlyphRuns(line)

letters = CGPathCreateMutable()

runs.each do |run|

# アウトラインのフォントは文字のフォントと同じでないと困るので、Glyph のフォント情報を得ている。

runFont = CTRunGetAttributes(run)['NSFont']

# CTRunGetGlyphCount で Glyph の数を得て、その回数分だけブロック処理。

CTRunGetGlyphCount(run).times do |ridx|

# まずは、一文字分ずつの range を作る。Core Text は CF~ でいろいろと準備しないといけないらしい。

glyphRange = CFRangeMake(ridx, 1);

# Glyph と position の情報は、ポインタを用意する必要があるので、Pointer オブジェクトを作る。

# glyph は 'S' を、position は CGPoint で用意する。

glyph = Pointer.new('S',1)

position = Pointer.new(CGPoint.type,2)

# CTRunGetGlyphs で Glyph の情報を glyph に取り出す。同様に CTRunGetPositions で position の情報を position に取り出す。

CTRunGetGlyphs(run, glyphRange, glyph)

CTRunGetPositions(run, glyphRange, position)

# CTFontCreatePathForGlyph で、取り出した Glyph のパス情報を取り出す。

letter = CTFontCreatePathForGlyph(runFont, glyph[0], nil)

# CGAffineTransform もポインタを用意する必要があるようなので用意した（この辺りはよくわかっていない）。

atf = Pointer.new(CGAffineTransform.type,1)

# ここでは、文字の位置を指定するようなので、上の CTLine を描く位置と同じ位置を指定している。そして、CGPath に path を追加していく。

atf[0] = CGAffineTransformMakeTranslation(position[0].x+textPosX, 8 + (fontSize+lineSpace) * (lineNum - idx2 - 1))

CGPathAddPath(letters, atf, letter)

end

end

# ここから、実際に文字を書いていく。

# まずは CGContextSetTextPosition で位置を指定している。

CGContextSetTextPosition(context,textPosX, 8 + (fontSize+lineSpace) * (lineNum - idx2 - 1))

# CGContextSetLineJoin はアウトラインを繋ぐ方法らしいが、KCGLineJoinRound は滑らかに描くおまじない。CGContextAddPath で描く線をコンテクストに追加。

CGContextSetLineJoin(context,KCGLineJoinRound)

CGContextAddPath(context, letters)

# ここで、アウトラインの色を黒に指定しているので、変更する場合は NSColor で指定するか、CGColor で。

# CGContextSetLineWidth でアウトラインの太さを指定して、CGContextStrokePath で線を描いている。

CGContextSetStrokeColorWithColor(context,NSColor.blackColor.CGColor)

CGContextSetLineWidth(context, outlineWidth)

CGContextStrokePath(context)

# 最後に、アウトラインの上に文字を描いて出来上がり。

CTLineDraw(line, context)

end

})

# 特に名前を指定する必要がここではないが、名前を指定する必要がある場合に備えて（前のスクリプトで必要だったので）残してある。

imageName = "img#{idx}"

image.setName(imageName)

# ここで、NSBitmapImageRep オブジェクトに変換して、これを配列に入れていく。

bitmapRep = NSBitmapImageRep.imageRepWithData(image.TIFFRepresentation)

subTImages << bitmapRep

# 時間の指定は、0.0 から 1.0 の間でするので、開始時間を動画ファイルの長さで割っている。

subtitleTimes << subT['startCMTime'].value.to_f / durationTime.value

end

# 字幕を表示するのに CALayer に字幕のイメージを表示するようにするが、映像と同期しないと困るので、AVSynchronizedLayer を使う。

# これで同期させたい AVPlayerView の AVPlayerItem を指定して AVSynchronizedLayer オブジェクトを作る。

synchLayer = AVSynchronizedLayer.synchronizedLayerWithPlayerItem(@playerView.player.currentItem)

# フレームの大きさは、AVPlayerView と同じにして、リサイズするように指定してみているが、思うようにいっていない（字幕自体がリサイズしない。）。この辺りはいずれどうにかしたい。

# setMasksToBounds は中身が bound の外に行くかどうかを決めるらしいが、試していないので、false にするとどうなるかよくわかっていない。

synchLayer.setFrame(@playerView.frame)

synchLayer.setAutoresizingMask(KCALayerWidthSizable | KCALayerHeightSizable)

synchLayer.setMasksToBounds(true)

# AVSynchronizedLayer の sublayer として実際に字幕画像を表示する layer を CALayer で作る。サイズは、AVPlayerView のサイズと同じにしてある。

# サイズ変更の際に参照したいので、インスタンス変数として用意。

# layer のフレームは、ビデオの横幅としているが、これは表示する playerView をビデオのサイズに合わせているから。そうでない場合は、playerView の幅に合わせた方がいいかも。

@overlayLayer = CALayer.layer

@overlayLayer.frame = CGRectMake((@videoSize.width - @maxWidth)/2, @offset, @maxWidth, @maxHeight)

@overlayLayer.setMasksToBounds(true)

# ここまでで作ったイメージデータを CAKeyframeAnimation を使って映像に重ねる。

# keypath は、イメージデータを扱うので、'contents' を指定するようだ。その辺りについては、アップルのデベロッパドキュメントで確認してください。 https://developer.apple.com/library/ios/documentation/Cocoa/Conceptual/CoreAnimation_guide/CreatingBasicAnimations/CreatingBasicAnimations.html

anim = CAKeyframeAnimation.animationWithKeyPath("contents")

# 開始時間は、KCMTimeZero、つまり CMTime のゼロを指定すると、使ってる Mac が起動した時間ということになるらしいので、AVCoreAnimationBeginTimeAtZero を使う。

# これで、動画の開始時間と同期する。長さは、動画の長さを指定する。

anim.beginTime = AVCoreAnimationBeginTimeAtZero

anim.duration = CMTimeGetSeconds(durationTime)

# values に、上で作った イメージデータを CGImage にして配列で指定する。そして、keyTimes にそれぞれの字幕の開始時間が 0.0 から 1.0 で指定してある配列の subtitleTimes を指定する。

anim.values = subTImages.map{|x| x.CGImage}

anim.keyTimes = subtitleTimes

# calculationMode は、連続しないイメージを並べるので、KCAAnimationDiscrete を指定する。これで、それぞれの時間を key として、字幕イメージをキーイメージとした、キーフレームのアニメーション、つまり、キーフレームごとにイメージが切り替わる映像が出来上がる。

anim.calculationMode = KCAAnimationDiscrete

# removedOnCompletion で、false を指定しないと、止まったところで映像が消えてしまう（最初に戻る）ので、ちゃんと指定する。

# fillMode で KCAFillModeForwards を指定すると、停止した時点で最後に表示されていたイメージが表示され続ける。

anim.removedOnCompletion = false

anim.fillMode = KCAFillModeForwards

# これはおまじないだけど、いらないかもしれない。

@overlayLayer.displayIfNeeded

# ここで、作った @overlayLayer という名前の CALayer にアニメーションを追加して、その @overlayLayer を AVSynchronizedLayer に sublayer として追加する。

@overlayLayer.addAnimation(anim,forKey:"contents")

synchLayer.addSublayer(@overlayLayer)

# そして、AVSynchronizedLayer の layer を AVPlayerView の layer に sublayer として追加する。

# じつは、ここで、@playerView の layer に追加すると、コントローラーの上に字幕の layer が表示されてしまう。

parentLayer = @playerView.layer

parentLayer.addSublayer(synchLayer)

# 最後に、サイズ変更の際に参照したいので、playerView の layer の sublayer のなかで、AVPlayerLayer を参照できるようにしておく。

# まあ、Ruby らしく、Array#select なんかを使った方が見栄えがいいんだろうけど。いずれは書き換えるかも。

subtitleHash["subtitle"] = subtitle

subtitleHash["startCMTime"] = startCMTime

subtitleHash["durationCMTime"] = CMTimeSubtract(endCMTime,startCMTime)

subTArray << subtitleHash

end

subtitleTimes = Array.new

subTImages = Array.new

subTArray.each_with_index do |subT,idx|

image = NSImage.imageWithSize([@maxWidth,@maxHeight],flipped:false,drawingHandler:Proc.new{|handler|

context = NSGraphicsContext.currentContext.graphicsPort.to_object

CGContextSetFillColorWithColor(context, NSColor.clearColor.CGColor)

CGContextFillRect(context, CGRectMake(0, 0, @maxWidth,@maxHeight))

subTs = subT['subtitle']

lineNum = subTs.length

subTs.each_with_index do |subTitle,idx2|

textPosX = (@maxWidth - subTitle.size.width)/2

line = CTLineCreateWithAttributedString(subTitle)

runs = CTLineGetGlyphRuns(line)

letters = CGPathCreateMutable()

runs.each do |run|

runFont = CTRunGetAttributes(run)['NSFont']

CTRunGetGlyphCount(run).times do |ridx|

glyphRange = CFRangeMake(ridx, 1);

glyph = Pointer.new('S',1)

position = Pointer.new(CGPoint.type,2)

CTRunGetGlyphs(run, glyphRange, glyph)

CTRunGetPositions(run, glyphRange, position)

letter = CTFontCreatePathForGlyph(runFont, glyph[0], nil)

atf = Pointer.new(CGAffineTransform.type,1)

atf[0] = CGAffineTransformMakeTranslation(position[0].x+textPosX, 8 + (fontSize+lineSpace) * (lineNum - idx2 - 1))

CGPathAddPath(letters, atf, letter)

end

end

CGContextSetTextPosition(context,textPosX, 8 + (fontSize+lineSpace) * (lineNum - idx2 - 1))

CGContextSetLineJoin(context,KCGLineJoinRound)

CGContextAddPath(context, letters)

CGContextSetStrokeColorWithColor(context,NSColor.blackColor.CGColor)

CGContextSetLineWidth(context, outlineWidth)

CGContextStrokePath(context)

CTLineDraw(line, context)

end

})

imageName = "img#{idx}"

image.setName(imageName)

bitmapRep = NSBitmapImageRep.imageRepWithData(image.TIFFRepresentation)

subTImages << bitmapRep

subtitleTimes << subT['startCMTime'].value.to_f / durationTime.value

end

synchLayer = AVSynchronizedLayer.synchronizedLayerWithPlayerItem(@playerView.player.currentItem)

synchLayer.setFrame(@playerView.frame)

synchLayer.setAutoresizingMask(KCALayerWidthSizable | KCALayerHeightSizable)

synchLayer.setMasksToBounds(true)

@overlayLayer = CALayer.layer

@overlayLayer.frame = CGRectMake((@videoSize.width - @maxWidth)/2, @offset, @maxWidth, @maxHeight)

@overlayLayer.setMasksToBounds(true)

anim = CAKeyframeAnimation.animationWithKeyPath("contents")

anim.beginTime = AVCoreAnimationBeginTimeAtZero

anim.duration = CMTimeGetSeconds(durationTime)

anim.values = subTImages.map{|x| x.CGImage}

anim.keyTimes = subtitleTimes

anim.calculationMode = KCAAnimationDiscrete

anim.removedOnCompletion = false

anim.fillMode = KCAFillModeForwards

@overlayLayer.displayIfNeeded

@overlayLayer.addAnimation(anim,forKey:"contents")