RdsViewer.jsx

Go to the documentation of this file.

import { useEffect, useRef, useState } from 'react';
import { useParams } from 'react-router-dom';
import MainLayout from '../components/Layout/MainLayout';
import { apiFetch } from '../lib/api';
 
function getWsUrl(agentId, token) {
  const loc = window.location;
  const proto = loc.protocol === 'https:' ? 'wss' : 'ws';
  const host = loc.host;
  return `${proto}://${host}/rds/stream/${agentId}?token=${token}`;
}
 
 
export default function RdsViewer() {
  const { agentId } = useParams();
  const [status, setStatus] = useState('disconnected');
  const [error, setError] = useState('');
  const [clipboard, setClipboard] = useState('');
  const [agentClipboard, setAgentClipboard] = useState('');
  const videoRef = useRef();
  const wsRef = useRef();
  const token = localStorage.getItem('jwt') || '';
 
  // Clipboard send
  const sendClipboard = () => {
    if (wsRef.current && wsRef.current.readyState === 1) {
      wsRef.current.send(JSON.stringify({ type: 'clipboard', data: clipboard }));
    }
  };
 
  // Clipboard receive
  const handleClipboardMessage = (data) => {
    setAgentClipboard(data.data || '');
  };
 
  useEffect(() => {
    if (!agentId || !token) return;
    setStatus('connecting');
    setError('');
    const ws = new WebSocket(getWsUrl(agentId, token));
    ws.binaryType = 'arraybuffer';
    wsRef.current = ws;
    let mediaSource, sourceBuffer;
    let queue = [];
    ws.onopen = () => setStatus('connected');
    ws.onerror = (e) => setError('WebSocket error');
    ws.onclose = () => setStatus('disconnected');
    ws.onmessage = (event) => {
      // Try to parse as JSON for clipboard, else treat as video
      let parsed = null;
      if (typeof event.data === 'string') {
        try { parsed = JSON.parse(event.data); } catch {}
      }
      if (parsed && parsed.type === 'clipboard') {
        handleClipboardMessage(parsed);
        return;
      }
      // Video stream
      if (!mediaSource) {
        mediaSource = new window.MediaSource();
        videoRef.current.src = URL.createObjectURL(mediaSource);
        mediaSource.addEventListener('sourceopen', () => {
          sourceBuffer = mediaSource.addSourceBuffer('video/mp2t');
          sourceBuffer.addEventListener('updateend', () => {
            if (queue.length > 0 && !sourceBuffer.updating) {
              sourceBuffer.appendBuffer(queue.shift());
            }
          });
        });
      }
      if (sourceBuffer && !sourceBuffer.updating && event.data instanceof ArrayBuffer) {
        sourceBuffer.appendBuffer(new Uint8Array(event.data));
      } else if (sourceBuffer && event.data instanceof ArrayBuffer) {
        queue.push(new Uint8Array(event.data));
      }
    };
    return () => {
      ws.close();
      if (mediaSource) mediaSource.endOfStream();
    };
  }, [agentId, token]);
 
  // Copy agent clipboard to local clipboard
  const copyAgentClipboard = async () => {
    try {
      await navigator.clipboard.writeText(agentClipboard);
    } catch {}
  };
 
  return (
    <MainLayout>
      <h2>Remote Desktop Session</h2>
      <div>Status: {status}</div>
      {error && <div className="error">{error}</div>}
      <video ref={videoRef} autoPlay controls style={{ width: '100%', background: '#000' }} />
      <div style={{ marginTop: 16 }}>
        <h4>Clipboard</h4>
        <textarea
          value={clipboard}
          onChange={e => setClipboard(e.target.value)}
          placeholder="Type here to send clipboard to agent"
          rows={2}
          style={{ width: '100%' }}
        />
        <button onClick={sendClipboard} disabled={status !== 'connected'}>Send to Agent</button>
        <div style={{ marginTop: 8 }}>
          <strong>Agent Clipboard:</strong>
          <textarea
            value={agentClipboard}
            readOnly
            rows={2}
            style={{ width: '100%' }}
          />
          <button onClick={copyAgentClipboard} disabled={!agentClipboard}>Copy to Local Clipboard</button>
        </div>
      </div>
    </MainLayout>
  );
}