Git Product home page Git Product logo

android-emulator-webrtc's Introduction

android-emulator-webrtc

This contains a set of React components that can be used to interact with the android emulator from the browser. It is intended to be used with an envoy proxy that is connected to a running emulator.

See the android container scripts for an example on how to run an emulator that is accessible via the web.

npm install --save android-emulator-webrtc

Full reference

Features

  • Display and interact with android emulator over the web, including audio if available.
  • Retrieve logcat from remote emulator.
  • Retrieve emulator status

Usage

You can connect to remote unsecured emulator as follows:

import { Emulator } from "android-emulator-webrtc/emulator";

class EmulatorScreen extends React.Component {
  render() {
    return <Emulator uri="https://my.emulator" />;
  }
}

In order to connect to a secure endpoint you will have to provide an authorization service that provides the following functions:

  • authHeader() which must return a set of headers that should be send along with a request. For example:
 authHeader = () => {
    return { Authorization: 'Some Token' };
  };
}
  • unauthorized() a function that gets called when a 401 was received. Here you can provide logic to handle token refresh, re-login etc.

For example:

import { Emulator } from "android-emulator-webrtc/emulator";

class EmulatorScreen extends React.Component {
  render() {
    return <Emulator uri="https://my.emulator" auth={my_auth_object} />;
  }
}

Full Reference

Emulator

A React component that displays a remote android emulator.

The emulator will mount a png or webrtc view component to display the current state of the emulator. It will translate mouse events on this component and send them to the actual emulator.

Authentication Service

The authentication service should implement the following methods:

  • authHeader() which must return a set of headers that should be send along with a request.
  • unauthorized() a function that gets called when a 401 was received.

Type of view

You usually want this to be webrtc as this will make use of the efficient webrtc implementation. The png view will request screenshots, which are very slow, and require the envoy proxy. You should not use this for remote emulators.

Pressing hardware buttons

This component has a method sendKey to sends a key to the emulator. You can use this to send physical hardwar events to the emulator for example:

"AudioVolumeDown" - Decreases the audio volume. "AudioVolumeUp" - Increases the audio volume. "Power" - The Power button or key, turn off the device. "AppSwitch" - Should bring up the application switcher dialog. "GoHome" - Go to the home screen. "GoBack" - Open the previous screen you were looking at.

prop type default required description
auth Object null The authentication service to use, or null for no authentication.
height Number The height of the component
muted Boolean true True if the audio should be disabled. This is only relevant when using the webrtc engine.
onAudioStateChange Function (s) => { console.log("emulator audio: " + s); } Called when the audio becomes (un)available. True if audio is available, false otherwise.
onError Function (e) => { console.error(e); } Callback that will be invoked in case of gRPC errors.
onStateChange Function (s) => { console.log("emulator state: " + s); } Called upon state change, one of ["connecting", "connected", "disconnected"]
gps A GeolocationCoordinates like object indicating where the device is.
poll Boolean false True if polling should be used, only set this to true if you are using the go webgrpc proxy.
uri String gRPC Endpoint where we can reach the emulator.
view Enum("webrtc", "png") "webrtc" The underlying view used to display the emulator, one of ["webrtc", "png"]
volume Number 1.0 Volume between [0, 1] when audio is enabled. 0 is muted, 1.0 is 100%
width Number The width of the component

Note: The user must have interacted with the page before you can set the volume to "unmuted" (muted = false). Otherwise the video will not play and will throw an error, which is currently not handled.

Note: The volume is the volume of the video element that is displayed, this is not the actual volume used inside the emulator. You can change the audio inside the emulator by sending the proper keys as documented above, or follow the steps in the support document on how to change the audio volume.


EmulatorStatus

Kind: global class

new EmulatorStatus()

Gets the status of the emulator, parsing the hardware config into something easy to digest.

Param Type Description
uriOrEmulator string/EmulatorControllerService uri to gRPC endpoint.
auth object authorization class.

EmulatorStatus.getStatus

Gets the cached status.

Kind: static property of EmulatorStatus

EmulatorStatus.updateStatus

Retrieves the current status from the emulator.

Kind: static property of EmulatorStatus

Param Type Description
fnNotify Callback when the status is available, returns the retrieved status.
cache boolean True if the cache can be used.

Logcat

Observe the logcat stream from the emulator.

Streaming is done by either polling the emulator endpoint or making a streaming call.

It will send out the following events:

  • start whenever the start method was called.
  • data whenever new data became available.
  • end whenever the stream is finished, either because it was stopped, or due to an error.

Kind: global class

new Logcat(uriOrEmulator, auth)

Creates a logcat stream.

The authentication service should implement the following methods:

  • authHeader() which must return a set of headers that should be send along with a request.
  • unauthorized() a function that gets called when a 401 was received.
Param Type
uriOrEmulator object
auth object

Logcat.on

Register a listener.

Kind: static property of Logcat

Param Type Description
name string Name of the event.
fn Callback Function to notify on the given event.

Logcat.off

Removes a listener.

Kind: static property of Logcat

Param Type Description
name string Name of the event.
fn Callback Function to notify on the given event.

Logcat.stop

Cancel the currently active logcat stream.

Kind: static property of Logcat

Logcat.start

Requests the logcat stream, invoking the callback when a log line arrives.

Note: Streaming can cause serious UI delays, so best not to use it.

Kind: static property of Logcat

Param Type Description
fnNotify Callback when a new log line arrives.
refreshRate number polling interval, or 0 if you wish to use streaming.

android-emulator-webrtc's People

Contributors

danwinc avatar gilbertnordhammar avatar pokowaka avatar scottjasso avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

android-emulator-webrtc's Issues

TypeError: _this.auth.authHeader is not a function

Hello my friends. I try to implement this code but it does not work.

import React, { useState } from 'react';
import { Emulator } from "android-emulator-webrtc/emulator";

function App() {
  const [authHeader, ] = useState({authorized: "hCGK/6BaMH+8cas1"});
  return (
	<div>
   <Emulator uri="http://localhost:5554"  auth={authHeader}  />;
	</div>
  );
}

export default App;

image

I got error like this. How can I figured out ?

** And also i find this example

Support for paste keyevent input

We're trying to add some functionality to support pasting into the emulator. We can get and set the clipboard via the existing gRPC APIs, but I can't figure out how to get the device to actually paste the clipboard content. With adb, this works with adb shell input keyevent 279, but using the sendKey(KeyboardEvent) api, neither key: "Paste" or keycode: 279 work. (https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values#editing_keys)

Is there some way we can force the device to paste (and cut and copy) via the existing gRPC interface?

Touch events crashes Goldfish/Emulator

Hey, I am currently trying to add touch event handling following an old issue: google/android-emulator-container-scripts#113

However it seems to be broken in the latest stable and canary version (30.0.12 & 30.0.25) of Goldfish/QEMU as I get a crash as soon as I send even a simple touch event hooked in via onTouchStart for example:

        const protoTouch = new Proto.Touch();
        protoTouch.setX(50);
        protoTouch.setY(50);
        protoTouch.setIdentifier(0);
        protoTouch.setPressure(10);
        protoTouch.setTouchMajor(24);
        protoTouch.setTouchMinor(24);

        const requestTouchEvent = new Proto.TouchEvent();
        requestTouchEvent.setTouchesList([protoTouch]);
        const { jsep } = this.props;
        jsep.send('touch', requestTouchEvent);

How do you specify your own hardware config?

I have an emulator that doesn't use 1920x1080p as its screen dimensions, which seems to be the default for this package. The following code in event_handler.js suggests that you should be able to specify your own dimensions (presumably via a config.ini file)

getScreenSize() {
      this.status.updateStatus(state => {
        this.setState({
          deviceWidth: parseInt(state.hardwareConfig["hw.lcd.width"]) || 1080,
          deviceHeight: parseInt(state.hardwareConfig["hw.lcd.height"]) || 1920
        });
      });
    }

However, I can't for the love of god figure out how to set the value of state.hardwareConfig. I also tried setting the height and view props of <Emulator />, but that didn't seem to do anything?

Caplocks Issue

When we tested the emulator, sometimes the caps lock key doesn't work and all letters typed in the emulator are uppercase. And it doesn't switch to lower case when press the caps lock key either in the keypad in emulator nor on the real keyboard.

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.