Electron

说明

在 Electron 中使用远程控制功能，需要安装以下 SDK 包：

• @pano.video/panortc-electron-sdk: 用以实现基础功能和屏幕共享
• @pano.video/panorts: 用以实现远程控制

控制端

1. 监听接收方共享resolution变化事件

import { RtcEngine } from '@pano.video/panortc-electron-sdk';

window.rtcEngine = new RtcEngine();

let captureRect = 
{
  x: 0,
  y: 0,
  width: 0,
  height: 0,
};

window.rtcEngine.on(
  'userScreenResolutionChanged',
  (userId, width, height) => {
    console.log(
      `ResolutionChanged, userId: ${userId}, width: ${width}, height: ${height}`
    );
    if (controller.remoteUserId === userId) {
     captureRect = {
        x: 0,
        y: 0,
        width,
        height,
      };
      if (controller) {
        // 设置共享区域
        controller.setShareRect(captureRect);
      }
    }
  }
);

2. 发起远程控制请求 && 注册监听回调

import { RtsService, RemoteControl } from '@pano.video/panorts';

if (!RtsService.getInstance().isConnected) {
    console.log('信令连接正在初始化，请稍后重试');
  return;
}

// 移除之前的监听
removeObservers();

// 被远程控制的UserId
const userId = '123';

// 初始化 RemoteControl 
let controller = new RemoteControl(userId);

// 监听 远程控制回复
controller.once(
  RemoteControl.Events.onControlResponse,
  onControlResponse
);

// 监听 远程控制被取消
controller.once(
  RemoteControl.Events.onControlCancelled,
  onControlCancelled
);

// 监听 远程控制断开
controller.once(
  RemoteControl.Events.onConnectDisconnected,
     onConnectDisconnected
);

// 发起远程控制请求
// 是否以管理员权限控制对方电脑
const controlElevation = true; //可选参数，默认 false
controller.requestControl(userId, controlElevation);   
console.log('远程控制请求已发起');

3. 收到远程控制的回复 （ 同意 | 拒绝 | 长时间未响应）

onControlResponse = (result) => {
  const success = result === 0;
  let msg = '';
  const userName = 'xxx';
  switch (result) {
    case 0:
      msg = `您正在控制${userName}的屏幕`;
      break;
    case -16:
      msg = `${userName} 长时间没有响应你的请求控制，请稍后重试`;
      break;
    default:
      msg = '对方拒绝了你的远程控制请求';
      break;
  }
  console.log(msg);
  if (success) {
    /*
     * TODO: 需要在共享屏幕上面添加一个div，用于控制远程桌面
     * 大小和共享屏幕的div一致， zIndex 应大于 共享屏幕的div
     * ref 是 共享屏幕上面div 的引用
     */
    controller.startControl(ref);
    // 设置共享区域
    controller.setShareRect(captureRect);
  } else {
    // 重置控制状态
    resetControlStatus();
  }
};

4. 收到被控端取消远程控制的消息

onControlCancelled = () => {
  console.log('对方取消了远程控制');
  // 重置控制状态
  resetControlStatus();
};

5. 收到远程控制断开的消息

onConnectDisconnected = () => {
  console.log('远程控制已断开...');
  // 重置控制状态
  resetControlStatus();
};

6. 主动取消远程控制

cancelControl = () => {
  controller.cancelControl(userId);
  // 重置控制状态
  resetControlStatus();
};

7. 其它

// 移除监听
removeObservers = () => {
  controller.off(
    RemoteControl.Events.onControlResponse,
    onControlResponse
  );
  controller.off(
    RemoteControl.Events.onControlCancelled,
    onControlCancelled
  );
 controller.off(
    RemoteControl.Events.onConnectDisconnected,
    onConnectDisconnected
  );
};

// 重置控制状态
resetControlStatus = () => {
   removeObservers();
   controller = undefined;
};

被控端

1. 注册监听远程控制连接的事件 && 抓屏区域变化事件

// 抓屏区域变化事件：
let captureRect = 
{
  x: 0,
  y: 0,
  width: 0,
  height: 0,
};
rtcEngine.on('screenCaptureRegionChanged', (info) => {
  const { left, top, right, bottom } = info;
  captureRect = {
      x: left,
      y: top,
      width: right - left,
      height: bottom - top,
  };
  console.log('captureRect', captureRect);
    // 设置共享区域
  remoteControl.setShareRect(captureRect);
});

// 注册监听远程控制请求的事件
RtsService.getInstance().on(
  RtsService.Events.remoteControlConnected,
  onRemoteControlConnected
);

2. 远程控制连接建立回调

let remoteControl = undefined; // RemoteControl

onRemoteControlConnected = (v) => {
  // 链接建立成功之后
  removeObservers();
  remoteControl = v; // v: RemoteControl
  
  // 设置 rtcEngine
  remoteControl.setRtcEngine(window.rtcEngine);
  
  // 设置 抓屏区域
  remoteControl.setShareRect(captureRect);
  
  // 监听 远程控制断开
  remoteControl.on(
    RemoteControl.Events.onConnectDisconnected,
    onConnectDisconnected
  );
  
  // 监听 远程控制请求
  remoteControl.on(
    RemoteControl.Events.onControlRequest,
    showRequestModal
  );
  
  // 监听 远程控制被取消
  remoteControl.on(
    RemoteControl.Events.onControlCancelled,
    onControlCancelled
  );
  
  // 监听 远程控制回复
  remoteControl.on(
    RemoteControl.Events.onControlResponse,
    onControlResponse
  );
};

3. 收到控制端取消远程控制的消息

onControlCancelled = () => {
  console.log('对方已取消远程控制');
  // TODO Reset Status
};

4. 收到远程控制的回复 (长时间未响应请求)

 onControlResponse = (result: number) => {
  // 长时间没有响应请求，Hide Comfirm 提示框
  if (result === -16) {
     // TODO Reset Status
  }
};

5. 收到远程控制断开的消息

onConnectDisconnected = () => {
  // 关闭共享也会收到远程连接断开的消息，所以需要本地判断之前是否在远程控制
  if (true /*判断是否正在被控制*/) {
        console.log('远程控制连接已断开');
        // TODO Reset Status
  }
};

6. 收到远程控制请求的消息

showRequestModal = (msg /* msg : { from: string, controlElevation: boolean } */) => {
  // 获取到 发起请求的UserId
  const targetUserId = msg.from;
  // 是否以管理员权限操作你的您的电脑。
  const controlElevation = msg.controlElevation;
  // Show confirm 
  console.log('收到远程控制请求的消息:'，controlElevation);
  const r = confirm("收到远程控制请求");
  if (r === true) {
        // 接受远程控制请求 
        // controlElevation 可选参数，默认 false
     remoteControl.acceptControl(targetUserId，controlElevation);
  } else {
     // 拒绝远程控制请求
     remoteControl.rejectControl(targetUserId);
  }
};

7. 取消远程控制

cancelRemoteControl = () => {
  remoteControl.remoteUserId &&
  remoteControl.cancelControl(remoteControl.remoteUserId);
};

8. 在共享屏幕关闭的时候需要调用 stop

remoteControl.stop()