Keyboard, Video, Mouse (KVM)

Not sure how to implement? View the UI Toolkit KVM Module Tutorial for a step-by-step walkthrough on pre-requisites and implementing a React Control using the UI Toolkit.

Add Keyboard, Video, Mouse (KVM) Control

The following code snippet shows how to add KVM control to the React application. Open src/App.js, add the following code as show below:

Note

Change deviceId value to your device GUID mpsServer value to your MPS server address and appropriate port.

import React from "react";
import "./App.css";
import { KVM, MpsProvider } from "ui-toolkit";
import '../node_modules/ui-toolkit/i18n.ts';

function App() {
  const data = {
    mpsKey: '<MPS API key>'
  };
  return (
    <div className="App">
      <MpsProvider data={data}>
        <KVM deviceId="038d0240-045c-05f4-7706-980700080009"
        mpsServer="<192.168.1.38>:3000/relay"
        mouseDebounceTime="200"
        canvasHeight="100%"
        canvasWidth="100%"></KVM>
      </MpsProvider>
    </div>
  );
}
export default App;