Here is my code:
FE
video-production.component.html
<div id="appDisplay" class="row g-0 justify-content-center app-display"></div>
video-production.component.ts
import { Component, OnInit, ViewEncapsulation, ViewChild, ElementRef,
HostListener } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';
import { HTTPTunnel, Client, Display, Keyboard, Mouse, Layer } from
'@illgrenoble/guacamole-common-js';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import * as FileSaver from 'file-saver';
import { DomSanitizer } from '@angular/platform-browser';
import { RemoteDesktopManager, RemoteDesktopComponent } from
'@illgrenoble/ngx-remote-desktop';
//import { ClipboardModalComponent } from '../clipboard-modal';
import { _getFocusedElementPierceShadowDom } from '@angular/cdk/platform';
import { BaseApiService } from '../../service/base-service/base-api.service';
import { Subscription } from 'rxjs';
import { DynamicDialogRef } from 'primeng/dynamicdialog';
import { DynamicDialogConfig } from 'primeng/dynamicdialog';
@Component({
selector: 'app-video-production',
templateUrl: './video-production.component.html',
styleUrls: ['./video-production.component.scss'],
encapsulation: ViewEncapsulation.None,
})
export class VideoProductionComponent implements OnInit {
public manager: RemoteDesktopManager;
private desktopComponent: RemoteDesktopComponent;
public captures: Array<any>;
@ViewChild("canvas") public canvas: ElementRef;
private screenHeight;
private screenWidth;
private display: Display;
constructor(private ngbModal: NgbModal,
private snackBar: MatSnackBar,
private _sanitizer: DomSanitizer,
private baseService: BaseApiService,
public ref: DynamicDialogRef,
public config: DynamicDialogConfig
) {
this.captures = [];
}
private baseUrl = localStorage.getItem('baseUrl');
private mouse: Mouse;
private keyboard: Keyboard;
private subscriptions: Subscription[] = [];
ngOnInit() {
const tunnel = new HTTPTunnel(this.baseUrl + '/api/tunnel', false, {
'Authorization': `Bearer ${this.baseService.getToken()}` });
this.manager = new RemoteDesktopManager(tunnel);
this.handleConnect();
this.display = this.manager.getClient().getDisplay();
let displayContainer = document.getElementById('appDisplay');
let displayElement = this.manager.getClient().getDisplay().getElement();
displayContainer.appendChild(displayElement);
this.desktopComponent = new RemoteDesktopComponent();
this.desktopComponent
this.createDisplayInputs(displayContainer);
this.bindSubscriptions();
this.manager.onTunnelInstruction.subscribe();
}
handleScreenshot(): void {
this.manager.createScreenshot(blob => {
if (blob) {
FileSaver.saveAs(blob, `screenshot.png`);
}
});
}
clickCloseVmix() {
this.ref.close();
}
createModal(classRef) {
this.manager.setFocused(false);
const modal = this.ngbModal.open(classRef, {
size: 'lg',
windowClass: 'modal-xxl',
container: '.ngx-remote-desktop',
keyboard: true
});
modal.componentInstance.manager = this.manager;
return modal;
}
handleDisconnect(): void {
this.manager.getClient().disconnect();
}
handleEnterFullScreen() {
this.manager.setFullScreen(true);
}
handleExitFullScreen() {
this.manager.setFullScreen(false);
}
private getClient(): Client {
return this.manager.getClient();
}
private handleMouseState(mouseState: any): void {
this.getClient().sendMouseState(mouseState);
}
handleConnect() {
const parameters = {
hostname: 'localhost',
port: 8081,
image: 'image/png',
audio: 'audio/L16',
dpi: 96,
width: window.screen.width,
height: window.screen.height,
};
this.manager.connect(parameters);
}
private getDisplay(): Display {
return this.manager.getClient().getDisplay();
}
private handleKeyUp(key: any): void {
this.getClient().sendKeyEvent(0, key);
}
private handleKeyDown(key: any): void {
this.getClient().sendKeyEvent(1, key);
}
private createDisplayInputs(display): void {
this.mouse = new Mouse(display);
this.keyboard = new Keyboard(window.document);
}
private resetKeyboard(): void {
if (this.keyboard) {
this.keyboard.reset();
}
}
private bindDisplayInputListeners(): void {
this.removeDisplayInputListeners();
this.mouse.onmousedown = this.mouse.onmouseup = this.mouse.onmousemove
= this.handleMouseState.bind(this);
this.keyboard.onkeyup = this.handleKeyUp.bind(this);
this.keyboard.onkeydown = this.handleKeyDown.bind(this);
}
private handleFocused(newFocused: boolean): void {
if (newFocused) {
this.bindDisplayInputListeners();
} else {
this.removeDisplayInputListeners();
}
}
/**
* Bind all subscriptions
*/
private bindSubscriptions(): void {
this.subscriptions.push(this.manager.onKeyboardReset.subscribe(_ => {
console.log("AAA 3 onKeyboardReset bindSubscriptions " +
JSON.stringify(_)),
this.resetKeyboard()
}));
this.subscriptions.push(this.manager.onFocused.subscribe(this.handleFocused.bind(this)));
}
/**
* Unbind all subscriptions
*/
private unbindSubscriptions(): void {
this.subscriptions.forEach(subscription => subscription.unsubscribe());
}
/**
* Remove all input listeners
*/
private removeDisplayInputListeners(): void {
if (this.keyboard) {
this.keyboard.onkeydown = null;
this.keyboard.onkeyup = null;
}
/*if (this.mouse) {
this.mouse.onmousedown = this.mouse.onmouseup =
this.mouse.onmousemove = null;
}*/
}
}
This is my package.json:
{
"name": "frontend",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"start_demo": "ng serve --proxy-config proxy.conf.json",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~12.2.3",
"@angular/cdk": "~12.2.3",
"@angular/common": "~12.2.3",
"@angular/compiler": "~12.2.3",
"@angular/core": "~12.2.3",
"@angular/forms": "~12.2.3",
"@angular/http": "^7.2.16",
"@angular/localize": "^12.2.3",
"@angular/material": "^12.2.13",
"@angular/material-moment-adapter": "^12.2.3",
"@angular/platform-browser": "~12.2.3",
"@angular/platform-browser-dynamic": "~12.2.3",
"@angular/router": "~12.2.3",
"@ctrl/ngx-codemirror": "^1.1.0",
"@fullcalendar/core": "^5.11.3",
"@illgrenoble/guacamole-common-js": "^0.0.1",
"@illgrenoble/ngx-remote-desktop": "^1.4.2",
"@ng-bootstrap/ng-bootstrap": "^9.0.1",
"@ngx-translate/core": "^10.0.1",
"@ngx-translate/http-loader": "^4.0.0",
"angular-http-server": "^1.11.1",
"angular-l10n": "~3.4.1",
"angular2-toaster": "^8.0.0",
"booking_calendar": "^1.0.40",
"buffer": "^5.5.0",
"chart.js": "^2.9.3",
"codemirror": "^5.34.0",
"electron": "^20.1.0",
"events": "^3.1.0",
"file-saver": "^2.0.2",
"moment": "^2.24.0",
"ng2-charts": "^2.3.0",
"ng2-handsontable": "^2.1.0-rc.3",
"ngx-cookie-service": "^14.0.1",
"ngx-fs": "0.0.1",
"ngx-pagination": "^6.0.2",
"primeicons": "^2.0.0",
"primeng": "9.0.2",
"quill": "^1.3.7",
"rxjs": "~6.6.7",
"rxjs-compat": "^6.5.5",
"sass": "^1.54.8",
"screenfull": "^3.3.2",
"stream": "0.0.2",
"timers": "^0.1.1",
"tslib": "^2.5.2",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "^12.2.18",
"@angular/cli": "^12.2.2",
"@angular/compiler-cli": "~12.2.3",
"@angular/language-service": "~12.2.3",
"@types/jasmine": "~3.6.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "^6.0.0",
"concurrently": "^7.3.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.4",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~7.0.0",
"tslint": "~6.1.0",
"typescript": "~4.3.5",
"webpack": "^5.74.0",
"webpack-dev-server": "^3.11.3"
}
}
BE GuacamoleController
configuration.setProtocol("rdp");
configuration.setParameter("hostname", "vmix.local");
configuration.setParameter("port", "3389");
configuration.setParameter("username", "vmix");
configuration.setParameter("password", "password");
configuration.setParameter("ignore-cert", "true");
// Connect to guacd, proxying a connection to the VNC server above
GuacamoleSocket socket = new ConfiguredGuacamoleSocket(
new InetGuacamoleSocket(server, port),
configuration
);
// Create tunnel from now-configured socket
org.apache.guacamole.net.GuacamoleTunnel tunnel = new
SimpleGuacamoleTunnel(socket);
return tunnel;
Here is a preview of the bug:
https://imgtr.ee/i/double-cursor.plNpz
Thanks,
Manuel
-----Original Message-----
From: Nick Couchman <[email protected]>
Sent: martedì 6 giugno 2023 17:07
To: [email protected]
Subject: Re: Double cursor Guacamole Angular12 Client
******This mail has been sent from an external source. Do not reply to it, or
open any links/attachments unless you are sure of the sender's identity.******
On Tue, Jun 6, 2023 at 4:1 AM Natale, Manuel Giovanni
<[email protected]> wrote:
>
> Hi,
>
>
>
> I’m having problems with my project, I’m using Angular12 and Java18 with
> Guacamole packages. I get double cursor in the remote window I get with RDP.
> Can you give me some help please?
>
>
You'll need to provide more detail than this - the full Guacamole Client does
not have this issue, so it definitely can be handled correctly, but, without
seeing your code and knowing how you're leveraging things, it's hard to say
exactly what the issue is.
If you look at the Guacamole client code, specifically the guacClient directive
and the display CSS file, you'll see a bunch of code that deals with handling
how and when the cursor is displayed:
https://github.com/apache/guacamole-client/blob/master/guacamole/src/main/frontend/src/app/client/directives/guacClient.js
https://github.com/apache/guacamole-client/blob/master/guacamole/src/main/frontend/src/app/client/styles/display.css
-Nick
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
This message contains information that may be privileged or confidential and is
the property of the Capgemini Group. It is intended only for the person to whom
it is addressed. If you are not the intended recipient, you are not authorized
to read, print, retain, copy, disseminate, distribute, or use this message or
any part thereof. If you receive this message in error, please notify the
sender immediately and delete all copies of this message.
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
