Device image User Guide

Share an instance

This feature allows you to easily share or embed an instance using iframe.
Please use a fixed IP address.
Please use a valid SSL certificate and appropriate firewall rules if you want these sharing options to work outside of a development environment.
To access the share feature, go to the Share tab from the Web interface.
You can share your instance by sending the URL displayed in the Share your instance box to other people.
This URL contains your instance default username and password.
If you changed the default credentials, the URL will not be automatically updated.
You need to edit the username and password in the URL manually.
Example:

https://{username}:{password}@{instance_public_IP}

Embed an instance

Instance embedding is now entirely supported by our open-source web player.
It can be easily set up and installed from the Embed this instance in your website box.

Customization

In this section, select the features you wish to enable or disable:

Preview

In this section, below the customization section, you can use the tabs to switch between the source code and a live preview.

Examples

Webpack (Yarn, Npm)

import "@genymotion/device-web-player/dist/css/device-renderer.min.css";

<div id="genymotion"></div>
<script>
const webrtcAddress = 'wss://***.***.***.***/';
const options = {
  template: "renderer_partial",
  paas: true,
  gpsSpeedSupport: true,
  translateHomeKey: true,
  streamResolution: false,
  fileUploadUrl: 'wss://***.***.***.***/fileupload/',
  token: 'i-**************',
  microphone: true,
  baseband: true,
  connectionFailedURL: 'https://www.genymotion.com/help/cloud-paas/iceconnectionstate-failed/'
};
let instance;
try {
  instance = new DeviceRendererFactory().setupRenderer(
    document.getElementById('genymotion'),
    webrtcAddress,
    options
  );
  // Disconnect the device player, closing any open data channels.
  window.addEventListener('beforeunload', function() {
    instance.destroy();
  });
} catch (e) {
  console.error('Error while loading the device player:', e);
}
</script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@genymotion/device-web-player@3.2.2/dist/css/device-renderer.min.css" />
<script src="https://cdn.jsdelivr.net/npm/@genymotion/device-web-player@3.2.2/dist/js/device-renderer.min.js"></script>

<div id="genymotion"></div>
<script>
const webrtcAddress = 'wss://***.***.***.***/';
const options = {
  template: "renderer_partial",
  paas: true,
  gpsSpeedSupport: true,
  translateHomeKey: true,
  streamResolution: false,
  fileUploadUrl: 'wss://***.***.***.***/fileupload/',
  token: 'i-**************',
  microphone: true,
  baseband: true,
  connectionFailedURL: 'https://www.genymotion.com/help/cloud-paas/iceconnectionstate-failed/'
};
const { DeviceRendererFactory } = window;
let instance;
try {
  instance = new DeviceRendererFactory().setupRenderer(
    document.getElementById('genymotion'),
    webrtcAddress,
    options
  );
  // Disconnect the device player, closing any open data channels when leaving the page.
  window.addEventListener('beforeunload', function() {
    instance.destroy();
  });
} catch (e) {
  console.error('Error while loading the device player:', e);
}
</script>

Installation

You can install Genymotion device web player components locally, either with Webpack (Yarn/npm) or CDN:

Yarn

yarn add @genymotion/device-web-player

Npm

npm install @genymotion/device-web-player

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@genymotion/device-web-player@3.2.2/dist/css/device-renderer.min.css" />
<script src="https://cdn.jsdelivr.net/npm/@genymotion/device-web-player@3.2.2/dist/js/device-renderer.min.js"></script>

Usage

You can also use the web UI and copy paste the displayed content:

Examples

Webpack (Yarn, Npm)

<style lang="scss">
import "@genymotion/device-web-player/dist/css/device-renderer.min.css";
</style>

<div id="genymotion"></div>

<script>
const webrtcAddress = 'wss://***.***.***.***/';
const options = {
  template: "renderer_partial",
  paas: true,
  gpsSpeedSupport: true,
  translateHomeKey: true,
  streamResolution: false,
  fileUploadUrl: 'wss://***.***.***.***/fileupload/',
  token: 'i-**************',
  microphone: true,
  baseband: true,
  connectionFailedURL: 'https://www.genymotion.com/help/cloud-paas/iceconnectionstate-failed/'
};
let instance;
try {
  instance = new DeviceRendererFactory().setupRenderer(
    document.getElementById('genymotion'),
    webrtcAddress,
    options
  );
  window.addEventListener('beforeunload', function() { instance.destroy(); });
} catch (e) {
  console.error('Error while loading the device player:', e);
}
</script>

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@genymotion/device-web-player@3.2.2/dist/css/device-renderer.min.css" />
<script src="https://cdn.jsdelivr.net/npm/@genymotion/device-web-player@3.2.2/dist/js/device-renderer.min.js"></script>

<div id="genymotion"></div>

<script>
const webrtcAddress = 'wss://***.***.***.***/';
const options = {
  template: "renderer_partial",
  paas: true,
  gpsSpeedSupport: true,
  translateHomeKey: true,
  streamResolution: false,
  fileUploadUrl: 'wss://***.***.***.***/fileupload/',
  token: 'i-**************',
  microphone: true,
  baseband: true,
  connectionFailedURL: 'https://www.genymotion.com/help/cloud-paas/iceconnectionstate-failed/'
};
let instance;
try {
  instance = new DeviceRendererFactory().setupRenderer(
    document.getElementById('genymotion'),
    webrtcAddress,
    options
  );
  window.addEventListener('beforeunload', function() { instance.destroy(); });
} catch (e) {
  console.error('Error while loading the device player:', e);
}
</script>

Contribute

Genymotion device web player is an open source project.
If you wish to contribute, just click FORK ON GITHUB to fork the GitHub repository to your personal one.
For more details, feel free to visit Genymotion Web Player repository.