Computer Vision APIの探求

Computer Vision APIの探求

Core Image、Vision、およびCore MLを組み合わせることで、AppにComputer Vision のインテリジェンスを導入する方法について学びます。機械学習だけにとどまらず、画像や動画の理解を深めましょう。Core ImageおよびVisionにおける新しいAPIを見つけ、新しいしきい値フィルター、輪郭検出(Contour Detection)、フレーム間予測(Optical Flow)などのAppにComputer Visionを取り入れます。また、Core Imageを使用して、これらの結果の前処理と可視化を行う方法を検討します。基盤となるフレームワークについては、"Vision Framework: Building on Core ML" および "Core Image: Performance, Prototyping, and Python" を参照してください。Computer Vision APIについてさらに詳しく知るには、"Detect Body and Hand Pose with Vision" および "Explore the Action & Vision app"セッションも必ずチェックしてください。

リソース
- Vision
- - HDビデオ
  - SDビデオ
関連ビデオ

WWDC21
- Visionによるドキュメントデータの抽出
WWDC20
- Action & Vision Appの探求
- Visionで身体や手のポーズを検出する
WWDC19
- Understanding Images in Vision Framework
- Visionフレームワークでのテキスト認識
ダウンロード

こんにちは WWDCへようこそ
“Computer Vision APIの探求” WWDCへようこそ私フランク･ドープケと同僚のデイビッド･ヘイワードが今日はコンピュータビジョンAPIに関してご説明します
実はコンピュータビジョンはアプリケーションを強化することができますまたビジネスの中心でない場合でもコンピュータビジョンは実際にアプリケーションに新しいものをもたらします
例を挙げてみましょう
銀行アプリケーションでは小切手を入金することができます小切手を実際に読み取るためにカメラのコンピュータビジョンを使用するともはや情報を入力する必要はありませんコンピュータビジョンが銀行業界の中心にないことは明らかですしかしコンピュータビジョンを使用することでユーザーは多くの手順を省けますユーザーはもはや何も入力する必要はありません
他にも例えば QRコードを読み取る場合や領収書を読み取る場合がありますこれはアプリケーションで必ず実行したいことではないかもしれませんがカメラを使用することによりユーザーにとって非常に簡単になりますそれではコンピュータビジョンで利用できるAPIは何でしょうか
最上位レベルには VisionKitがありますこれは実際にドキュメントをスキャンするためにメモメッセージまたはメールで確認した― VNDocumentCameraのホームです次に Core Imageを使用して実際に画像処理を行い Visionを使用して画像を分析し最後に Core MLを使って機械学習の推論を行います本日は Core ImageとVisionに焦点を当てますこれらのAPIはただ並んで立っている柱のようなものではなく実際にはうまく結びついています画像の前処理を行いそれをVisionに実行して結果を取得しその結果をCore MLに入力したり Core Imageに戻ってエフェクトを作成したりすることができます Core Imageを使ってコンピュータビジョンの画像を前処理する方法については同僚のデイビッド･ヘイワードがご説明します
ありがとうこの機会に Core Imageを使用してコンピュータビジョンアルゴリズムを向上させる方法をご説明します
Core ImageはMetal上に構築され最適化された使いやすい画像処理フレームワークです詳細についてはこのテーマに関する WWDC 2017のプレゼンをご覧ください
アプリケーションがVisionと共にCore Imageを使用するべき主な理由は２つあります
Core Imageを使用して Visionへの入力を前処理することでアルゴリズムをより速くより堅牢にすることができます
Core Imageを使用して Visionからの出力を後処理することでこれらの結果をユーザーに表示する新しい方法をアプリケーションに提供できます
また Core Imageは機械学習トレーニングを増やす優れたツールです 2018年のWWDCのプレゼンテーションではこのすばらしい例をいくつか紹介しています
分析用に画像を処理する最良の方法の１つは最高のパフォーマンスを得るために画像を縮小することです総合的に最高の品質を持つスケーラーは CILanczosScaleです
このフィルタはコード内で非常に簡単に使用できますまずは CIFilterBuiltinsヘッダーをインポートしますその後フィルタインスタンスを作成し入力プロパティを設定して outputImageを取得するだけです
しかしこれはCore Imageのいくつかのリサンプリングフィルタの１つにすぎませんアルゴリズムによっては線形補間CIAffineTransformを使用する方がよい場合があります
モルフォロジー演算は画像内の小さな特徴をより目立たせるための優れた手法です
CIMorphologyRectangleMaximumを使用してダイレートを実行すると画像の明るい領域が大きくなります
CIMorphologyRectangleMinimumを使用してエロードを実行すると明るい領域が小さくなります
さらによいのは CIMorphologyRectangleMinimumに続いて CIMorphologyRectangleMaximumを使用して Closeを実行することですこれはアルゴリズムに影響を与える可能性のある小さなノイズ領域を画像から削除する場合に非常に便利です
一部のアルゴリズムではモノクロ入力のみが必要ですこの場合 Visionは自動的にRGBをグレースケールに変換します入力画像に関するドメインの知識がある場合は Core Imageを使用してグレーに変換するとよりよい結果が得られる可能性があります
CIColorMatrixを使用するとこの変換に必要な任意の重みを指定できます
または CIMaximumComponentを使用すると最大信号のチャネルが使用できます
画像解析前のノイズ低減も考慮する必要があります
CIMedianFilterを２回通すとエッジを柔らかくすることなくノイズを低減できます
CIGaussianBlurおよびCIBoxBlurもノイズを低減するための高速な方法です
また CINoiseReductionフィルタの使用も検討してください
Core Imageにはさまざまなエッジ検出フィルタもあります
Sobelエッジ検出では CIConvolution3X3を使用できます
さらに優れているのは CIGaborGradientsを使用することですこれによりノイズに対する耐性が高い２Ｄグラデーションベクトルが生成されます
画像のコントラストを強調するとオブジェクトの検出に役立ちます
CIColorPolynomialでは任意の３次コントラスト関数を指定できます CIColorControlsは線形コントラストパラメータを提供します
今年は Core Imageには画像を白黒に変換できる新しいフィルタもいくつか用意されています
例えば CIColorThresholdを使用するとアプリケーションコードでしきい値を設定できます CIColorThresholdOtsuは画像のヒストグラムに基づいて最適な“しきい値”を自動的に決定します
Core Imageには２つの画像を比較するためのフィルタもありますこのフィルタはビデオのフレーム間の動きを検出するための処理に役立ちます
例えば CIColorAbsoluteDifferenceはこの問題を解決するための今年の新しいフィルタです
また人間の色に対する知覚に合わせて設計された数式を使用して CILabDeltaEは２つの画像を比較します
これらは Core Imageに組み込まれている― 200以上のフィルタのうちの単なるサンプリングです
これらの組み込みフィルタを使用しやすくするためにこのドキュメントにはパラメータの説明サンプル画像そしてサンプルコードが含まれています
これらのフィルタがニーズに合わない場合は CoreImage Metalを使用して簡単に独自のフィルタを作成できますそして今年も利用可能にしたセッションをご覧になることをお勧めします
画像処理とコンピュータビジョンにより画像をさまざまなカラースペースに入れることが可能だという点に注意してください
アプリケーションは― 従来のsRGBからワイドガモットP3 さらに現在対応しているHDRカラースペースまでさまざまなスペースで画像を受け取る可能性があります
アプリケーションはこうした多様なカラースペースに対応できるように準備しておく必要があり Core Imageを使用するとこの作業が非常に簡単になります Core Imageは自動的に入力を機能しているスペースに変換します非クランプリニア Bt.709プライマリなどです
ただしアルゴリズムでは別のカラースペースの画像が必要になる場合がありますその場合は次の操作を実行する必要があります CGColorSpaceから使用したいカラースペースの変数を取得しますそして image.matchedFromWorkingSpaceを呼び出します
スペースにアルゴリズムを適用してから image.matchedToWorkingSpaceを呼び出します行うべき作業はこれだけです
最後に Core Imageを使用してVisionからの出力を後処理する方法をご紹介しますこの１つの例では Core Imageを使用して Visionバーコード認識からバーコード画像を再生成します
コード内で必要なのはフィルタインスタンスを作成し barcodeDescriptorプロパティを Visionの認識プロパティに設定して最後に出力画像を取得するだけです結果はこのようになります
同様にアプリケーションでは Visionの顔認識に基づいてフィルタを適用できます
例えばこの機能を使用するとビネット効果を非常に簡単に使用できます
コードは実際には非常に単純です意識する必要があることは Visionの正規化座標系から Core Imageのデカルト座標系に変換することだけです
ビネットフィルタを作成したら合成を使用してそのビネットを画像の上に配置できます
Core Imageを使用してベクトルフィールドを使用することもできますこのベクトルフィールドについてはフランクが後ほど説明します
私からは以上ですこの後フランクがVisionについてご説明します
ありがとうデイビッドここでは Visionを使用して画像を理解する方法について説明します
タスク装置結果がありますねタスクはあなたがしたいことで装置は実際に作業をするものですそして結果とはあなたが手に入れたいものです
タスクはコンパイラである VNRequestsの中にあります VNDetectFaceRectanglesRequestと同様です装置は２つのうちの１つです VNImageRequestHandlerまたは VNSequenceRequestHandlerがありますそして手に入れる結果は VNObservationと呼ばれています結果は検出された長方形の VNRectangleObservationなど実行したタスクによって異なります
まず VNImageRequestHandlerに対してリクエストを実行しますそこから認識を取得します具体的な例を見てみましょう
テキストを読みたいので VNRecognizeTextRequestを使用します
次に画像を伴う VNImageRequestHandlerを作成します
その中でただのプレーンテキストである認識を取得します
それでは 2020年のVisionには新しく何があるのでしょうか
まず手と体の姿勢を使用します詳細については“Hand and Body Pose” セッションを参照してください
次に軌跡検出を見たことがあると思います詳細は “Exploring the Action and Vision Application”で参照してください
今日は輪郭検出とオプティカルフローに焦点を当てます
輪郭検出を使用すると画像内のエッジを検出できます
ご覧のように赤い線はこの図で見つけた輪郭を示しています
まず画像を用意し次にVNDetectContourRequestを作成します
画像のコントラストを設定してコントラストの一部がどのように出てくるかなどを強調できますこの明るい背景を使用するか暗い背景で実行するかどうかを切り替えることができますこれにより前景と背景が分離される可能性があります最後に最大の画像寸法を挿入してパフォーマンスと精度を比較できます
例えば― 低い解像度で見た場合でも輪郭は得られますがぴったりとエッジをなぞらない可能性がありますしかし低い解像度で実行できるためはるかに高速に実行されますそれとは対照的に後処理で実行する可能性がある高い解像度を使用するとより正確な輪郭が得られますがより多くの作業を行う必要があるため少し時間がかかります
それでは手に入れる認識を見てみましょう
ここでは円が描かれた２つの正方形の非常に単純な画像を表示します
VNContoursObservationを再び取得しています
topLevelContoursでは２つの長方形が確認できます
それらの中にある子輪郭は多重化された円です
次に実際にすべての輪郭を確認するために使用できるcontourCountを取得しますしかし例えばインデックスパスを使用する方がはるかに簡単ですご覧のようにこれらは互いに多重化されており図を横断できます
最後にnormalizedPathも取得しますこれはレンダリングに簡単に使用できる CGPathです
VNContourとは何でしょうかこの例では VNContourを取得しており親である最も外側の輪郭ですその内側には子輪郭が多重化されておりこれらは内側の輪郭です
輪郭にはインデックスパスがありますもちろんすべての子輪郭にもインデックスパスがありこれを再度使用して図を横断できます
次に pointCountで normalizedPointsを取得します normalizedPointsは実際に輪郭の基本であるのは発見した各線を描写しているからですピクセルを検出するだけでなくパスである輪郭を取得します
アスペクト比については次のスライドでご説明します
次にレンダリングする normalizedPathを指定します輪郭を操作する場合はいくつかの点に注意する必要がありますここにある画像を見てみましょう
この画像は1920×1080ピクセルで中央に円があります円の高さと幅はちょうど1080ピクセルですただし Visionでは正規化された座標空間を使用しますそのため画像の高さは1.0 幅は1.0ですしたがって円の高さは1.0になりますしかし幅は0.5625ですそのため検出した形状の寸法を考慮する場合は計算された元の画像のアスペクト比を確認する必要があります
ここで輪郭を解析すると非常に興味深いものになりますまたそのためのユーティリティもいくつか用意されています
VNGeometryUtilsはAPIを提供します例えば検出した輪郭を完全にカプセル化する最小の円であるboundingCircleがありますこれは輪郭を相互に比較するのに最適です
次に面積を計算しますそして境界も計算します輪郭を使用して次にできることは実際には単純化されています画像から輪郭を取得するとノイズが発生する傾向がありますここで例を見てみましょう
撮影した長方形がありますしかしそこには小さなねじれがあり実際には輪郭はこれらに沿っていますそのため角だけにすべてのポイントがあるわけではなく真ん中などにもあります
Epsilonを使用してポリゴンの近似を使用できるようになりました Epsilonのおかげでエッジの周囲にある小さなノイズ部分をすべて除去でき強力な輪郭エッジのみが実際に維持されます
ここで完璧な長方形が表示されます４つのポイントだけです図形を分析する必要がある場合は非常に簡単です単純に“４点あれば四角形だ”と言えばどんな形をしているのかを検出しました
ではこれらの使い方を具体的な例で見てみましょう
例えばパンチカードで作成された非常に古いコンピュータコードを復活させて世界を救うとします
パンチカードリーダーがないためパンチカードのくぼみを識別する必要があります
そこで識別方法について説明しているコンピュータビジョンのブログを見つけますしかしPythonで書かれていますもちろんプラットフォームにネイティブに取り込むことで最善の方法で実行できるようにします
Pythonコードのセクションができました理解できなくてもすぐに説明しますので安心してくださいコンセプトは常に同じでまず画像処理を行います
次に画像分析を行い
視覚化する必要がある結果を取得します Pythonを理解していない場合でも確認するのは最初の３行だけなのです実際にはいくつかのライブラリをインポートする必要があります Pythonには付属しておらず実際に含む必要があるサードパーティ製ライブラリです
ではネイティブで行うには？
画像処理部分の場合は画像をロードする必要がありますご存知の通りCGImageSourceを使用して UIImageを取得しCIImageにロードし名前を付けます次にCore Imageを使用して CIFiltersにより画像を処理する方法があります CIAbsoluteThresholdまたは他の多くの場合と同様です
ここで画像分析を行いますそのためには処理したCIImageから VNImageRequestHandlerを作成します次にVNDetectContourRequestのようなリクエストを実行します画像を前処理する必要さえないかもしれないところが利点です
そして結果を視覚化する場合も Core Imageを使用してこれを行うことができ実際に持っている画像の上に同じコンテキストで直接合成できます CIMeshGeneratorまたは CITextGeneratorを使用できます
CoreGraphicsまたはUIKitを使用して画像の上のレイヤにレンダリングすることもできます
ではすべてのスライドの後に実際のデモを見てみましょう
ここに活動領域を準備しました画像をロードしたことが確認できます
contourRequestを作成し
そしてただ実行しますご覧ください求めていたくぼみを含めすべての輪郭が表示されます 387個の輪郭が見つかりましたね望んだ数よりも少し多いかもしれませんそのためこれらの輪郭をすべて除外する必要があります少し準備をしてここに隠しておいたコードがあります一部を明らかにしましょうこのコードでは― 実際には輪郭が青色の背景であるというドメインの知識を使用します CIFilteringを使用して最初にすべてのノイズをぼかします
次にカラーコントロールを使用してコントラストを出しますその後フィルタ処理された画像を使用して輪郭検出を実行しますここでは最初に気にしていた 32個の輪郭だけが検出されます
それではスライドに戻りましょう
通常はデモで何をしたかを説明しますが実際には何をする必要がなかったかがより重要です
これはすべてOSの一部であるためサードパーティのパッケージをロードしませんでした私が使ったのはUIKitとCore Image そしてVisionだけです
パイプラインにいたので最適な処理パスを使用することにより画像パイプラインを離れませんでした
画像をマトリックスに変換しませんでしたメモリをすべて節約し計算コストも大幅に削減しました
これが輪郭検出です次にオプティカルフローに進みましょうオプティカルフローとは何でしょう？
２つのフレーム間の移動を解析したい時
従来はレジストレーションを使用していましたそれはかなり長い間Visionの一部でした画像全体の位置合わせを行いますここで例を見てみましょう
この２つの点をカメラの画像として捉えてからカメラを移動してみましょう
２つの点が右上に移動しました
レジストレーションにより画像がどの程度右上へ移動したかを示すことで２つの画像間の位置合わせを行うことができます
もう一方のオプティカルフローは異なります今年のVisionの新機能で XとYの間のピクセルごとのフローが得られます
この例でも２つの点があります
しかし移動して離れました
そのため画像レジストレーションではこの画像が正しく取得されませんしかしオプティカルフローを使用すれば各ピクセルがどのように移動したかが分かりますオプティカルフローの結果を見てみましょう
オプティカルフローから VNPixelBufferObservationを取得しますこれは浮動小数点画像です XとYの移動が交互に配置されています
このようなビデオがある場合これらの値を単独で見ているだけでは起こっていることを視覚化するのは困難でしょうそれは後のアルゴリズムでの処理を目的としているだけだからですしかしチェックアウトしたい場合は実際にCore Imageを使用して結果を視覚化できますデイビッドがセッションの前半に取り組んでいたようにこれを行う方法があります小さなカスタムカーネルを作成しましたこれですべての移動を確認できます移動の強さを示すカラーコーディングがあり小さな三角形が実際に移動の方向を示しています
実行の方法を簡単に説明しますカスタムフィルタを作成しましたカーネルをロードしスライドの添付ファイルで利用できるようにしますそして基本的にはこのカーネルを必要な矢印のサイズのパラメータで適用しフィルタとして実行することだけですそしてVisionコードでVNGenerateOpticalFlow リクエストを実行するだけです認識をpixelBufferに入力しこれをCIImageにラップすることができますその後それをフィルタに入力して出力画像を取得します
それでは本日お話しした内容をまとめましょう
コンピュータビジョンは難しくある必要はなくアプリケーションを強化します当社のネイティブAPIを使用すると迅速かつ簡単に導入できますこれらの機能を組み合わせることで興味深いものを作ることができます
皆さんのすばらしいアプリケーションと大きな革新を楽しみにしていますセッションにご参加いただきありがとうございます残りのWWDCもお楽しみください

import UIKit
import CoreImage
import CoreImage.CIFilterBuiltins
import Vision


public func drawContours(contoursObservation: VNContoursObservation, sourceImage: CGImage) -> UIImage {
	let size = CGSize(width: sourceImage.width, height: sourceImage.height)
	let renderer = UIGraphicsImageRenderer(size: size)
	
	let renderedImage = renderer.image { (context) in 
		
		let renderingContext = context.cgContext
		
    // flip the context
    let flipVertical = CGAffineTransform(a: 1, b: 0, c: 0, d: -1, tx: 0, ty: size.height)
    renderingContext.concatenate(flipVertical)
        
		// draw the original image
		renderingContext.draw(sourceImage, in: CGRect(x: 0, y: 0, width: size.width, height: size.height))
		
		renderingContext.scaleBy(x: size.width, y: size.height)
		renderingContext.setLineWidth(3.0 / CGFloat(size.width))
		let redUIColor = UIColor.red
		renderingContext.setStrokeColor(redUIColor.cgColor)
		renderingContext.addPath(contoursObservation.normalizedPath)
		renderingContext.strokePath()
	}
	
	return renderedImage;
}

let context = CIContext()
if let sourceImage = UIImage.init(named: "punchCard.jpg")
{
	var inputImage = CIImage.init(cgImage: sourceImage.cgImage!)
	
	let contourRequest = VNDetectContoursRequest.init()
    
// Uncomment the follwing section to preprocess the image
//	do {
//			let noiseReductionFilter = CIFilter.gaussianBlur()
//			noiseReductionFilter.radius = 1.5
//			noiseReductionFilter.inputImage = inputImage
//
//			let monochromeFilter = CIFilter.colorControls()
//			monochromeFilter.inputImage = noiseReductionFilter.outputImage!
//			monochromeFilter.contrast = 20.0
//			monochromeFilter.brightness = 8
//			monochromeFilter.saturation = 50
//
//			let filteredImage = monochromeFilter.outputImage!
//
//			inputImage = filteredImage
//		}
	
	let requestHandler = VNImageRequestHandler.init(ciImage: inputImage, options: [:])

	try requestHandler.perform([contourRequest])
	let contoursObservation = contourRequest.results?.first as! VNContoursObservation
	print(contoursObservation.contourCount)
	_ = drawContours(contoursObservation: contoursObservation, sourceImage: sourceImage.cgImage!)
} else {
	print("could not load image")
}

23:05 - Optical Flow Visualizer (CI kernel)

//
//  OpticalFlowVisualizer.cikernel
//  SampleVideoCompositionWithCIFilter
//


kernel vec4 flowView2(sampler image, float minLen, float maxLen, float size, float tipAngle)
{
	/// Determine the color by calculating the angle from the .xy vector
	///
	vec4 s = sample(image, samplerCoord(image));
	vec2 vector = s.rg - 0.5;
	float len = length(vector);
	float H = atan(vector.y,vector.x);
	// convert hue to a RGB color
	H *= 3.0/3.1415926; // now range [3,3)
	float i = floor(H);
	float f = H-i;
	float a = f;
	float d = 1.0 - a;
	vec4 c;
		 if (H<-3.0) c = vec4(0, 1, 1, 1);
	else if (H<-2.0) c = vec4(0, d, 1, 1);
	else if (H<-1.0) c = vec4(a, 0, 1, 1);
	else if (H<0.0)  c = vec4(1, 0, d, 1);
	else if (H<1.0)  c = vec4(1, a, 0, 1);
	else if (H<2.0)  c = vec4(d, 1, 0, 1);
	else if (H<3.0)  c = vec4(0, 1, a, 1);
	else             c = vec4(0, 1, 1, 1);
	// make the color darker if the .xy vector is shorter
	c.rgb *= clamp((len-minLen)/(maxLen-minLen), 0.0,1.0);
	/// Add arrow shapes based on the angle from the .xy vector
	///
	float tipAngleRadians = tipAngle * 3.1415/180.0;
	vec2 dc = destCoord(); // current coordinate
	vec2 dcm = floor((dc/size)+0.5)*size; // cell center coordinate
	vec2 delta = dcm - dc; // coordinate relative to center of cell
	// sample the .xy vector from the center of each cell
	vec4 sm = sample(image, samplerTransform(image, dcm));
	vector = sm.rg - 0.5;
	len = length(vector);
	H = atan(vector.y,vector.x);
	float rotx, k, sideOffset, sideAngle;
	// these are the three sides of the arrow
	rotx = delta.x*cos(H) - delta.y*sin(H);
	sideOffset = size*0.5*cos(tipAngleRadians);
	k = 1.0 - clamp(rotx-sideOffset, 0.0, 1.0);
	c.rgb *= k;
	sideAngle = (3.14159 - tipAngleRadians)/2.0;
	sideOffset = 0.5 * sin(tipAngleRadians / 2.0);
	rotx = delta.x*cos(H-sideAngle) - delta.y*sin(H-sideAngle);
	k = clamp(rotx+size*sideOffset, 0.0, 1.0);
	c.rgb *= k;
	rotx = delta.x*cos(H+sideAngle) - delta.y*sin(H+sideAngle);
	k = clamp(rotx+ size*sideOffset, 0.0, 1.0);
	c.rgb *= k;
	/// return the color premultiplied
	c *= s.a;
	return c;
}

23:26 - Optical Flow Visualizer (CIFilter code)

class OpticalFlowVisualizerFilter: CIFilter {
	var inputImage: CIImage?
	
	let callback: CIKernelROICallback = {
			(index, rect) in
				return rect
			}
	
	static var kernel: CIKernel = { () -> CIKernel in
		let url = Bundle.main.url(forResource: "OpticalFlowVisualizer",
								  withExtension: "ci.metallib")!
		let data = try! Data(contentsOf: url)
		
		return try! CIKernel(functionName: "flowView2",
								  fromMetalLibraryData: data)
	}()

	override var outputImage : CIImage? {
		get {
			guard let input = inputImage else {return nil}
			return OpticalFlowVisualizerFilter.kernel.apply(extent: input.extent, roiCallback: callback, arguments: [input, 0.0, 100.0, 10.0, 30.0])
		}
	}
}

23:42 - Optical Flow Visualizer (Vision code)

var requestHandler = VNSequenceRequestHandler()
            var previousImage:CIImage?
			if (self.previousImage == nil) 
			{
				self.previousImage = request.sourceImage
			}
			let visionRequest = VNGenerateOpticalFlowRequest(targetedCIImage: source, options: [:])
			
			do {
				try self.requestHandler.perform([visionRequest], on: self.previousImage!)
				if let pixelBufferObservation = visionRequest.results?.first as? VNPixelBufferObservation
				{
					source = CIImage(cvImageBuffer: pixelBufferObservation.pixelBuffer)
				}
			} catch {
				print(error)
			}
			// store the previous image
			self.previousImage = request.sourceImage
			
			let ciFilter = OpticalFlowVisualizerFilter()
			ciFilter.inputImage = source
			let output = ciFilter.outputImage

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。

クエリの送信中にエラーが発生しました。インターネット接続を確認して、もう一度お試しください。

リソース

関連ビデオ

WWDC21

WWDC20

WWDC19