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

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

弊社取り扱いの 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

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 メソッドを用意して、ビデオオブジェクトを追加する以下のコードを記載します。

func addVideoNode() {
    // videoNode を mp4 ファイルで初期化
    videoNode = ARVideoNode.init(bundledFile: "waves.mp4")

    // 拡大率を指定
    let scaleRatio = Float(imageTrackable!.width) / Float(videoNode!.videoTexture.width)
    videoNode?.scale(byUniform: scaleRatio)

    // 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 のビデオが終了したら消えてしまうのをリセットさせてから再生して回避しています。
    videoNode?.reset()
    videoNode?.play()
    imageTrackable?.world.children[2].visible = true
}

コメントにもありますが、reset() してから play() しないと、ビデオが終わったらプレイヤーごと消えてしまうので、再度再生させるという手法を取っています。

もう少し調べてみたら、動画をループ再生できるかもしれませんが、とりあえず。。

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

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

この後は

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

Kudan AR SDK エントリー一覧

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

をご覧ください。

以上です。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする