Code Monkey home page Code Monkey logo

ngx-remote-desktop's Introduction

ngx-remote-desktop

npm version

For installation and usage details go here

ngx-remote-desktop is an Angular component for connecting to a remote desktop using the guacamole remote desktop gateway

It has been built for use with Angular 5.0.0+. It has been tested in Chrome, Firefox, Edge and Safari. It makes heavy use of flex, therefore it will not work in browsers that do not support flex.

There is no dependency on any presentation component library / framework (ng-bootstrap, clarity etc.). This component does not make any assertions about how the backend web socket broker to guacd is implemented.

By default, there are no toolbar items, however, you can add as many toolbar items as you wish and create a handler in your component. You can also override the scss if you wish to change the styling. The RemoteDesktopManager exposes some useful methods for generating a screenshot or thumbnail, entering and exiting full screen mode, focusing and unfocusing the display, getting the client state, subscribing to the remote desktop clipboard and sending data to the remote desktop clipboard.

Screenshot

Features

  • Fluid screen resizing and scaling
  • Full screen mode
  • Toolbar (auto hide when in full screen mode)
  • Take a screenshot
  • Get a thumbnail
  • Subscribe to the remote clipboard observable and receive remote clipboard data
  • Send data to the remote clipboard
  • Status bar (optional) to provide contextual information

For a full implementation example, see the demo source code

Installation

To use ngx-remote-desktop in your project, install it via npm:

npm i @illgrenoble/ngx-remote-desktop --save

We also require two peer dependencies:

npm i @illgrenoble/guacamole-common-js --save
npm i screenfull --save

Thank you

Thank you to the guacamole team for a fantastic project.

ngx-remote-desktop's People

Contributors

aicampbell avatar jamhall 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

Watchers

 avatar  avatar  avatar  avatar

ngx-remote-desktop's Issues

"ERROR in ./node_modules/@illgrenoble/ngx-remote-desktop/src/services/index.ts"

Trying to make a simple app to test out this library and see if it can serve my needs, and when trying import your library and use it, I get this error from ng build:

ERROR in ./node_modules/@illgrenoble/ngx-remote-desktop/src/services/index.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/index.js):
Error: K:\AngularSandbox\RemoteDesktop\node_modules@illgrenoble\ngx-remote-desktop\src\services\index.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files'
or 'include' property.
The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format (https://goo.gl/jB3GVv).
at AngularCompilerPlugin.getCompiledFile (K:\AngularSandbox\RemoteDesktop\node_modules@ngtools\webpack\src\angular_compiler_plugin.js:753:23)
at plugin.done.then (K:\AngularSandbox\RemoteDesktop\node_modules@ngtools\webpack\src\loader.js:41:31)
at
at process._tickCallback (internal/process/next_tick.js:188:7)

I'm using Angular 6, your library says it supports Angular 5+. I'll give it a try seeing if downgrading fixes this.

Websocket connection failed : WebSocket is closed before the connection is established.

Hello , I'm using the package in my angular 6 app , and the Webstocket is closed before the connection is established. here's my code :

import { Component, OnInit } from '@angular/core';
import { RemoteDesktopManager } from '@illgrenoble/ngx-remote-desktop';
import { WebSocketTunnel } from '@illgrenoble/guacamole-common-js';

@component({
selector: 'app-rdp',
templateUrl: './rdp.component.html',
styleUrls: ['./rdp.component.scss']
})
export class RDPComponent implements OnInit {
private manager: RemoteDesktopManager;
handleHelp() {
console.log('Hello help');
}
handleEnterFullScreen() {
this.manager.setFullScreen(true);
}

handleExitFullScreen() {
    this.manager.setFullScreen(false);
}

ngOnInit() {
    const tunnel = new WebSocketTunnel('ws://localhost:4200');
    this.manager = new RemoteDesktopManager(tunnel);
    const parameters = {
        ip: '120.18.13.142',
        port : 5000,
        type: 'rdp',
        image: 'image/png',
        width: window.screen.width,
        height: window.screen.height,
    };     
    this.manager.connect(parameters);
}

}
what am I doing wrong ?

How i can connect this to nodejs server?

Hi ,thanks for this.
I want use guacamole-lite package on my server inside of guacamole-server. i try by connecting to server but i have errors: "Token validation failed" and "Unexpected token ! in JSON at position 0".

I write this code for connect:

const parameters = { token: { connection: { type: 'rdp', settings: { hostname: '127.0.0.1', username: 'Administrator', password: 'pAsSwOrD', 'enable-drive': true, 'create-drive-path': true, security: 'any', 'ignore-cert': true, 'enable-wallpaper': false, }, }, }, }; this.manager.connect(parameters);

Touch events not working ?

From what I've seen, the touch events in the guacamole-common-js should be directly translated to mouse events.

But it's not working for me. Anyone ?

Move isFocused into manager

Move this into the manager as it will make it easier to manage the state when passing around the RemoteDesktopManager instance object.

Can i use initial-program parameter ?

Hi i try to use a initial-program parameter and i received this message:
ERROR in ./demo/app/app.component.ts
Module parse failed: Unexpected token (71:41)
You may need an appropriate loader to handle this file type.
| username: 'test',
| password: 'test123',
| initial: program, 'firefox': ,
| image: 'image/png',
| audio: 'audio/L16',
@ ./demo/app/app.module.ts 11:22-48
@ ./demo/bootstrap.ts
@ multi (webpack)-dev-server/client?http://0.0.0.0:8383 webpack/hot/dev-server ./demo/bootstrap.ts

package-lock.json forces a compromised version of event-stream

Cloning the repo and performing an npm install is currently not possible without first deleting the package-lock.json. Something in the lockfile is referencing a version of event-stream that was pulled off npm because of a vulnerability involving stealing cryptocurrency.

npm start fail

Project is running at http://localhost:9999/
webpack output is served from /

[at-loader] Using [email protected] from typescript and "tsconfig.json" from D:/code/ngx-remote-desktop-master/tsconfig.json (in a forked process).

[at-loader]: Child process failed to process the request: TypeError: Cannot read property 'getEntryByPath' of undefined
at Object.fileExists (D:\code\ngx-remote-desktop-master\node_modules\typescript\lib\typescript.js:107655:39)
at Object.fileExists (D:\code\ngx-remote-desktop-master\node_modules\typescript\lib\typescript.js:78971:791)
at getDirectoryOrExtensionlessFileName (D:\code\ngx-remote-desktop-master\node_modules\typescript\lib\typescript.js:81877:26)
at tryGetModuleNameAsNodeModule (D:\code\ngx-remote-desktop-master\node_modules\typescript\lib\typescript.js:81868:35)
at getGlobalModuleSpecifier (D:\code\ngx-remote-desktop-master\node_modules\typescript\lib\typescript.js:81672:20)
at D:\code\ngx-remote-desktop-master\node_modules\typescript\lib\typescript.js:81655:88
at Object.mapDefined (D:\code\ngx-remote-desktop-master\node_modules\typescript\lib\typescript.js:2172:30)
at Object.getModuleSpecifiers (D:\code\ngx-remote-desktop-master\node_modules\typescript\lib\typescript.js:81655:29)
at getNameOfSymbolAsWritten (D:\code\ngx-remote-desktop-master\node_modules\typescript\lib\typescript.js:30239:81)
at symbolToTypeNode (D:\code\ngx-remote-desktop-master\node_modules\typescript\lib\typescript.js:30009:32)
(node:17256) DeprecationWarning: Chunk.modules is deprecated. Use Chunk.getNumberOfModules/mapModules/forEachModule/containsModule instead.

ERROR in ./demo/app/app.component.ts
Module build failed: Error: Final loader didn't return a Buffer or String
at D:\code\ngx-remote-desktop-master\node_modules\webpack\lib\NormalModule.js:204:46
at D:\code\ngx-remote-desktop-master\node_modules\loader-runner\lib\LoaderRunner.js:373:3
at iterateNormalLoaders (D:\code\ngx-remote-desktop-master\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
at iterateNormalLoaders (D:\code\ngx-remote-desktop-master\node_modules\loader-runner\lib\LoaderRunner.js:221:10)
at D:\code\ngx-remote-desktop-master\node_modules\loader-runner\lib\LoaderRunner.js:236:3
at context.callback (D:\code\ngx-remote-desktop-master\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at runMicrotasks ()
at processTicksAndRejections (internal/process/task_queues.js:93:5)
@ ./demo/app/app.module.ts 11:22-48
@ ./demo/bootstrap.ts
@ multi (webpack)-dev-server/client?http://localhost:9999 ./demo/bootstrap.ts
webpack: Failed to compile.

anyone face the same problem? how to fix it.

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.