mozilla-frontend-infra / react-vnc-display Goto Github PK

View Code? Open in Web Editor NEW

67.0 4.0 18.0 2.03 MB

React component to connect and display a remote VNC connection

License: Mozilla Public License 2.0

JavaScript 100.00%

react-vnc-display's Introduction

react-vnc-display

React component to connect and display a remote VNC connection

Features from noVNC

Supports all modern browsers including mobile (iOS, Android)
Supported VNC encodings: raw, copyrect, rre, hextile, tight, tightPNG
WebSocket SSL/TLS encryption (i.e. "wss://") support
24-bit true color and 8 bit colour mapped
Supports desktop resize notification/pseudo-encoding
Local or remote cursor
Clipboard copy/paste
Clipping or scolling modes for large remote screens
Easy site integration and theming (3 example themes included)
Licensed under the MPL 2.0

Getting started

You can install react-vnc-display via Yarn or npm:

# If using Yarn:
yarn add react-vnc-display

# If using npm:
npm install --save react-vnc-display

The component from react-vnc-display is VncDisplay. This module can be required via ES imports, CommonJS require, or UMD.

import VncDisplay from 'react-vnc-display';

// using require
const VncDisplay = require('react-vnc-display');

Usage

After importing the component, it can be rendered with the required url prop:

import React from 'react';
import { render } from 'react-dom';
import VncDisplay from 'react-vnc-display';

render((
  <VncDisplay url="wss://some-remote-display:5991/path" />
), document.getElementById('root'));

By default the VncDisplay will start out with dimensions of 1280x720, but will be resized to the dimensions of the display once the connection has been established. You can pass noVNC callbacks as props to VncDisplay to customize this and additional behavior.

Props

VncDisplay accepts a single required property of URL:

Property	Type	Required?	Description
`url`	String	✓	The URL for which to create a remote VNC connection. Should include the protocol, host, port, and path.

In addition, most of the properties available to noVNC can be provided and will be passed through to the noVNC instance. Here are a few useful props:

Property	Type	Description
`onClipboard`	`func`	Execute a function when the VNC connection's clipboard updates.
`onUpdateState`	`func`	Execute a function when the state of the VNC connection changes.
`shared`	`bool`	Specify whether a VNC connection should disconnect other connections before connecting.
`wsProtocols`	`arrayOf(string)`	Specify a list of WebSocket protocols this connection should support.

Development and Contributing

This repository uses Neutrino and neutrino-preset-react-components for developing, previewing, and building React components. To get started:

Fork and clone this repo.
Install the dependencies with yarn.
Start the development servers with yarn start. Open a browser to http://localhost:5000 to preview the React components.
Use CTRL-C to exit the dev server.
Use yarn build to generate the compiled component for publishing to npm.

Feel free to open an issue, submit a pull request, or contribute however you would like. Understand that this documentation is still a work in progress, so file an issue or submit a PR to ask questions or make improvements. Thanks!

react-vnc-display's People

Contributors

Stargazers

Watchers

Forkers

leadrive erikh wip-alex viljarvoidula hnnhwng alpha-drive jasonsims helfi92 eliperelman etidbury sapzape im-asad glennpatrickmurphy forlayo decipherindustries brentbaccala weequan93 billchen0001

react-vnc-display's Issues

Width/height is not respected

I'm setting width & height like below. However, the width/height always revert to the width/height of the window.

const App = () => {
    const width = `${window.innerWidth - 80}px`
    const height = `${window.innerHeight}px`
    const style = {
      width,
      height,
    }

    console.log(width, height) // prints: 720 480

    return (
      <section className="victron-wrapper">
        <VncDisplay url="ws://venus.local:81" style={style} width={width} height={height} onUpdateState={this.handleStateUpdate} />
        {status !== 'connected' && (
          <div className="victron-status-overlay">
            <div className="victron-status-inner">
              <Result status={status === 'error' ? 'warning' : 'info'} title={status === 'error' ? 'Venus GX is offline' : 'Verbinden met Venus GX...'} style={{ margin: 0, padding: 0 }} />
            </div>
          </div>
        )}
      </section>
    )
}

Add a password prop

There is no prop to specify the password for vnc

Client instantly disconnects from VNC server

Hi,

I have websockify pointing to a VNC server. I have checked everything is working using the noVNC internal webserver and I can get to my remote desktop.

When I'm connecting through react-vnc-display I don't end up at a desktop, just a white page.

On the VNC server logs I see this:

20/12/19 10:54:15 Got connection from client 127.0.0.1
20/12/19 10:54:15 Using protocol version 3.8
20/12/19 10:54:15 Enabling TightVNC protocol extensions
20/12/19 10:54:15 rfbProcessClientAuthType: client gone
20/12/19 10:54:15 Client 127.0.0.1 gone
20/12/19 10:54:15 Statistics:
20/12/19 10:54:15 framebuffer updates 0, rectangles 0, bytes 0

Any idea what might be causing that?

Thank you for your help,

Error during WebSocket handshake: Unexpected response code: 200

InB4, "this issue already exists": I checked this issue and the answer there is very old, vague, doesn't provide context for how to implement it in code.

Background: I have a scientific device with a screen on it and it provides me with an IP address that, if I put it into a VNC app, I can see and control the screen. This is currently out in the world and working fine.

Goal: I want to build a custom VNC app so I have a branded experience for my customers.

Using x to keep the URL private...
Problem: <VncDisplay url="ws://xx.xxx.xxx.xxx" /> gives me back the following error:

websock.js:262 WebSocket connection to 'ws://xx.xxx.xxx.xxx/' failed: Error during WebSocket handshake: Unexpected response code: 200

In the Chrome DevTools Network tab I have the following in the Headers:

Request URL: ws://xx.xxx.xxx.xxx/
Provisional headers are shown
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.9
Cache-Control: no-cache
Connection: Upgrade
Host: xx.xxx.xxx.xxx
Origin: http://localhost:3000
Pragma: no-cache
Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits
Sec-WebSocket-Key: a string...(wB, etc)
Sec-WebSocket-Protocol: binary
Sec-WebSocket-Version: 13
Upgrade: websocket
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.132 Safari/537.36

Update componentWillUpdate to componentDidUpdate

componentWillReceiveProps(nextProps) {
    if (!this.rfb) {
      return;
    }

    if (nextProps.scale !== this.props.scale) {
      this.rfb.get_display().set_scale(nextProps.scale || 1);
      this.get_mouse().set_scale(nextProps.scale || 1);
    }
  }

This method is deprecated by React Team.

WebSocket connection to 'ws://xxx.xxx.x.x:5901/' failed:

I couldn't test the application. I'm getting the error as WebSocket connection to 'ws://xxx.xxx.x.x:5901/' failed: Error in connection establishment:

I am trying to connect with tightvnc server installed in windows machine from ubuntu.

Export path issue

Getting issues from going 1.0.5 to 1.1.1 where they complained about export file issue.

Clipboard data

How does the clipboard function works. I tried the following way:
onClipboardEvent = (e) => { console.log("EVENT HAS OCCURRED: "); console.log(e.clipboardData); };

It gives me undefined though the copy event triggers this method.
Can someone help me with this? I want the clipboard data from remote when something is copied to remote's clipboard.

VncDisplay url configuration doesn't seems to be working | Please provide some sample

Hello Team,

I have been trying to setup the React VNC Display in my local machine and when I given the URL in the VncDisplay component, it is not displaying anything back to Web Page.

This is how I am providing the URL, though it returns the status code as 101 but I see the message as : "Received a broken close frame containing a reserved status code."

Here are the request parameters:

Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Cache-Control: no-cache
Connection: Upgrade
Host: macc02vk4lrg8wn:6013
Origin: http://localhost:3004
Pragma: no-cache
Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits
Sec-WebSocket-Key: E4KxkSCwmp02t2hEBZIuhQ==
Sec-WebSocket-Protocol: binary
Sec-WebSocket-Version: 13
Upgrade: websocket
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.125 Safari/537.36

Can someone help me with sample URL, how it I should configure?

Looking forward for response.

Thanks.

Installation issue

npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@types%2freact-vnc-display - Not found
npm ERR! 404
npm ERR! 404 '@types/react-vnc-display@*' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.