@illgrenoble/ngx-remote-desktop
Version:
ngx-remote-desktop is an Angular2+ module for connecting to a remote desktop using the guacamole protocol
174 lines (139 loc) • 5.8 kB
Markdown
# Usage
This example will give a basic remote desktop client with with four toolbar items and their associated handlers: take a screenshot, help, enter full screen and exit full screen. The example also shows you how you can override the connecting messages.
In your `app.component.ts`, you define a new remote desktop client like this:
```typescript
import { Component, OnInit } from '@angular/core';
import { RemoteDesktopManager } from '@illgrenoble/ngx-remote-desktop';
import { WebSocketTunnel } from '@illgrenoble/guacamole-common-js';
export class AppComponent implements OnInit {
private manager: RemoteDesktopManager;
handleHelp() {
console.log('Hello help');
}
handleScreenshot() {
this.client.createScreenshot(blob => {
if (blob) {
// do something with blob....
}
});
}
handleEnterFullScreen() {
this.manager.setFullScreen(true);
}
handleExitFullScreen() {
this.manager.setFullScreen(false);
}
ngOnInit() {
// Setup tunnel. The tunnel can be either: WebsocketTunnel, HTTPTunnel or ChainedTunnel
const tunnel = new WebSocketTunnel('ws://localhost:8080');
/**
* Create an instance of the remote desktop manager by
* passing in the tunnel and parameters
*/
this.manager = new RemoteDesktopManager(tunnel);
// URL parameters (image, audio and other query parameters you want to send to the tunnel.)
const parameters = {
ip: '192.168.13.232',
image: 'image/png',
width: window.screen.width,
height: window.screen.height,
};
/*
* The manager will establish a connection to:
* ws://localhost:8080?width=n&height=n&ip=192.168.13.232&image=image/png
*/
this.manager.connect(parameters);
}
}
```
# Other features
All of these features below are used in the demo application.
The `RemoteDesktopManager` exposes some useful methods.
#### Focusing and unfocusing the display
Sometimes you need to unfocus the display so you can use keyboard events inside another component (i.e. text input inside a modal)
```typescript
this.manager.setFocused(true|false);
```
#### Set full screen mode
Changing this value will bring the display in and out of full screen mode
```typescript
this.manager.setFullScreen(true|false);
```
#### Screenshot
Take a screenshot of the connected remote desktop.
```typescript
this.manager.createScreenshot(blob => {
if (blob) {
// do something with blob....
}
});
```
#### Thumbnail
Get a thumbnail of the connected remote desktop
```typescript
const data = this.manager.createThumbnail(340, 240) {
// do something with the data image url...
```
#### Receive data from the remote clipboard
Subscribe to the remote clipboard and receive data when text is cut or copied
```typescript
this.manager.onRemoteClipboardData.subscribe(data => console.log('Got clipboard data', data));
```
#### Send data to the remote clipboard
```typescript
this.manager.sendRemoteClipboardData('Hello clipboard!');
```
#### Get the current guacamole connection state
```typescript
const state = this.manager.getState();
if(state === RemoteDesktopManager.STATE.DISCONNECTED) {
console.log('Oh no!');
}
```
#### Getting access to the guacamole client and tunnel
```typescript
const client = this.manager.getClient();
const tunnel = this.manager.getTunnel();
```
### Get notified when a tunnel instruction is recevied
This can be useful for generating stats, .i.e. display the total data received from the tunnel
```typescript
this.manager.onTunnelInstruction.subscribe(instruction => {
if (instruction && instruction.opcode === 'blob') {
const data = atob(instruction.parameters[1]);
this.totalTunnelDataReceived += data.length;
}
});
```