Giter Club home page Giter Club logo

genymotion-device-web-player's Introduction

Genymotion device web player

npm GitHub

This repository contains the Genymotion device web player JavaScript SDK. It provides an easy way to integrate Genymotion devices running in the cloud into any web application. You will be able to display an emulator screen and interact with the device.

It focuses on:

  • compatibility (vanilla JavaScript, no external framework used)
  • performance (30fps or more)
  • quality (Up to 1920ร—1080)
  • low latency

For more information about Genymotion devices, please visit genymotion website.

Table of contents

  1. Requirements
  2. Getting started
    1. With NPM/Yarn
    2. With CDN
  3. Usage
  4. Features & options

Requirements

A Modern, WebRTC compatible, Web browser:

  • Google Chrome 85+
  • Mozilla Firefox 78+
  • Opera 70+
  • Microsoft Edge 20.10240+
  • Safari 11+

Getting started

With NPM/Yarn

Using yarn:

yarn add @genymotion/device-web-player

Using npm:

npm install @genymotion/device-web-player

Package import (commonJS):

const GenymotionManager = require('genymotion/device-web-player');
<style lang="scss">
    @import "genymotion-device-web-player/dist/css/gm-player.min.css";
</style>

With CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@genymotion/[email protected]/dist/css/gm-player.min.css">
<script src="https://cdn.jsdelivr.net/npm/@genymotion/[email protected]/dist/js/gm-player.min.js"></script>

Usage

Use GenymotionManager to instanciate one or more Genymotion device player. All you need is an HTML element to use as a container. See example below. To find your instance WebRTC address, use the SaaS API or check the PaaS documentation, based on your device provider.

<!-- OPTIONAL: Import google maps library with your API key to enable map positioning feature
<script src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxxxxxxxxx-yyyyyyyyyyyyyy"></script>
-->

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

<script>
    // Instance address
    const webrtcAddress = 'wss://x.x.x.x';
    
    // See "Features & options" section for more details about options
    const options = {
        template: "player",    // template defines how player is displayed
        token: 'i-XXXXXXXXXX', // token is the shared secret to connect to your VM
        fileUpload: false      // requires fileUploadUrl
    };

    // Device player instanciation
    const genymotion = new GenymotionManager();
    const instance = genymotion.setupInstance(container,     // the container element or element ID to use
                                              webrtcAddress, // the websocket address of your instance connector
                                              options        // options object to enable or disable features
    );

    // Disconnect the device player, closing any open data channels.
    window.addEventListener('beforeunload', function() {
        instance.disconnect();
    });
</script>

Features & options

A device player instance can be configured using the options argument (object). Possible configuration key / value are described below.

template

  • Type: String
  • Default: player
  • Compatibility: PaaS, SaaS
  • Details: Defines the layout of the player. Can be one of the following: bootstrap, fullscreen, fullwindow, player, player_minimal, player_no_toolbar, player_partial.

token

  • Type: String
  • Default: undefined
  • Compatibility: PaaS, SaaS
  • Details: Instance access token, the shared secret used to connect to the device. For Genymotion PaaS devices, the token is the instance id (more information can be find here). For SaaS devices, you must generate the access token using the login api.

i18n

  • Type: Object
  • Default: {}
  • Compatibility: PaaS, SaaS
  • Details: Alternative translation for the player UI.

stun

  • Type: Object
  • Default: {}
  • Compatibility: PaaS, SaaS
  • Details: WebRTC STUN servers configuration. Format:
{
    urls: [
        'stun:stun-server1.org:80',
        'stun:stun-server2.org:443',
        ...
    ],
}

turn

  • Type: Object
  • Default: {}
  • Compatibility: PaaS, SaaS
  • Details: WebRTC TURN servers configuration. Format:
{
    urls: [],
    username: "myUsername",
    credential: "myPassword",
    default: false  // Whether or not we should use the TURN servers by default. Default: false.
}

streamResolution

...

  • Type: Boolean
  • Default: true
  • Compatibility: SaaS
  • Details: Enables or disables the video stream quality widget.

streamBitrate

  • Type: Boolean
  • Default: false
  • Compatibility: SaaS
  • Details: Enables or disables the stream bitrate widget.

touch

  • Type: Boolean
  • Default: true
  • Compatibility: PaaS, SaaS
  • Details: Enables or disables the touch events (fingers on screen). If you want to disable all VM interaction, please also disable mouse and keyboard.

mouse

  • Type: Boolean
  • Default: true
  • Compatibility: PaaS, SaaS
  • Details: Enables or disables the mouse events. If you want to disable all VM interaction, please also disable touch and keyboard.

keyboard

  • Type: Boolean
  • Default: true
  • Compatibility: PaaS, SaaS
  • Details: Enables or disables the keyboard widget. This widget can be used to transmit keyboard key strokes to the Android virtual device.

volume

...

  • Type: Boolean
  • Default: true
  • Compatibility: PaaS, SaaS
  • Details: Enables or disables the volume widget. This widget can be used to increase or decrease the volume of the Android virtual device.

rotation

...

  • Type: Boolean
  • Default: true
  • Compatibility: PaaS, SaaS
  • Details: Enables or disables the rotation widget. This widget can be used to rotate the Android virtual device.

navbar

... ... ...

  • Type: Boolean
  • Default: true
  • Compatibility: PaaS, SaaS
  • Details: Enables or disables the navbar widgets. This widget can be used to navigate in the Android virtual device like when using hardware buttons.

power

...

  • Type: Boolean
  • Default: true
  • Compatibility: PaaS, SaaS
  • Details: Enables or disables the power widget. This widget can be used to poweroff or reboot the Android virtual device.

fullscreen

... ...

  • Type: Boolean
  • Default: true
  • Compatibility: PaaS, SaaS
  • Details: Enables or disables the fullscreen widget. This widget can be used to make the player go fullscreen.

camera

...

  • Type: Boolean
  • Default: true
  • Compatibility: PaaS, SaaS
  • Details: Enables or disables the camera widget. This widget can be used to forward local webcam to the Android virtual device.

fileUpload

...

  • Type: Boolean
  • Default: true
  • Compatibility: PaaS, SaaS
  • Details: Enables or disables the fileUpload widget and drag & drop. This widget can be used to forward local file to the Android virtual device. When drag & dropping APK or ZIP files, it will install them.

fileUploadUrl

  • Type: String
  • Default: undefined
  • Compatibility: PaaS, SaaS
  • Details: Set the file upload url, required if fileUpload is set to true.

clipboard

...

  • Type: Boolean
  • Default: true
  • Compatibility: PaaS, SaaS
  • Details: Enables or disables the clipboard widget. This widget can be used to forward local clipboard to the Android virtual device.

battery

...

  • Type: Boolean
  • Default: true
  • Compatibility: PaaS, SaaS
  • Details: Enables or disables the battery widget. This widget can be used to set the battery level and state of the Android virtual device.

gps

...

  • Type: Boolean
  • Default: true
  • Compatibility: PaaS, SaaS
  • Details: Enables or disables the gps widget. This widget can be used to set the gps location of the Android virtual device. If you want to use a visual map instead of GPS coordinates number to set the location, you must import google maps library with your API key.
<!-- OPTIONAL: Import google maps library with your API key to enable map positioning feature -->
<script src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxxxxxxxxx-yyyyyyyyyyyyyy"></script>

gpsSpeedSupport

  • Type: Boolean
  • Default: false
  • Compatibility: PaaS, SaaS
  • Details: Enables or disables gps speed support.

capture

...

  • Type: Boolean
  • Default: true
  • Compatibility: PaaS, SaaS
  • Details: Enables or disables the capture widget. This widget can be used to capture the screen of the Android virtual device (screenshot or screencast).

identifiers

...

  • Type: Boolean
  • Default: true
  • Compatibility: PaaS, SaaS
  • Details:

Enables or disables the identifiers widget. This widget can be used to set the identifiers (Android ID / IMEI) of the Android virtual device.

network

...

  • Type: Boolean
  • Default: true
  • Compatibility: PaaS, SaaS
  • Details: Enables or disables the network widget. This widget can be used to set the network (throttling and baseband) of the Android virtual device.

phone

...

  • Type: Boolean
  • Default: true
  • Compatibility: PaaS, SaaS
  • Details:

Enables or disables the phone widget. This widget can be used to send SMS or phone call the Android virtual device.

diskIO

...

  • Type: Boolean
  • Default: true
  • Compatibility: PaaS, SaaS
  • Details: Enables or disables the diskIO widget. This widget can be used to modify Disk IO (throttling) of the Android virtual device.

translateHomeKey

  • Type: Boolean
  • Default: false
  • Compatibility: PaaS
  • Details: Translate home key to META + ENTER

baseband

...

  • Type: Boolean
  • Default: false
  • Compatibility: PaaS
  • Details: Enable or disable baseband (MMC/MNC) widget

connectionFailedURL

  • Type: String
  • Default: undefined
  • Compatibility: SaaS, PaaS
  • Details: Redirection page in case of connection error.

Contributing

Read through our contributing guidelines to learn about our submission process, coding rules and more.

genymotion-device-web-player's People

Contributors

jmaneyrol69 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.