こんにちは。エクセルソフトの田淵です。
弊社取り扱いの Kudan AR SDK のエントリーです。
SDK のダウンロードは こちら からお申込みください。SDK を使った開発と、個人開発者のリリースは無料でご利用いただけます。企業の方は有料になりますので、@ytabuchi までご連絡ください。
前回の iOS のエントリー では、マーカーの上に 3D モデルを表示しました。
今回は動画を表示してみたいと思います。
現時点でのサンプルコードは ytabuchi の Github にアップしてあります。この後もコミット追加していくのでスナップショットです。
Asset の準備
ダウンロードした assets.zip
の中に waves.mp4
がありますので、それを Finder から Xcode の Assets
フォルダにドラッグ&ドロップします。
プロジェクトにコピーして、Type が「Default – MPEG-4 Movie」になっていることを確認してください。
これでコードから参照できる状態になっています。
waves.mp4
が 25MB ほどあるので、GitHub にアップする際には注意してください。また、このwaves.mp4
が変化が小さくとても見づらいので、ロイヤリティフリーの こんな動画 を使うのも良いかもしれません。以下のような感じで分かりやすく表示できます。
わかりやすい…w #kudan pic.twitter.com/qC7jJxSJau
— 田淵 義人@エクセルソフト (@ytabuchi) 2018年8月30日
UI の設定
Storyboard を開き、「Video」のボタンを追加し、Constraints も設定しましょう。私は以下のような感じにしています。
そのまま Outlet と Action を追加しておきます。
@IBOutlet weak var videoButton: UIButton! @IBAction func videoButton_TouchUpInside(_ sender: Any) { }
コードの編集
ViewController.swift
でそのまま作業を続けます。
最初に複数のメソッドからアクセスされるクラス変数 var videoNode:ARVideoNode?
を Action
の下、setupContent
の上に定義します。
addVideoNode
メソッドを用意して、ビデオオブジェクトを追加する以下のコードを記載します。
2019/12/25 追記
ビデオのくり返しのプロパティがあったので 最近の更新 でコードを追加しています。ハイライトの部分です。
func addVideoNode() { // videoNode を mp4 ファイルで初期化 videoNode = ARVideoNode.init(bundledFile: "waves.mp4") // 拡大率を指定 let scaleRatio = Float(imageTrackable!.width) / Float(videoNode!.videoTexture.width) videoNode?.scale(byUniform: scaleRatio) // ビデオ終了後 2秒後にくり返し videoNode?.videoTexture.resetThreshold = 2 videoNode?.reset() videoNode?.play() // ARImageTrackable に videoNode を追加 imageTrackable?.world.addChild(videoNode) videoNode?.visible = false }
setupContent
にも初期化する上記のメソッドを追加します。次のようになります。
override func setupContent() { setupImageTrackable() addImageNode() addModelNode() addVideoNode() }
最後に、用意しておいたアクション videoButton_TouchUpInside
内に、次のコードを追加します。
@IBAction func videoButton_TouchUpInside(_ sender: Any) { clearAllNodes() videoNode?.reset() videoNode?.play() imageTrackable?.world.children[2].visible = true }
以下のように表示されれば成功です。
iOSでマーカー上にmp4を表示 #Kudan pic.twitter.com/0RVZlN51z9
— 田淵 義人@エクセルソフト (@ytabuchi) 2018年8月30日
この後は
次は遂にマーカーレスにチャレンジしてみたいと思います。
Kudan AR SDK エントリー一覧
Kudan AR SDK チュートリアル記事まとめ | エクセルソフト ブログ
をご覧ください。
以上です。