Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
RICOH THETA x
IoT Developers
Contest Cloud
API Seminar
SV Technology Development Center
New Business Development Division
...
Agenda
1.  Introduction of Cloud API
2.  Function No. 1 - Video Communication
3.  Function No. 2 - Photo and Media Storage...
1. INTRODUCTION OF CLOUD API
3
Hisakazu Takakuwa
Platform Development Department
SV Technology Development Center
New Busi...
4
Our Questions to
You
Ricoh Cloud API
•  Interface available from programs which run on PC, smartphone/tablet and
singleboard computer
•  It has...
Resources Available for the Developers
•  Developers can use the following resources:
1. Cloud API
2. SDK
3. Sample progra...
Prerequisites for the Usage
The followings are necessary to use Ricoh Cloud API
1.  Client credential (to identify the app...
Preparation 1 - Obtaining Client Credential
Step 1. Enter the contest by filling in the form on the contest website
Step 2....
Preparation 2 - Obtaining User Account
Step 1) Open the webpage for the administrator of RICOH Unified Communication System...
10
2. FUNCTION 1
- VIDEO COMMUNICATION
Tomonori Aikawa
Platform Development Department
SV Technology Development Center
Ne...
§  Overview
l  Video chat (only image) between two PCs
l  Uses WebRTC (a function of modern Web browsers)
Streaming Functi...
§  Configuration
l  Authentication Server/BOSH (Bidirectional-streams Over Synchronous
HTTP) Server
l  JavaScript/HTML
l  J...
§  Obtaining the sample program
§  Setting up a client credential
§  Build
§  Execution
https://github.com/ricohapi/video-...
§  Developers can use a signaling server.
l  WebRTC (over BOSH)
§  Only one user ID is necessary.
l  abc@example.com+mac
l...
15
3. FUNCTION 2
- PHOTO AND MEDIA STORAGE
Eiji Hosono
Platform Development Department
SV Technology Development Center
Ne...
Main Storage APIs
Storage function REST API SDK API
Image upload POST /media .upload()
Obtaining the list of
images alread...
Let's Create a Simple Application!
17
<SAMPLE> slideshow application
Feature 1. Supports Cloud
This application shows the images in Ricoh Cloud Media
Storage service one by one.
Feature 2. Mu...
Overall Demo Configuration
19
My PC
Web Server
http://localhost
RICOH Cloud Service
CSS
HTML
JavaScript
Web Browser
Cloud ...
When Creating Demo Application...
It is always difficult to support Cloud such as handling security,
authentication, and s...
Source Code Configuration
21
File Content Line of Codes
index.html HTML file 41 lines
ric-sample.css stylesheet 25 lines
r...
Processing Flow in the Program
ü  Calling event handler function in ric-sample.js when Start/
Pause/Resume buttons are tap...
Essence of Cloud Support
There are two points to supporting Cloud.
23
First Point to Supporting Cloud
Point 1
Authentication information needs to be set by using SDK
API before the cloud is co...
First Point to Supporting Cloud (Continued)
25
$(document).ready(function() {
var authClient = new AuthClient("koTjKwBm…",...
Second Point to Supporting Cloud
Point 2
The image data stored in the cloud cannot be referred to directly from
the <img> ...
Second Point to Supporting Cloud
(Continued)
function slideshow() {
var mediaID = photoList[photoIndex++].id;
if (photoInd...
Additional Notes
Conversion to Browser SDK
Media Storage SDK for JavaScript has been prepared as a
package that works with...
29
4. Q & A
30
5. FUNCTIONS TO BE
INTRODUCED IN THE FUTURE
Functions to be Introduced in the Future
Following functions are under consideration for
future releases.
・Remote control
...
RICOH
THETA S
Instruction for
photo shoot
Remote Control Function Overview
32
MQTT
Ricoh Cloud APISingleboard
computer
RIC...
Summary
Cloud API Overview
・Functions
・How to use it
Introduction of Functions
- Video communication
- Photo and media sto...
34
Enjoy
RICOH THETA
and
RICOH Cloud API!!
 RICOH THETA x IoT Developers Contest : Cloud API Seminar
Upcoming SlideShare
Loading in …5
×

RICOH THETA x IoT Developers Contest : Cloud API Seminar

985 views

Published on

http://contest.theta360.com/index-en.html

Published in: Technology
  • Hello! Who wants to chat with me? Nu photos with me here http://bit.ly/helenswee
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

RICOH THETA x IoT Developers Contest : Cloud API Seminar

  1. 1. RICOH THETA x IoT Developers Contest Cloud API Seminar SV Technology Development Center New Business Development Division RICOH COMPANY,LTD. May 18, 2016
  2. 2. Agenda 1.  Introduction of Cloud API 2.  Function No. 1 - Video Communication 3.  Function No. 2 - Photo and Media Storage 4.  Q & A 5.  Functions to be introduced in the future 2
  3. 3. 1. INTRODUCTION OF CLOUD API 3 Hisakazu Takakuwa Platform Development Department SV Technology Development Center New Business Development Division RICOH COMPANY,LTD.
  4. 4. 4 Our Questions to You
  5. 5. Ricoh Cloud API •  Interface available from programs which run on PC, smartphone/tablet and singleboard computer •  It has following functions provided by Ricoh. 1. Video communication 2. Photo and media storage 3. Authentication/Authorization •  Free beta version 5 Ricoh Cloud API Singleboard computer PC Smartphone/ Tablet Video communication Photo and media storage Authentication/ Authorization
  6. 6. Resources Available for the Developers •  Developers can use the following resources: 1. Cloud API 2. SDK 3. Sample programs •  Available from github  https://github.com/ricohapi/ 6 Developers SDK Sample program Ricoh Cloud API Video communication Photo and media storage Authentication/ Authorization
  7. 7. Prerequisites for the Usage The followings are necessary to use Ricoh Cloud API 1.  Client credential (to identify the application) •  Client ID •  Client secret 2.  User account (to identfity the user) •  User ID •  Password 7
  8. 8. Preparation 1 - Obtaining Client Credential Step 1. Enter the contest by filling in the form on the contest website Step 2. Follow the instructions in the confirmation e-mail Step 3. An e-mail will be sent to notify the registration has completed Step 4. Download material by following the steps in the e-mail which explains how to access API 8 http://contest.theta360.com/index-en.html
  9. 9. Preparation 2 - Obtaining User Account Step 1) Open the webpage for the administrator of RICOH Unified Communication System. 9 https://beta2.ucs.ricoh.com/dashboard/login?lang=en Step 4) Complete the registration by clicking the URL in the confirmation e-mail. * E-mail address is used as user ID. Step 3) Click "Send" after filling in the form. Step 2) Click the link.
  10. 10. 10 2. FUNCTION 1 - VIDEO COMMUNICATION Tomonori Aikawa Platform Development Department SV Technology Development Center New Business Development Division RICOH COMPANY,LTD.
  11. 11. §  Overview l  Video chat (only image) between two PCs l  Uses WebRTC (a function of modern Web browsers) Streaming Functions 11
  12. 12. §  Configuration l  Authentication Server/BOSH (Bidirectional-streams Over Synchronous HTTP) Server l  JavaScript/HTML l  JavaScript/HTML Streaming Functions *JavaScript is registered trademark of Oracle and/or its affiliates. Other names may be trademarks of their respective owners. 12
  13. 13. §  Obtaining the sample program §  Setting up a client credential §  Build §  Execution https://github.com/ricohapi/video-streaming-sample-app How to Use $ 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. 14. §  Developers can use a signaling server. l  WebRTC (over BOSH) §  Only one user ID is necessary. l  abc@example.com+mac l  abc@example.com+theta §  A sample that shows a view similar to the one at theta360.com l  WebGL Please make an interesting use of the APIs! We welcome requests for enhancement. Summary 14
  15. 15. 15 3. FUNCTION 2 - PHOTO AND MEDIA STORAGE Eiji Hosono Platform Development Department SV Technology Development Center New Business Development Division RICOH COMPANY,LTD.
  16. 16. Main Storage APIs Storage function REST API SDK API Image upload POST /media .upload() Obtaining the list of images already uploaded GET /media .list() Obtaining the information about an image GET /media/{id} .info() Obtaining the image data GET /media/{id}/content .download() Deleting an uploaded image DELETE /media/{id} .delete() Service URL: https://mss.ricohapi.com/v1/media 16 Authentication / Authorization function REST API SDK API User authentication POST /auth/token .connect() Service URL: https://auth.beta2.ucs.ricoh.com/auth/token
  17. 17. Let's Create a Simple Application! 17 <SAMPLE> slideshow application
  18. 18. Feature 1. Supports Cloud This application shows the images in Ricoh Cloud Media Storage service one by one. Feature 2. Multi accounts User accounts can be switched. Feature 3. Multi platform The application uses HTML5 - it can run under Mac OS, Windows, iOS, and Android. 18 Demo Application Overview Let's start the application within the browser. ※ Mac OS is a trademark of Apple Inc. ※ Windows is a registered trademark or trademark of US Microsoft Corporation in the United States and other countries. ※ The official name for Windows is Microsoft Windows Operating System. ※ iOS is a trademark in the United States and other countries, or a registered trademark of Cisco, and is used under license. ※ Android is a trademark of Google Inc.
  19. 19. Overall Demo Configuration 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. Application content is distributed from Web Server 2. Open the application URL in a browser then the content is read and the application starts 3. JavaScript version SDK allows the developers to coordinate with RICOH Cloud Service *JavaScript is registered trademark of Oracle and/or its affiliates. Other names may be trademarks of their respective owners.
  20. 20. When Creating Demo Application... It is always difficult to support Cloud such as handling security, authentication, and so on… BUT, By using SDK, it is easy! We could develop the application with about 100 lines of code. 20
  21. 21. Source Code Configuration 21 File Content Line of Codes index.html HTML file 41 lines ric-sample.css stylesheet 25 lines ric-sample.js JavaScript file 53 lines ricohapi-mstorage.js Media Storage SDK (Distributed at GitHub) Total About 100 lines (119 lines) * Blank lines, comments and lines for log output are not counted. Let's check the source code and its operation by using a browser. *JavaScript is registered trademark of Oracle and/or its affiliates. Other names may be trademarks of their respective owners.
  22. 22. Processing Flow in the Program ü  Calling event handler function in ric-sample.js when Start/ Pause/Resume buttons are tapped Start button: ü Obtains the list of uploaded images in the cloud ü Starts a timer Pause button: ü Stops the timer Resume button: ü Starts a timer ü  Using the timer, a new image is obtained from the cloud at regular interval and is shown. 22
  23. 23. Essence of Cloud Support There are two points to supporting Cloud. 23
  24. 24. First Point to Supporting Cloud Point 1 Authentication information needs to be set by using SDK API before the cloud is connected. Once you have completed, SDK takes care of the rest. Security and authentication handling, necessary to communicate with SDK cloud server, are done by SDK. ※ Authentication information: Client ID/Secret, User ID/Password 24
  25. 25. First Point to Supporting Cloud (Continued) 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.  At the time of starting application, Client ID/Secret are specified. 2. When Start button is pressed, User ID/Password is specified. 3. Set authentication information when Storage API is used. Security and authentication handling is automatically done by SDK when storage API is used. Let's check the actual operation by using a browser.
  26. 26. Second Point to Supporting Cloud Point 2 The image data stored in the cloud cannot be referred to directly from the <img> tag due to security concerns. We suggest that the image is obtained securely from the cloud and then converted into BLOB format. Image data in BLOB format can be referenced by the object URL where the data is store <img> tag. ※BLOB: Binary Large Object SDK can take care of obtaining and converting the image data! SDK supports obtaining image data in the BLOB format. 26
  27. 27. Second Point to Supporting Cloud (Continued) 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. Specify the BLOB format, and obtain image data 3. src attribute of <img> tag will be given the object URL 2. Object URL that contains BLOB data is created The image from the cloud is shown Let's check the actual operation by using a browser.
  28. 28. Additional Notes Conversion to Browser SDK Media Storage SDK for JavaScript has been prepared as a package that works with Node.js. Therefore, if you intend to use it in a browser environment, converting source code is necessary. Converted source code will be distributed in GitHub repository. Media Storage SDK for browser: https://github.com/ricohapi/media-storage-js/tree/master/build ※ to be distributed in the near future 28*JavaScript is registered trademark of Oracle and/or its affiliates. Other names may be trademarks of their respective owners.
  29. 29. 29 4. Q & A
  30. 30. 30 5. FUNCTIONS TO BE INTRODUCED IN THE FUTURE
  31. 31. Functions to be Introduced in the Future Following functions are under consideration for future releases. ・Remote control ・Sensor collaboration ・Image processing and recognition ・Data store and analysis ・SNS linking 31
  32. 32. RICOH THETA S Instruction for photo shoot Remote Control Function Overview 32 MQTT Ricoh Cloud APISingleboard computer RICOH THETA S Singleboard computer Instruction for photo shoot Photo shoot MQTT Example 1) Photo shoot Instruction to obtain the image data MQTT Ricoh Cloud APISingleboard computer Singleboard computer Instruction to obtain the image data Obtaining an image MQTT Example 2) Obtaining an image Image
  33. 33. Summary Cloud API Overview ・Functions ・How to use it Introduction of Functions - Video communication - Photo and media storage Functions to be introduced in the future 33
  34. 34. 34 Enjoy RICOH THETA and RICOH Cloud API!!

×