Recomendados
Más contenido relacionado
La actualidad más candente
Destacado
Destacado (14)
Similar a RICOH THETA x IoT デベロッパーズ コンテスト クラウドAPIセミナー
Similar a RICOH THETA x IoT デベロッパーズ コンテスト クラウドAPIセミナー (20)
Último
Último (11)
RICOH THETA x IoT デベロッパーズ コンテスト クラウドAPIセミナー
- 1. RICOH THETA x IoT デベロッパーズ コンテスト クラウドAPI セミナー 株式会社リコー 新規事業開発本部 SV技術開発センター 2016年5月18日
- 2. アジェンダ 1. クラウドAPIの紹介 2. 機能紹介 その１ ～ビデオコミュニケーション～ 3. 機能紹介 その２ ～フォト＆メディアストレージ～ 4. Q&A 5. 提供予定の機能の紹介 2
- 3. 1. クラウドAPIの紹介 3 株式会社リコー 新規事業開発本部 SV技術開発センター プラットフォーム開発室 高桑 寿一
- 4. 4 質問です
- 8. 事前準備 その１ ～クライアント クレデンシャルの取得～ 手順１．コンテストサイトから必要事項を入力してエントリー！ 手順２．確認メールに記載の手順で手続き 手順３．コンテストの登録完了メールを受信 手順４．その後、API利用案内メールに記載の手順でダウンロード 8 http://contest.theta360.com/
- 9. 事前準備 その２ ～ユーザーアカウントの取得～ ステップ１）RICOH Unified Communication Systemの管理者向けページを開く 9 https://beta2.ucs.ricoh.com/dashboard/login ステップ４）確認メールのURLをクリックして完了 ※メールアドレスをユーザーIDとして利用 ステップ３）フォームを入力して「Send」をクリック ステップ２）リンクをクリック ※日本語の場合は以下
- 10. 10 ２．機能紹介 その１ ～ビデオコミュニケーション～ 株式会社リコー 新規事業開発本部 SV技術開発センター プラットフォーム開発室 相川 智慎
- 11. 概要 2台のPC間でビデオチャット(映像のみ)を行う WebRTC(Webブラウザの機能)を利用 ストリーミング機能紹介 11
- 12. 構成 認証サーバー/BOSH(Bidirectional-streams Over Synchronous HTTP)サーバー JavaScript/HTML ストリーミング機能紹介 ※JavaScriptは、Oracle Corporation及びその子会社、関連会社の米国及びその他の国おける登録商標です。 12
- 13. サンプルを取得 クライアント クレデンシャルを設定 ビルド 実行 https://github.com/ricohapi/video-streaming-sample-app 利用手順 $ gulp run $ git clone https://github.com/ricohapi/video-streaming-sample-app $ cd video-streaming-sample-app $ cp samples/config_template.js samples/config.js $ vi samples/config.js $ npm install $ gulp build 13
- 14. シグナリングサーバーをお使い頂けます WebRTC(over BOSH) ユーザーIDは1つでOK abc@example.com+mac abc@example.com+theta theta360.comライクなビューサンプル WebGL 是非面白い使い方を考えてみてください！ 要望も歓迎です まとめ 14
- 15. 15 ３．機能紹介 その２ ～フォト＆メディアストレージ～ 株式会社リコー 新規事業開発本部 SV技術開発センター プラットフォーム開発室 細野 英司
- 16. 主なストレージ関連API ストレージ機能 REST API SDK API 画像アップロード POST /media .upload() 保管済み画像一覧取得 GET /media .list() 画像情報取得 GET /media/{id} .info() 画像データ取得 GET /media/{id}/content .download() 画像削除 DELETE /media/{id} .delete() サービスURL: https://mss.ricohapi.com/v1/media 16 認証・認可機能 REST API SDK API ユーザー認証 POST /auth/token .connect() サービスURL: https://auth.beta2.ucs.ricoh.com/auth/token
- 18. 特長1. クラウド対応 リコークラウド Media Storageサービスにて保管されている画 像をスライドショー 特長2. マルチアカウント ユーザーアカウントの切り替えが可能 特長3. マルチプラットフォーム HTML5で作成 - Mac OS, Windows, iOS, Androidで動作可能 18 デモアプリ概略 ブラウザでアプリを起動してみましょう ※ Mac OSは、Apple Inc.の商標です。 ※ Windowsは、米国 Microsoft Corporation の、米国およびその他の国における登録商標または商標です。 ※ Windowsの正式名称は、Microsoft Windows Operating Systemです。 ※ iOSは、米国およびその他の国における商標またはシスコの登録商標であり、ライセンスのもとに使用されます。 ※ Androidは、Google Inc.の商標です。
- 19. 今回のデモのシステム全体構成 19 My PC Web Server http://localhost RICOH Cloud Service CSS HTML JavaScript Web Browser Cloud Media Storage Server https://mss.ricohapi.com Photos by User A Photos by User B Photos by User C Ricoh API Auth Server CSS HTML JavaScript 1. アプリのコンテンツを Web Serverから配信 2. ブラウザでアプリのURLを開くと コンテンツが読み込まれてアプリが起動 3. JavaScript版SDKで RICOHクラウドサービスと連携 ※JavaScriptは、Oracle Corporation及びその子会社、関連会社の米国及びその他の国おける登録商標です。
- 21. ソースコードの構成 21 ファイル 内容 コーディング行数 index.html HTMLファイル 41ライン ric-sample.css スタイルシート 25ライン ric-sample.js JavaScriptファイル 53ライン ricohapi-mstorage.js Media Storage SDK (GitHubにて配布) 合計 約100行！(119ライン) ※空行、コメント、ログ出力はカウント対象外 ブラウザでソースコードと動作を確認してみましょう ※JavaScriptは、Oracle Corporation及びその子会社、関連会社の米国及びその他の国おける登録商標です。
- 22. プログラムの処理フロー Start/Pause/Resumeボタンのタップで、ric-sample.jsの イベントハンドラー関数を呼び出し Startの場合: クラウド保管済みの画像一覧を取得 タイマーを開始 Pauseの場合: タイマーを停止 Resumeの場合: タイマーを開始 タイマー処理にて、一定間隔でクラウドから画像を取得して 表示 22
- 24. クラウド対応のポイント1 ポイント1 クラウドに接続する前に、SDKのAPIを介して、認証情報を セットしておきます。 あとはSDKにお任せ！クラウドサーバーとの通信時に必要とな るセキュリティ認証手続きをSDKが代行します。 ※認証情報: Client ID/Secret, User ID/Password 24
- 25. クラウド対応のポイント1（続き） 25 $(document).ready(function() { var authClient = new AuthClient("koTjKwBm…", "rWOwyT5d…"), mediaStorage = null; … $("#ric-start-stop").on("click", function() { var buttonText = $(this).text(); if (buttonText == "Start") { var userID = $("#ric-account").val(); authClient.setResourceOwnerCreds(userID, USER_PASSWORD[userID]); mediaStorage = new MStorage(authClient); mediaStorage.connect(); … } … }); }); 1. アプリ起動時に Client ID/Secretを指定 2. Startボタンが押されたら User ID/Passwordを指定 3. ストレージAPIの使用開始時に 認証情報をセット ストレージAPIの使用時には SDKが自動的にセキュリティ認証してくれる ブラウザで実際の動作を確認してみましょう
- 26. クラウド対応のポイント2 ポイント2 クラウドに保管されている画像データは、セキュリティ上問題 となるため、<img>タグから直接参照することはできません。 クラウドからセキュアに画像データを取得し、そのデータを Blob形式に変換する手法がお勧めです。 Blob形式の画像データは、それを格納したオブジェクトURLを 生成することで<img>タグからの参照が可能です。 ※Blob: Binary Large OBject データの取得と変換はSDKにお任せ！SDKは、Blob形式によ る画像データの取得をサポートしています。 26
- 27. クラウド対応のポイント2（続き） function slideshow() { var mediaID = photoList[photoIndex++].id; if (photoIndex == photoList.length) photoIndex = 0; mediaStorage.download(mediaID, "blob") .then(function(blob) { var imageURL = URL.createObjectURL(blob); $("#ric-view") .one("load", function() { URL.revokeObjectURL(imageURL); }) .attr("src", imageURL); }); … } 27 1. Blob形式を指定して 画像データを取得 3. <img>タグのsrc属性に オブジェクトURLを設定 2. Blobデータが格納された オブジェクトURLを生成 クラウドの画像が表示される ブラウザで実際の動作を確認してみましょう
- 28. 補足 ブラウザ用SDKへの変換について JavaScript用のMedia Storage SDKはNode.js用パッケージ として提供されているため、ブラウザ環境で使用するためには ソースコードの変換（Browserify）が必要です。 変換済みのソースコードは、GitHubリポジトリにて配布を予定 しています。 ブラウザ用Media Storage SDK: https://github.com/ricohapi/media-storage-js/tree/master/build ※近日公開予定 28※JavaScriptは、Oracle Corporation及びその子会社、関連会社の米国及びその他の国おける登録商標です。
- 29. 29 4. Q&A
- 30. 30 5. 提供予定機能のご紹介
- 32. RICOH THETA S 撮影命令 リモートコントロール機能のイメージ 32 MQTT リコークラウドAPIシングルボード コンピュータ RICOH THETA S シングルボード コンピュータ 撮影命令 撮影 MQTT 例１）撮影 画像取得命令 MQTT リコークラウドAPIシングルボード コンピュータ シングルボード コンピュータ 画像取得命令 画像取得 MQTT 例２）画像取得 画像
- 34. 34 Enjoy RICOH THETA and RICOH Cloud API!!