android-emulator-webrtc 1.0.18 → 2.0.1

package/src/components/emulator/emulator.js

@@ -1,217 +0,0 @@
-/*
- * Copyright 2019 The Android Open Source Project
- *
- * Licensed under the Apache License, Version 2.0 (the "License")
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import PropTypes from "prop-types";
-import React, { Component } from "react";
-import EmulatorPngView from "./views/simple_png_view.js";
-import EmulatorWebrtcView from "./views/webrtc_view.js";
-import withMouseKeyHandler from "./views/event_handler";
-import JsepProtocol from "./net/jsep_protocol_driver.js";
-import * as Proto from "../../proto/emulator_controller_pb";
-import {
-  RtcService,
-  EmulatorControllerService,
-} from "../../proto/emulator_web_client";
-
-const PngView = withMouseKeyHandler(EmulatorPngView);
-const RtcView = withMouseKeyHandler(EmulatorWebrtcView);
-
-/**
- * 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.
- *
- * Note that chrome will not autoplay the video if it is not muted and no interaction
- * with the page has taken place. See https://developers.google.com/web/updates/2017/09/autoplay-policy-changes.
- *
- * #### Pressing hardware buttons
- *
- * This component has a method `sendKey` that sends a key to the emulator.
- * You can use this to send physical button 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.
- *
- */
-class Emulator extends Component {
-  static propTypes = {
-    /** gRPC Endpoint where we can reach the emulator. */
-    uri: PropTypes.string.isRequired,
-    /** The authentication service to use, or null for no authentication. */
-    auth: PropTypes.object,
-    /** True if the audio should be disabled. This is only relevant when using the webrtc engine. */
-    muted: PropTypes.bool,
-    /** Volume between [0, 1] when audio is enabled. 0 is muted, 1.0 is 100% */
-    volume: PropTypes.number,
-    /** Called upon state change, one of ["connecting", "connected", "disconnected"] */
-    onStateChange: PropTypes.func,
-    /** Called when the audio becomes (un)available. True if audio is available, false otherwise. */
-    onAudioStateChange: PropTypes.func,
-    /** The width of the component */
-    width: PropTypes.number,
-    /** The height of the component */
-    height: PropTypes.number,
-    /** The underlying view used to display the emulator, one of ["webrtc", "png"] */
-    view: PropTypes.oneOf(["webrtc", "png"]).isRequired,
-    /** A [GeolocationCoordinates](https://developer.mozilla.org/en-US/docs/Web/API/GeolocationCoordinates) like object indicating where the device is. */
-    gps: PropTypes.object,
-    /** True if polling should be used, only set this to true if you are using the go webgrpc proxy. */
-    poll: PropTypes.bool,
-    /** Callback that will be invoked in case of gRPC errors. */
-    onError: PropTypes.func,
-  };
-
-  static defaultProps = {
-    view: "webrtc",
-    auth: null,
-    poll: false,
-    muted: true,
-    volume: 1.0,
-    onError: (e) => {
-      console.error(e);
-    },
-    onAudioStateChange: (s) => {
-      console.debug("emulator audio: " + s);
-    },
-    onStateChange: (s) => {
-      console.debug("emulator state: " + s);
-    },
-  };
-
-  components = {
-    webrtc: RtcView,
-    png: PngView,
-  };
-
-  state = {
-    audio: false,
-  };
-
-  constructor(props) {
-    super(props);
-    const { uri, auth, poll, onError } = props;
-    this.emulator = new EmulatorControllerService(uri, auth, onError);
-    this.rtc = new RtcService(uri, auth, onError);
-    this.jsep = new JsepProtocol(this.emulator, this.rtc, poll);
-    this.view = React.createRef();
-  }
-
-  static getDerivedStateFromProps(nextProps, prevState) {
-    if (nextProps.view === "png")
-      return {
-        audio: false,
-      };
-
-    return prevState;
-  }
-
-  componentDidMount = () => {
-    this.updateLocation();
-  };
-
-  componentDidUpdate = (prevProps) => {
-    if (prevProps.gps !== this.props.gps) {
-      this.updateLocation();
-    }
-  };
-
-  updateLocation = () => {
-    const { gps } = this.props;
-    if (typeof gps === "undefined") {
-      return;
-    }
-
-    const state = new Proto.GpsState();
-    state.setLatitude(gps.latitude);
-    state.setLongitude(gps.longitude);
-    state.setAltitude(gps.altitude);
-    state.setBearing(gps.heading);
-    state.setSpeed(gps.speed);
-    this.emulator.setGps(state);
-  };
-
-  /**
-   * Sends the given key to the emulator.
-   *
-   * You can use this to send physical hardware 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.
-   *
-   * See https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values for
-   * a list of valid values you can send as well.
-   */
-  sendKey = (key) => {
-    var request = new Proto.KeyboardEvent();
-    request.setEventtype(Proto.KeyboardEvent.KeyEventType.KEYPRESS);
-    request.setKey(key);
-    this.jsep.send("keyboard", request);
-  };
-
-  _onAudioStateChange = (s) => {
-    const { onAudioStateChange } = this.props;
-    this.setState({ audio: s }, () => {
-      onAudioStateChange(s);
-    });
-  };
-
-  render() {
-    const { width, height, view, poll, muted, onStateChange, onError, volume } =
-      this.props;
-    const SpecificView = this.components[view] || RtcView;
-
-    console.log(`render ${width}x${height}`);
-    return (
-      <SpecificView
-        ref={this.view}
-        width={width}
-        height={height}
-        emulator={this.emulator}
-        jsep={this.jsep}
-        onStateChange={onStateChange}
-        poll={poll}
-        muted={muted}
-        volume={volume}
-        onError={onError}
-        onAudioStateChange={this._onAudioStateChange}
-      />
-    );
-  }
-}
-
-export default Emulator;

package/src/components/emulator/net/emulator_status.js

@@ -1,94 +0,0 @@
-/*
- * Copyright 2020 The Android Open Source Project
- *
- * Licensed under the Apache License, Version 2.0 (the "License")
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { Empty } from "google-protobuf/google/protobuf/empty_pb";
-import { EmulatorControllerService } from "../../../proto/emulator_web_client";
-
-/**
- * Gets the status of the emulator, parsing the hardware config into something
- * easy to digest.
- *
- * @export
- * @class EmulatorStatus
- */
-class EmulatorStatus {
-  /**
-   * Creates an EmulatorStatus object that can retrieve the status of the running emulator.
-   *
-   * @param {object} uriOrEmulator An emulator controller service, or a URI to a gRPC endpoint.
-   * @param {object} auth The authentication service to use, or null for no authentication.
-   *
-   *  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.
-   */
-  constructor(uriOrEmulator, auth) {
-    if (uriOrEmulator instanceof EmulatorControllerService) {
-      this.emulator = uriOrEmulator;
-    } else {
-      this.emulator = new EmulatorControllerService(uriOrEmulator, auth);
-    }
-    this.status = null;
-  }
-
-  /**
-   * Gets the cached status.
-   *
-   * @memberof EmulatorStatus
-   */
-  getStatus = () => {
-    return this.status;
-  };
-
-  /**
-   * Retrieves the current status from the emulator.
-   *
-   * @param  {Callback} fnNotify when the status is available, returns the retrieved status.
-   * @param  {boolean} cache True if the cache can be used.
-   * @memberof EmulatorStatus
-   */
-  updateStatus = (fnNotify, cache) => {
-    const request = new Empty();
-    if (cache && this.status) {
-      fnNotify(this.status);
-      return this.status;
-    }
-    this.emulator.getStatus(request, {}, (err, response) => {
-      var hwConfig = {};
-      const entryList = response.getHardwareconfig().getEntryList();
-      for (var i = 0; i < entryList.length; i++) {
-        const key = entryList[i].getKey();
-        const val = entryList[i].getValue();
-        hwConfig[key] = val;
-      }
-
-      const vmConfig = response.getVmconfig();
-      this.status = {
-        version: response.getVersion(),
-        uptime: response.getUptime(),
-        booted: response.getBooted(),
-        hardwareConfig: hwConfig,
-        vmConfig: {
-          hypervisorType: vmConfig.getHypervisortype(),
-          numberOfCpuCores: vmConfig.getNumberofcpucores(),
-          ramSizeBytes: vmConfig.getRamsizebytes()
-        }
-      };
-      fnNotify(this.status);
-    });
-  };
-}
-
-export default EmulatorStatus;

package/src/components/emulator/net/jsep_protocol_driver.js

@@ -1,364 +0,0 @@
-/*
- * Copyright 2019 The Android Open Source Project
- *
- * Licensed under the Apache License, Version 2.0 (the "License")
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { EventEmitter } from "events";
-import { Empty } from "google-protobuf/google/protobuf/empty_pb";
-/**
- * This drives the jsep protocol with the emulator, and can be used to
- * send key/mouse/touch events to the emulator. Events will be send
- * over the data channel if open, otherwise they will be send via the
- * grpc endpoint.
- *
- *  The jsep protocol is described here:
- * https://rtcweb-wg.github.io/jsep/.
- *
- *  This class can fire two events:
- *
- * - `connected` when the stream has become available.
- * - `disconnected` when the stream broke down, or when we failed to establish a connection
- *
- * You usually want to start the stream after instantiating this object. Do not forget to
- * disconnect once you are finished to terminate the message pump.
- *
- *
- * @example
- *  jsep = new JsepProtocolDriver(emulator, s => { video.srcObject = s; video.play() });
- *  jsep.startStream();
- *
- * @export
- * @class JsepProtocol
- */
-export default class JsepProtocol {
-  /**
-   * Creates an instance of JsepProtocol.
-   * @param {EmulatorService} emulator Service used to make the gRPC calls
-   * @param {RtcService} rtc Service used to open up the rtc calls.
-   * @param {boolean} poll True if we should use polling
-   * @param {callback} onConnect optional callback that is invoked when a stream is available
-   * @param {callback} onDisconnect optional callback that is invoked when the stream is closed.
-   * @memberof JsepProtocol
-   */
-  constructor(emulator, rtc, poll, onConnect, onDisconnect) {
-    this.emulator = emulator;
-    this.rtc = rtc;
-    this.events = new EventEmitter();
-
-    // Workaround for older emulators that send messages out of order
-    // and do not handle all answers properly.
-    this.old_emu_patch = {
-      candidates: [],
-      sdp: null,
-      haveOffer: false,
-      answer: false,
-    };
-
-    this.poll = poll;
-    this.guid = null;
-    this.stream = null;
-    this.event_forwarders = {};
-    if (onConnect) this.events.on("connected", onConnect);
-    if (onDisconnect) this.events.on("disconnected", onDisconnect);
-  }
-
-  on = (name, fn) => {
-    this.events.on(name, fn);
-  };
-
-  /**
-   * Disconnects the stream. This will stop the message pump as well.
-   *
-   * @memberof JsepProtocol
-   */
-  disconnect = () => {
-    this.connected = false;
-    if (this.peerConnection) this.peerConnection.close();
-    if (this.stream) {
-      this.stream.cancel();
-      this.stream = null;
-    }
-    this.active = false;
-    this.old_emu_patch = {
-      candidates: [],
-      sdp: null,
-      haveOffer: false,
-      answer: false,
-    };
-    this.events.emit("disconnected", this);
-  };
-
-  /**
-   * Initiates the JSEP protocol.
-   *
-   * @memberof JsepProtocol
-   */
-  startStream = () => {
-    const self = this;
-    this.connected = false;
-    this.peerConnection = null;
-    this.active = true;
-    this.old_emu_patch = {
-      candidates: [],
-      sdp: null,
-      haveOffer: false,
-      answer: false,
-    };
-    var request = new Empty();
-    this.rtc.requestRtcStream(request, {}, (err, response) => {
-      if (err) {
-        console.error("Failed to configure rtc stream: " + JSON.stringify(err));
-        this.disconnect();
-        return;
-      }
-
-      // Configure
-      self.guid = response;
-      self.connected = true;
-
-      if (!this.poll) {
-        // Streaming envoy based.
-        self._streamJsepMessage();
-      } else {
-        // Poll pump messages, go/envoy based proxy.
-        console.debug("Polling jsep messages.");
-        self._receiveJsepMessage();
-      }
-    });
-  };
-
-  cleanup = () => {
-    this.disconnect();
-    if (this.peerConnection) {
-      this.peerConnection.removeEventListener(
-        "track",
-        this._handlePeerConnectionTrack
-      );
-      this.peerConnection.removeEventListener(
-        "icecandidate",
-        this._handlePeerIceCandidate
-      );
-      this.peerConnection = null;
-    }
-    this.event_forwarders = {};
-  };
-
-  _handlePeerConnectionTrack = (e) => {
-    this.events.emit("connected", e.track);
-  };
-
-  _handlePeerConnectionStateChange = (e) => {
-    switch (this.peerConnection.connectionState) {
-      case "disconnected":
-      // At least one of the ICE transports for the connection is in the "disconnected" state
-      // and none of the other transports are in the state "failed", "connecting",
-      // or "checking".
-      case "failed":
-      // One or more of the ICE transports on the connection is in the "failed" state.
-      case "closed":
-        //The RTCPeerConnection is closed.
-        this.disconnect();
-    }
-  };
-
-  send(label, msg) {
-    let bytes = msg.serializeBinary();
-    let forwarder = this.event_forwarders[label];
-    console.log("Send " + label + " " + JSON.stringify(msg.toObject()));
-    // Send via data channel/gRPC bridge.
-    if (this.connected && forwarder && forwarder.readyState == "open") {
-      this.event_forwarders[label].send(bytes);
-    } else {
-      // Fallback to using the gRPC protocol
-      switch (label) {
-        case "mouse":
-          this.emulator.sendMouse(msg);
-          break;
-        case "keyboard":
-          this.emulator.sendKey(msg);
-          break;
-        case "touch":
-          this.emulator.sendTouch(msg);
-          break;
-      }
-    }
-  }
-
-  _handlePeerIceCandidate = (e) => {
-    if (e.candidate === null) return;
-    this._sendJsep({ candidate: e.candidate });
-  };
-
-  _handleDataChannel = (e) => {
-    let channel = e.channel;
-    this.event_forwarders[channel.label] = channel;
-  };
-
-  _handleStart = (signal) => {
-    this.peerConnection = new RTCPeerConnection(signal.start);
-    this.peerConnection.ontrack = this._handlePeerConnectionTrack;
-    this.peerConnection.onicecandidate = this._handlePeerIceCandidate;
-    this.peerConnection.onconnectionstatechange = this._handlePeerConnectionStateChange;
-    this.peerConnection.ondatachannel = this._handleDataChannel;
-    this.peerConnection.onsignalingstatechange = this._handlePeerState;
-  };
-
-  _handlePeerState = (event) => {
-    if (!this.peerConnection) {
-      console.log("Peerconnection no longer available, ignoring signal state.");
-    }
-    switch (this.peerConnection.signalingState) {
-      case "have-remote-offer":
-        this.old_emu_patch.haveOffer = true;
-        while (this.old_emu_patch.candidates.length > 0) {
-          this._handleCandidate(this.old_emu_patch.candidates.shift());
-        }
-        break;
-    }
-  };
-
-  _handleSDP = async (signal) => {
-    // We should not call this more than once..
-    this.old_emu_patch.sdp = null;
-    this.peerConnection.setRemoteDescription(new RTCSessionDescription(signal));
-    const answer = await this.peerConnection.createAnswer();
-    if (answer) {
-      // Older emulators cannot handle multiple answers, so make sure we do not send one
-      // again.
-      if (!this.old_emu_patch.answer) {
-        this.old_emu_patch.answer = true;
-        this.peerConnection.setLocalDescription(answer);
-        this._sendJsep({ sdp: answer });
-      }
-    } else {
-      this.disconnect();
-    }
-  };
-
-  _handleCandidate = (signal) => {
-    this.peerConnection.addIceCandidate(new RTCIceCandidate(signal));
-  };
-
-  _handleSignal = (signal) => {
-    if (signal.start) {
-      this._handleStart(signal);
-    }
-    if (signal.bye) {
-      this._handleBye();
-    }
-    if (signal.sdp && !this.old_emu_patch.sdp) {
-      this.old_emu_patch.sdp = signal;
-    }
-    if (signal.candidate) {
-      this.old_emu_patch.candidates.push(signal);
-    }
-
-    if (!!this.peerConnection) {
-      // We have created a peer connection..
-      if (this.old_emu_patch.sdp) {
-        this._handleSDP(this.old_emu_patch.sdp);
-      }
-
-      if (this.old_emu_patch.haveOffer) {
-        // We have a remote peer, add the candidates in.
-        while (this.old_emu_patch.candidates.length > 0) {
-          this._handleCandidate(this.old_emu_patch.candidates.shift());
-        }
-      }
-    }
-  };
-
-  _handleJsepMessage = (message) => {
-    try {
-      const signal = JSON.parse(message);
-      this._handleSignal(signal);
-    } catch (e) {
-      console.error(
-        "Failed to handle message: [" +
-          message +
-          "], due to: " +
-          JSON.stringify(e)
-      );
-    }
-  };
-
-  _handleBye = () => {
-    if (this.connected) {
-      this.disconnect();
-    }
-  };
-
-  _sendJsep = (jsonObject) => {
-    /* eslint-disable */
-    var request = new proto.android.emulation.control.JsepMsg();
-    request.setId(this.guid);
-    request.setMessage(JSON.stringify(jsonObject));
-    this.rtc.sendJsepMessage(request);
-  };
-
-  _streamJsepMessage = () => {
-    if (!this.connected) return;
-    var self = this;
-
-    this.stream = this.rtc.receiveJsepMessages(this.guid, {});
-    this.stream.on("data", (response) => {
-      const msg = response.getMessage();
-      self._handleJsepMessage(msg);
-    });
-    this.stream.on("error", (e) => {
-      console.log("Jsep message stream error:", e);
-      if (self.connected) {
-        console.log("Attempting to reconnect to jsep message stream.");
-        self._streamJsepMessage();
-      }
-    });
-    this.stream.on("end", (e) => {
-      if (self.connected) {
-        console.log("Stream end while still connected.. Reconnecting");
-        self._streamJsepMessage();
-      }
-    });
-  };
-
-  // This function is a fallback for v1 (go based proxy), that does not support streaming.
-  _receiveJsepMessage = () => {
-    if (!this.connected) return;
-
-    var self = this;
-
-    // This is a blocking call, that will return as soon as a series
-    // of messages have been made available, or if we reach a timeout
-    this.rtc.receiveJsepMessage(this.guid, {}, (err, response) => {
-      if (err) {
-        console.error(
-          "Failed to receive jsep message, disconnecting: " +
-            JSON.stringify(err)
-        );
-        this.disconnect();
-      }
-      const msg = response.getMessage();
-      // Handle only if we received a useful message.
-      // it is possible to get nothing if the server decides
-      // to kick us out.
-      if (msg) {
-        self._handleJsepMessage(response.getMessage());
-      }
-
-      // And pump messages. Note we must continue the message pump as we
-      // can receive new ICE candidates at any point in time.
-      if (self.active) {
-        self._receiveJsepMessage();
-      }
-    });
-  };
-}