This is a gutted version of the react-vnc project by Roerohan.
Its only purpose is having as few dependencies as possible, to make it compatible with another project.
All credit goes to the original contributors at the original project here
noVNC is a VNC client web application using which you can view a VNC stream directly on a browser. It uses websockify to convert the VNC stream into a websocket stream, which can be viewed on a browser. This library provides a React component wrapper around the noVNC web client.
Using this library, you can easily display a VNC stream on a page of your web application. Here is an example.
To install the library, you can run the following command:
npm i react-vncIn order to run the project locally, follow these steps:
- Clone the repository.
git clone git@github.com:roerohan/react-vnc.git
cd react-vnc- Install the packages and submodules.
npm install
git submodule update --init --recursive- To build the library, make changes inside the
libfolder, then run:
npm run build:libA VncScreen component is exposed from the library, to which you can pass the required and optional props. For example,
import React, { useRef } from 'react';
import { VncScreen } from 'react-vnc';
function App() {
const ref = useRef();
return (
<VncScreen
url='ws://your-vnc-url.com'
scaleViewport
background="#000000"
style={{
width: '75vw',
height: '75vh',
}}
ref={ref}
/>
);
}
export default App;The only required parameter is url, which must be a ws:// or a wss:// (websocket) URL for the library to function properly. noVNC can display only websocket URLs. All other props to VncScreen are optional. The following is a list (an interface) of all props along with their types.
interface Props {
url: string;
style?: object;
className?: string;
viewOnly?: boolean;
rfbOptions?: Partial<RFBOptions>;
focusOnClick?: boolean;
clipViewport?: boolean;
dragViewport?: boolean;
scaleViewport?: boolean;
resizeSession?: boolean;
showDotCursor?: boolean;
background?: string;
qualityLevel?: number;
compressionLevel?: number;
autoConnect?: number; // defaults to true
retryDuration?: number; // in milliseconds
debug?: boolean; // show logs in the console
loadingUI?: React.ReactNode; // custom component that is displayed when loading
onConnect?: (rfb?: RFB) => void;
onDisconnect?: (rfb?: RFB) => void;
onCredentialsRequired?: (rfb?: RFB) => void;
onSecurityFailure?: (e?: { detail: { status: number, reason: string } }) => void;
onClipboard?: (e?: { detail: { text: string } }) => void;
onBell?: () => void;
onDesktopName?: (e?: { detail: { name: string } }) => void;
onCapabilities?: (e?: { detail: { capabilities: RFB["capabilities"] } }) => void;
}
// The rfbOptions object in Props is of type Partial<RFBOptions>
interface RFBOptions {
shared: boolean;
credentials: {
username?: string;
password?: string;
target?: string;
};
repeaterID: string;
wsProtocols: string | string[];
}To know more about these props, check out API.md.
You can pass a ref to the VncScreen component, and access the connect() and disconnect() methods from the library. Check out #18 for more details.
The onConnect, onDisconnect, onCredentialsRequired, and onDesktopName props are optional, and there are existing defaults set for them. For example, the default onDisconnect function consists of some logic to retry connecting after a certain timeout (specified by retryDuration). Check out the default _onConnect and _onDisconnect functions in VncScreen.tsx for more details.
The onConnect, onDisconnect, and onCredentialsRequired callbacks can accept a single parameter rfb. This parameter is the RFB object, which is described by noVNC. Learn more about the RFB object here.
See the open issues for a list of proposed features (and known issues).
Distributed under the MIT License. See LICENSE for more information.