Electron
说明
在 Electron 中使用远程控制功能,需要安装以下 SDK 包:
- @pano.video/panortc-electron-sdk: 用以实现基础功能和屏幕共享
- @pano.video/panorts: 用以实现远程控制
控制端
- 监听接收方共享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);
}
}
}
);
- 发起远程控制请求 && 注册监听回调
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('远程控制请求已发起');
- 收到远程控制的回复 ( 同意 | 拒绝 | 长时间未响应)
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();
}
};
- 收到被控端取消远程控制的消息
onControlCancelled = () => {
console.log('对方取消了远程控制');
// 重置控制状态
resetControlStatus();
};
- 收到远程控制断开的消息
onConnectDisconnected = () => {
console.log('远程控制已断开...');
// 重置控制状态
resetControlStatus();
};
- 主动取消远程控制
cancelControl = () => {
controller.cancelControl(userId);
// 重置控制状态
resetControlStatus();
};
- 其它
// 移除监听
removeObservers = () => {
controller.off(
RemoteControl.Events.onControlResponse,
onControlResponse
);
controller.off(
RemoteControl.Events.onControlCancelled,
onControlCancelled
);
controller.off(
RemoteControl.Events.onConnectDisconnected,
onConnectDisconnected
);
};
// 重置控制状态
resetControlStatus = () => {
removeObservers();
controller = undefined;
};
被控端
- 注册监听远程控制连接的事件 && 抓屏区域变化事件
// 抓屏区域变化事件:
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
);
- 远程控制连接建立回调
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
);
};
- 收到控制端取消远程控制的消息
onControlCancelled = () => {
console.log('对方已取消远程控制');
// TODO Reset Status
};
- 收到远程控制的回复 (长时间未响应请求)
onControlResponse = (result: number) => {
// 长时间没有响应请求,Hide Comfirm 提示框
if (result === -16) {
// TODO Reset Status
}
};
- 收到远程控制断开的消息
onConnectDisconnected = () => {
// 关闭共享也会收到远程连接断开的消息,所以需要本地判断之前是否在远程控制
if (true /*判断是否正在被控制*/) {
console.log('远程控制连接已断开');
// TODO Reset Status
}
};
- 收到远程控制请求的消息
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);
}
};
- 取消远程控制
cancelRemoteControl = () => {
remoteControl.remoteUserId &&
remoteControl.cancelControl(remoteControl.remoteUserId);
};
- 在共享屏幕关闭的时候需要调用
stop
remoteControl.stop()