Introduction
The Viewer API allows you to build web applications on top of rooom’s space-viewer. With this API, you can control the viewer using JavaScript. It provides functions for starting and stopping the viewer, moving the camera, taking screenshots, and much 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
iframeelement - Initialize the viewer via JavaScript
Example
Here is a ready-to-use example for a space-viewer:
Interactive Example
Click the CodeSandbox link above to open an interactive code editor where you can modify and test the space-viewer API in real-time.
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>