mozilla-frontend-infra / react-vnc-display Goto Github PK
View Code? Open in Web Editor NEWReact component to connect and display a remote VNC connection
License: Mozilla Public License 2.0
React component to connect and display a remote VNC connection
License: Mozilla Public License 2.0
Getting issues from going 1.0.5 to 1.1.1 where they complained about export file issue.
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>
)
}
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
There is no prop to specify the password for vnc
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.
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.
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.
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.
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,
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.