Skip to main content

Introduction

The Viewer API lets you build web apps on top of rooom’s space-viewer. With the API, you can control the viewer in JavaScript. It provides functions for starting, stopping the viewer, moving the camera, taking screenshots and more.

Getting started

To use the viewer API in a website, follow these 3 steps:

  • Insert this script in your page: space-viewer-1.0.0.min.js
  • Add an empty iframe
  • Initialize the viewer via JavaScript

Example

Here is a ready to use example for an space viewer:

Edit space-viewer-example

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>rooom Viewer Example</title>

<!-- Insert this script -->
<script type="text/javascript" src="https://static.rooom.com/viewer-api/space-viewer-1.0.0.min.js"></script>
</head>

<body>
<!-- Insert an empty iframe -->
<iframe src="" id="viewer" allow="autoplay; fullscreen; vr" allowvr allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>

<!-- Initialize the viewer -->
<script type="text/javascript">
var iframe = document.getElementById('viewer');
var id = 'f7ef4851b8';

var viewer = new SpaceViewer(iframe);

viewer.init(id, {
onSuccess: function onSuccessFn(api){
api.on('viewer.start', function() {
// API is ready to use
// Insert your code here
console.log('Viewer is ready');
} );
},
onError: function onErrorFn() {
console.log('Viewer error');
}
});
</script>
</body>
</html>

Documentation