Kudan AR SDK で AR iOS アプリを作ってみよう〜マーカー上に動画を表示

2018.08.30

こんにちは。エクセルソフトの田淵です。

弊社取り扱いの 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 が変化が小さくとても見づらいので、ロイヤリティフリーの こんな動画 を使うのも良いかもしれません。以下のような感じで分かりやすく表示できます。

https://platform.twitter.com/widgets.js
platform.twitter.com

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
}

以下のように表示されれば成功です。

https://platform.twitter.com/widgets.js
platform.twitter.com

この後は

次は遂にマーカーレスにチャレンジしてみたいと思います。

Kudan AR SDK エントリー一覧

Kudan AR SDK チュートリアル記事まとめ | エクセルソフト ブログ

をご覧ください。

以上です。

タイトルとURLをコピーしました