Skip to 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-latest.min.js
  • Add an empty iframe
  • Initialize the viewer via JavaScript

Example

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

Edit space-viewer-example

html
<!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-latest.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>