Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
Similar to RICOH THETA x IoT デベロッパーズ コンテスト 第2回クラウドAPIセミナー
Similar to RICOH THETA x IoT デベロッパーズ コンテスト 第2回クラウドAPIセミナー (20)
Recently uploaded
Recently uploaded (8)
RICOH THETA x IoT デベロッパーズ コンテスト 第2回クラウドAPIセミナー
- 1. 1 RICOH THETA x IoT デベロッパーズ コンテスト 第二回 クラウドAPI セミナー 株式会社リコー 新規事業開発本部 SV事業開発センター 2016年6月29日
- 2. 2 アジェンダ 1. リコークラウドAPIの紹介 2. 機能紹介 その１ ～画像処理～ 3. 機能紹介 その２ ～フォト＆メディアストレージ～ 4. 機能紹介 その３ ～ビデオコミュニケーション～ 5. 機能紹介 その４ ～リモートコントロール～ 6. Q&A
- 3. 3 セミナー資料について 本セミナーの資料は以下で公開中 http://www.slideshare.net/contest-theta360 第一回目のセミナーの資料は以下で公開 日本語版 スライド http://www.slideshare.net/contest-theta360/ricoh-theta-x-iot-api ビデオ http://ch.nicovideo.jp/contest-theta360 英語版（English） スライド http://www.slideshare.net/contest-theta360/ricoh-theta-x-iot-developers- contest-cloud-api-seminar ビデオ 近日公開予定
- 5. 5 リコークラウドAPI PC、スマートフォン／タブレット、シングルボード コンピュータで動くプログラムから利用可能なインターフェース リコーが提供する以下の機能を持つ 1. 画像処理 2. ビデオコミュニケーション 3. フォト＆メディアストレージ 4. リモートコントロール 5. 認証・認可 無償ベータ版 リコークラウドAPI シングルボード コンピュータ PC スマートフォン／ タブレット ビデオ コミュニ ケーション フォト＆ メディア ストレージ 認証 認可 リモート コントロール 画像処理
- 6. 6 開発者が利用できるリソース 開発者は以下を利用可能 1. リコークラウドAPI 2. SDK 3. サンプルプログラム githubに公開 https://github.com/ricohapi/ 開発者 SDK サンプル プログラム リコークラウドAPI ビデオ コミュニ ケーション フォト＆ メディア ストレージ 認証 認可 リモート コントロール 画像処理
- 7. 7 利用に必要なもの リコークラウドAPIの利用には以下が必要 1. クライアントクレデンシャル ※利用アプリを識別するもの クライアントID クライアントシークレット 2. ユーザーアカウント ※利用ユーザーを識別するもの ユーザーID パスワード 取得方法は前回のセミナースライドの8~9ページ目を参照 日本語版 http://www.slideshare.net/contest-theta360/ricoh-theta-x-iot-api 英語版 http://www.slideshare.net/contest-theta360/ricoh-theta-x-iot-developers- contest-cloud-api-seminar
- 9. 9 概要 Media Storageに保存した画像に対して、画像処理（フィル ター）をかけることができる 処理済み画像は、別画像としてMedia Storageに格納される Ricoh Cloud API 画像保存 (Media Storage Service) 画像処理 (Image Processing Service) New!
- 10. 10 API仕様 – 画像処理(フィルター) REST API POST https://ips.ricohapi.com/v1/filter { "version": “2016-06-24", "source": { "mss_id": "a39jcbc5-053c-4873-a7c0-0b20c3948472" }, "filter": [ { "command": "resize", "parameters": { "width": 256, "height": 128 } }, { "command": "grayscale" }, { "command": "equalize" } ] } リクエスト Media Storage Service上のid フィルターの指定 1. ヒストグラム平坦補正 2. グレースケール 3. 画像サイズ縮小
- 11. 11 API仕様 – 画像処理(フィルター) REST API POST https://ips.ricohapi.com/v1/filter { "id":"a7ed2e55-9fed-414a-b52f-61fa6a9c93b0", "content_type":"image/jpeg", "bytes": 3944775, "created_at":"2016-02-24T00:56:46Z" } レスポンス 処理済み画像の格納先のId
- 12. 12 ヒストグラム平坦化 画像にメリハリをつけて鮮明にすることができる 想定する利用シーン： 暗くて見えない顔を明るくする オリジナル画像 ヒストグラム平坦化実施後の画像
- 13. 13 グレースケール 画像を白黒にすることができる 想定する利用シーン： 違った雰囲気を楽しめる オリジナル画像 グレースケール実施後
- 14. 14 画像サイズの縮小 画像サイズを小さく、処理の負担軽くすることができる 想定する利用シーン： サムネイル、タイムラプスの再生 オリジナル画像 サイズ変更後の画像 縦横比を変えなければ、 ビューアで再生可能！ 3.9 MB 1.21 MB ½ * ½ に変換
- 19. 19 クラウド対応 × マルチユーザー × マルチプラットフォーム 全部入り・出し惜しみなしの スライドショーアプリ 第一回セミナーでは・・・
- 20. 20 第一回セミナーでは・・・ そんなアプリが HTML, CSS, JavaScript 合計で 約100ライン (※119ライン) アナタにも つくれます ※JavaScriptは、Oracle Corporation及びその子会社、関連会社の米国及びその他の国おける登録商標です。
- 22. 22 新機能！ 待望の新機能！
- 24. 24 ユーザーメタ＆検索機能 クラウドの画像にメタデータを付加す ることができる メタデータは、{ “<key>”: “<value>” } 形式のペア文字列 1画像あたり最大10個まで メタデータをキーにして画像を検索す ることができる
- 26. 26 ユーザーメタ＆検索機能 { “<key>”: “<value>” } { “favorite”: “marked” } { “liked”: “yes” } { “stars”: “3” } { “comment”: “Trip to Maldives” }
- 27. 27 ユーザーメタ＆検索機能 API/SDK 機能 REST API SDKメソッド 画像一覧取得／ 画像検索 GET /media POST /media/search .list() メタデータ取得 GET /media/{id}/meta GET /media/{id}/meta/user GET /media/{id}/meta/user/{key} .meta() ユーザーメタ追加 PUT /media/{id}/meta/user/{key} .addMeta() ユーザーメタ削除 DELETE /media/{id}/meta/user/{key} .removeMeta() サービスURL: https://mss.ricohapi.com/v1/media SDKが用意されているので アプリ開発も楽勝！
- 31. 31 今回のアプリも HTML, CSS, JavaScript 合計で 約100ライン (※126ライン) アナタにだって つくれます デモアプリ ※JavaScriptは、Oracle Corporation及びその子会社、関連会社の米国及びその他の国おける登録商標です。
- 32. 32 My PC Web Server RICOH Cloud Service CSS HTML JavaScript Web Browser Media Storage Server Auth Server CSS HTML JavaScript 今回のデモのシステム全体構成 2. ブラウザでアプリの コンテンツを起動 3. SDKで クラウドと連携 1. アプリのコンテンツを ローカルホストから配信※JavaScriptは、Oracle Corporation及びその子会社、 関連会社の米国及びその他の国おける登録商標です。
- 35. 35 ソースコード説明1 $("#ric-toggle-favorite").on("click", function() { if (activeMediaID == null) return; $(this).toggleClass("ui-btn-active"); if ($(this).hasClass("ui-btn-active")) { mediaStorage.addMeta(activeMediaID, { “user.favorite" : "marked" }); } else { mediaStorage.removeMeta(activeMediaID, "user.favorite"); } }) お気に入りボタンが押されたら ユーザーメタを追加／削除
- 36. 36 ソースコード説明2 function slideshow() { … mediaStorage.meta(activeMediaID, "user") .then(function(meta) { $("#ric-toggle-favorite") .toggleClass("ui-btn-active", meta.favorite == "marked"); return mediaStorage.download(activeMediaID, "blob"); }) .then(function(blob) { var imageURL = URL.createObjectURL(blob); $("#ric-view") .one("load", function() { URL.revokeObjectURL(imageURL); }) .attr("src", imageURL); }); 画像を更新するときに ユーザーメタの設定状況を確認
- 37. 37 $("#ric-start-stop").on("click", function() { … var filterText = $("#ric-filter").val(); mediaStorage.connect() .then(function() { var options = filterText == "My Favorites" ? { filter: { "meta.user.favorite": "marked" } } : null; return mediaStorage.list(options); }) .then(function(list) { photoList = list.media; photoIndex = 0; slideshowTimer = setTimeout(slideshow, 0); }); … } 画像一覧取得時のフィルターに 検索条件を設定 ソースコード説明3
- 41. 41 目次 サンプルアプリの概要 サンプルアプリのデモ サンプルアプリの構成 まとめ
- 42. 42 ビデオコミュニケーションのサンプル Githubでサンプルを公開しています https://github.com/ricohapi/video-streaming-sample-app/ (4/1公開時から構成を変更しております。詳しい使い方はREADMEをご参照ください) サンプル①：PC間でビデオチャット サンプル②：シングルボードコンピューターからビデオ配信 ※シングルボードコンピューター：数千円の小型のコンピューター New
- 43. 43 サンプル①の概要 PC間でビデオチャット WebRTC(ブラウザの機能)を使用 video stream signaling signaling RICOH
- 44. 44 サンプル②の概要 シングルボードコンピューターからビデオ配信 WebRTC(ブラウザの機能)を使用 signaling signaling RICOH video stream
- 45. 45 サンプル②の手順 配信側 1. あらかじめスクリプトのビルドや設定などを行っておく https://github.com/ricohapi/video-streaming-sample-app/tree/master/samples/oneway-broadcast 2. RICOH THETA Sをライブストリーミングモードで起動して接続 (撮影モードボタンを押しながら起動） 3. スクリプトを実行すると待機状態となり準備完了 視聴側 1. あらかじめスクリプトのビルドや設定などを行っておく https://github.com/ricohapi/video-streaming-sample-app/tree/master/samples/oneway-watch 2. ブラウザでHTMLページを開く 3. ログインして、配信側のIDに接続すると視聴開始 4. 終了時はログオフボタンを押す
- 47. 47 サンプルアプリ②の構成 signaling signaling RICOH video stream Auth Signaling (XMPP over BOSH) Web Browser OSS (WebRTC, BOSH) Sample.js Web Browser (No GUI) OSS (WebRTC, BOSH) Sample.js Selenium WebDriver
- 48. 48 まとめ リコーのシグナリングサーバーとWebRTCを利用して RICOH THETA Sのビデオストリーミングが可能 ビデオの配信はシングルボードコンピューターで可能 ビデオの視聴はPCやAndroidスマートフォンなどで可能 複数台からの視聴も可能
- 50. 50 目次 1. リモートコントロールサービス概要 リモートコントロールとは 提供システムの概要 利用手順(python client) 2. ライブラリとサンプルプログラムの紹介 主要なリモートコントロールメソッド サンプルプログラムの解説と使い方 OSCとサンプルライブラリの紹介 サンプルプログラムの実行 メディアストレージサービスとの連携例(参考資料)
- 51. 51 リモートコントロールサービス概要 リコークラウドAPI RICOH TEHTA S 撮影 撮影指示 メディアストレージ リモートコントロール 認証サービス RICOH Cloud Service 転送 メッセージング リモートコントロールとは 無線LAN接続されているRICOH THETA Sを遠隔から操作するためのライブラリ IoT向け軽量メッセージングプロトコルであるMQTTを利用している リコークラウドが提供する認証サービスと合わせて使うため安全・簡単に利用で きます ビデオコミュニケーション New
- 52. 52 リモートコントロールサービス概要 提供システムの概要 対応言語としては、pythonとJavascriptを提供 通信路はTLSによる暗号化(MQTT over TLS)をサポート Javascriptは、通信プロトコルにwebsocket(MQTT over WSS)もサポート 同一ユーザーＩＤ間のみでのメッセージングをサポート(アクセス制御) メッセージの管理・配信 RICOH TEHTA S リモートコントロール MQTTS(WSS) MQTTS(WSS) MQTTS(WSS) OSC デバイス コントロール ライブラリ メッセージング ライブラリ
- 53. 53 利用手順 認証ライブラリとリモートコントロールアプリのインストール 中間証明書のダウンロード クライアントクレデンシャル、ユーザーアカウント、証明書を設定 参照 https://github.com/ricohapi/camera-control-sample-py $ pip install --upgrade git+https://github.com/ricohapi/auth-py.git $ git clone https://github.com/ricohapi/camera-control-sample-py.git $ cd camera-control-sample-py $ pip install . (pip install –e .) $ cd samples $ mv config_template.json config.json $ edit config.json $ wget –O devcon.crt https://support.comodo.com/index.php?/Knowledgebase/Article/GetAttachment/991/1070566 ウェブブラウザでアクセスし取得していただいても構いません https://support.comodo.com/index.php?/Knowledgebase/Article/GetAttachment/991/1070566
- 54. 54 目次 1. リモートコントロールサービス概要 リモートコントロールとは 提供システムの概要 利用手順(python client) 2. ライブラリとサンプルプログラムの紹介 主要なリモートコントロールメソッド サンプルプログラムの解説と使い方 OSCとサンプルライブラリの紹介 サンプルプログラムの実行 メディアストレージサービスとの連携例(参考)
- 55. 55 ライブラリとサンプルプログラムの紹介 クラス コンストラクタ Client(client_id, client_secret) 概要 クラスメソッド サーバー接続 .connect(user_id, user_pass, ca_certs) 撮影待機 .listen(device_id, func=None, fargs=None) 撮影指示 .shoot(device_id, param=None) サーバー接続解除 .disconnect() 撮影待機解除 .unlisten() メッセージ購読 .subscribe(topic, func=None, fargs=None) メッセージ発行 .publish(topic, message=None) connect() connect() shoot(theta) listen(theta) RICOH Cloud Service 撮影者サイド デバイスサイド 主要なリモートコントロールメソッド
- 56. 56 サンプルプログラムの解説と使い方(1/3) Clientクラスのインポート 撮影者サイドのコード デバイスサイドのコード with Client(client_id, client_secret) as camera: camera.connect(user_id, user_pass, ca_certs) camera.listen(dev_id, func=on_receive, fargs=('callback_args',)) wait_key() with Client(client_id, client_secret) as camera: camera.connect(user_id, user_pass, ca_certs) camera.shoot(dev_id, param=None) from ricohapi.cameractl.client import Client ポイント 撮影者サイドと、デバイスサイドとで同一のユーザID/パスワードを指定する 指定したdev_idに対し指示を伝達するので、予め送受信間でdev_idを決めておく 撮影指示受信時に実行するコールバック関数を指定し、撮影処理を実装する 撮影指示送信前に、デバイスサイドで該当デバイスをlisten()しておく デバイスIDとして使える文字は 大小英数字と_(アンダースコア)で 32文字までとなります コールバック関数を指定
- 57. 57 実行例1 撮影者サイド デバイスサイド 実行例2 撮影者サイド デバイスサイド $ python remocon.py –d THETA start connecting… hit enter key to quit. device : THETA command : shoot rcv_param: None fun_param: callback_args サンプルプログラムの解説と使い方(2/3) $ python remocon.py –d THETA shoot 撮影者サイドから送信されたパラメータ デバイスサイドで指定している引数 $ python remocon.py –d THETA –p '{"_shutterSpeed": 0.01, "_iso": 200}' shoot device : THETA command : shoot rcv_param: {u'_shutterSpeed': 0.01, u'_iso': 200} fun_param: callback_args
- 58. 58 撮影指示受信時のコールバック関数 サンプルプログラムの解説と使い方(3/3) def on_receive(devid, command, rcv_param, fun_param): ポイント デバイスサイドは撮影者サイドから送信されるパラメータに応じた適切な処理を コールバック関数として実装する コールバック関数は必須パラメータと、開発者が追加するパラメータから成る サンプルプログラムの使い方に関して start/shootコマンドでサーバーへの接続、撮影待機、撮影指示を行う -dオプションでデバイスＩＤを指定する -pオプションで伝達パラメータを指定する。指定できる文字列はJSON文字列フォーマット with Client(client_id, client_secret) as camera: camera.connect(user_id, user_pass, ca_certs) camera.listen(dev_id, func=on_receive, fargs=('callback_args',)) wait_key() [必須パラメータ] システムが値をセット [オプションパラメータ] タプルで指定した個数分指定する
- 59. 59 Open Spherical Camera API version 1.0 RICOH THETA Sはgoogle社のOSCに準拠しています(独自拡張あり) OSCを使うとRICOH THETA S等の球体カメラを制御できます OSCを利用してRICOH THETA Sをコントロールするサンプルも同梱してます クラスメソッド 概要 ThetaV2() インスタンス生成 .get_info() カメラに関する基本情報取得する .get_state() カメラの状態を取得する .check_for_updates() Stateの状態変化を確認する .get_command_status() コマンドの実行状況を取得する .get_options() 指定プロパティのプロパティ値、サポート仕様を取得する .set_options() 指定プロパティに値を設定する .take_picture() 静止画撮影を実行する .take_picture_to_file() 静止画撮影を実行し、ホストＰＣへ撮影画像を転送する .get_image() 指定した画像をホストＰＣへ転送する .delete() 指定した画像を削除する なお、RICOH THETA API v2の詳細は https://developers.theta360.com/ja/docs/v2/api_reference/
- 60. 60 サンプルプログラムの実行 概要 簡単のため1台のPCで撮影者サイドとデバイスサイドを実行します デバイスサイドはNICが２つ必要で、１つはRICOH THETA Sと無線接続します RICOH THETA Sとの無線LAN接続は、底面のシリアルナンバーがSSIDが初期パ スワードとなります $ $ INTERNET デバイスサイド撮影者サイド 参考： インターネットに接続できない場合は、イ ンターネットに接続している側のNICの設 定を優先するようにしてみてください (メトリック値の設定)
- 61. 61 メディアストレージサービスとの連携例 メディアストレージ メッセージング メッセージの管理・配信 UPDL メディアデータの管理 2.1. 3. 4. 5. 6.7. 8. 目的 遠隔地から撮影した画像を取得したい シーケンス概要 1. 撮影指示、撮影ID送信 2. 撮影指示受信 3. 撮影コマンド発行 4. 撮影画像転送 5. 撮影画像アップロード、メディアID取得 6. 撮影IDを送り先としてメディアIDを送信 7. メディアIDを受信 8. 撮影画像ダウンロード ポイント 画像データはメディアストレージにアップ ロードすることで画像の管理はクラウド側 で行う 適切なサービスを組み合わせることでアプ リケーションを簡単に作成できる (参考資料)
- 62. 62 with Client(client_id, client_secret) as camera: aclient = AuthClient(client_id, client_secret) aclient.set_resource_owner_creds(user_id, user_pass) mstorage = MediaStorage(aclient) mstorage.connect() uploader = media_uploader(mstorage) next(uploader) camera.connect(user_id, user_pass, ca_certs) camera.listen(dev_id, func=on_receive, fargs=(camera, uploader)) wait_keyboard_interrupt() ストレージサービスとの連携例(upload) def media_uploader(mstorage): media_id = None while True: file_path = yield media_id media_id = mstorage.upload(file_path)['id'] def on_receive(devid, cmd, rcv_param, camera, uploader): file_path = './upload_path.JPG' ThetaV2().take_picture_to_file(file_path, override_file=True) media_id = uploader.send(file_path) camera.publish(rcv_param['_shooting_id'], message=media_id) 撮影者サイド (参考資料)
- 63. 63 with Client(client_id, client_secret) as camera: aclient = AuthClient(client_id, client_secret) aclient.set_resource_owner_creds(user_id, user_pass) mstorage = MediaStorage(aclient) mstorage.connect() downloader = media_downloader(mstorage) next(downloader) shoot_id = str(uuid.uuid4()) send_param = validate_usr_param(str('{"_shooting_id": "' + shoot_id + '"}')) file_path = './download_path.JPG' camera.connect(user_id, user_pass, ca_certs) camera.shoot(dev_id, param=send_param) camera.subscribe(shoot_id, func=on_result, fargs=(downloader, file_path)) wait_keyboard_interrupt() ストレージサービスとの連携例(download) def media_downloader(mstorage): while True: media_inf = yield mstorage.download_to(media_inf['media_id'], media_inf['save_path']) def on_result(msg, downloader, file_path): media_inf = {'media_id': msg.payload, 'save_path': file_path} downloader.send(media_inf) 撮影サイド (参考資料)
- 64. 64 ６. Q&A
- 66. 66 Enjoy RICOH THETA and RICOH Cloud API!!
- 67. 67