この記事は公開から 1 年以上経過しています。

Kudan AR SDK で AR 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 を追加しておきます。

コードの編集

ViewController.swift でそのまま作業を続けます。

最初に複数のメソッドからアクセスされるクラス変数 var videoNode:ARVideoNode?Action の下、setupContent の上に定義します。

addVideoNode メソッドを用意して、ビデオオブジェクトを追加する以下のコードを記載します。

2019/12/25 追記

ビデオのくり返しのプロパティがあったので 最近の更新 でコードを追加しています。ハイライトの部分です。

setupContent にも初期化する上記のメソッドを追加します。次のようになります。

最後に、用意しておいたアクション videoButton_TouchUpInside 内に、次のコードを追加します。

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

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

この後は

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

Kudan AR SDK エントリー一覧

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

をご覧ください。

以上です。

シェアする

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

フォローする