首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >OnlyOffice 定制开发实践:庭审场景下的主控端屏幕跟随功能实现

OnlyOffice 定制开发实践:庭审场景下的主控端屏幕跟随功能实现

原创
作者头像
夫子
发布2026-06-19 11:28:34
发布2026-06-19 11:28:34
870
举报
文章被收录于专栏:WebOfficeWebOffice

​在大多数人认知中,OnlyOffice 的协同编辑能力已经足够满足多人在线编辑场景。但当 OnlyOffice 被应用到法院庭审、远程听证、会议记录、指挥调度等专业场景时,会发现一个问题:

文档内容虽然实时同步了,但人员关注的位置并没有同步。

这也是本次基于 OnlyOffice 9.x 的一个深度定制项目所解决的问题。


一、业务背景

某法院庭审系统中:

  • 书记员负责实时记录庭审内容
  • 法官查看庭审笔录
  • 律师查看庭审笔录
  • 其他旁听人员查看庭审笔录

系统采用 OnlyOffice Word 编辑器作为庭审记录载体。理论上,OnlyOffice 协同编辑已经能够实现:

书记员输入 → 所有人实时看到内容变化

但在实际使用过程中却出现新的问题。

例如:书记员已经记录到第 20 页:

代码语言:javascript
复制
第20页
↓
书记员正在输入

而某律师因为查看前面的内容,页面停留在第 5 页:

代码语言:javascript
复制
第5页
↓
正在翻阅历史记录

虽然数据已经同步成功:

  • 文档内容同步了
  • 光标位置同步了

但观看人员并不知道书记员当前记录到了哪里。需要频繁寻找当前输入位置。庭审过程中效率非常低。


二、OnlyOffice 原生能力存在的问题

场景

OnlyOffice 原生能力

存在的问题

文档内容同步

支持

无问题

协同编辑

支持

无问题

光标显示

支持

只能看到协作者光标

页面滚动同步

不支持

无法自动跟随

页码同步

不支持

不知道主控端所在位置

缩放比例同步

不支持

不同终端显示差异较大

强制观看模式

不支持

无法统一控制

主控端广播页面状态

不支持

无法实现屏幕联动

观看端跟随开关

不支持

无法自主选择

换句话说:

OnlyOffice 解决的是:

内容协同

而司法庭审场景需要的是:

视图协同

这是两个完全不同层面的能力。


三、定制目标

本次项目最终实现:

主控端看到什么,观看端就可以同步看到什么。

同时保留观看端自由查看能力。

整体模式如下:

最终形成:

主控模式

书记员控制全场视图。

跟随模式

观看端自动跟随书记员。

自由模式

观看端独立浏览历史内容。


四、总体技术方案

系统架构如下:

核心思想:把 OnlyOffice 的文档协同扩展为视图协同。


五、OnlyOffice 核心改造点

本项目并非简单插件开发。

由于官方接口无法满足需求,因此对 OnlyOffice 进行了底层增强。

1、自定义协作者广播通道

官方协同编辑消息机制无法直接用于页面同步。

因此新增:

代码语言:javascript
复制
BroadcastMessage()

能力。

支持:

  • 当前文档内广播
  • 所有协作者接收
  • 主控端忽略自身消息

实现:

代码语言:javascript
复制
主控端
  ↓
广播消息
  ↓
服务端
  ↓
所有观看端

2、新增页面状态采集 API

为了实现精准跟随。

需要获取:

状态

用途

当前页码

页面定位

缩放比例

统一显示

滚动位置

页面同步

光标位置

输入区域定位

可视区域高度

分辨率适配

新增接口:

代码语言:javascript
复制
getCurrentPage()
getZoom()
getScrollPosition()
getCursorPosition()

用于实时采集页面状态。


3、扩展插件通信机制

OnlyOffice 插件原生能力有限。

因此增加:

代码语言:javascript
复制
编辑器 → 插件
插件 → 编辑器

双向通信机制。

支持:

  • 获取编辑器状态
  • 获取页码信息
  • 获取滚动位置
  • 调整页面位置
  • 调整缩放比例
  • 接收广播消息

形成完整事件体系。


六、屏幕跟随插件设计

在此基础上开发独立插件:

插件入口

位于:

代码语言:javascript
复制
顶部工具栏
    ↓
插件面板
    ↓
屏幕跟随

点击后打开左侧侧边栏。


主控端界面

代码语言:javascript
复制
☑ 庭审主控模式

开启后:

代码语言:javascript
复制
开始广播页面状态

包括:

  • 页码
  • 缩放比例
  • 滚动位置
  • 输入位置

观看端界面

代码语言:javascript
复制
☑ 跟随主控端

代码语言:javascript
复制
☐ 自由查看

三种工作模式

模式

说明

主控模式

广播页面状态

跟随模式

自动同步定位

自由模式

不受影响

退出模式

停止同步


七、最难解决的问题:不同分辨率适配

如果简单同步滚动条位置:

代码语言:javascript
复制
主控端:1920×1080

观看端:1366×768

结果会出现:

  • 光标被挡住
  • 输入区域不在可视范围
  • 页面跳动

因此本项目采用:

输入位置可视区域算法

而不是简单同步滚动值。


同步逻辑


效果:

  • 24寸显示器
  • 笔记本
  • 双屏显示

都能保证:

代码语言:javascript
复制
当前输入位置可见

而不是简单跳转到相同坐标。


八、性能表现

项目验收指标:

指标

要求

页面同步延迟

≤2秒

编辑同步

实时

浏览器兼容

Chrome

浏览器兼容

Edge

文档类型

DOCX

OnlyOffice版本

9.x

实际测试中:

  • 页面同步接近实时
  • 输入区域持续可见
  • 不影响原有协同编辑能力

九、适用于哪些行业场景

虽然最初来源于法院项目。

但实际上可应用于大量行业。

行业

场景

法院

庭审笔录

检察院

讯问记录

公安

审讯记录

政务

会议纪要

企业

高层会议

教育

在线授课

培训

讲义同步

指挥中心

实时调度

本质上属于:

“主讲人视图同步”能力


十、总结

OnlyOffice 原生协同编辑解决的是:

代码语言:javascript
复制
内容同步

而本项目实现的是:

代码语言:javascript
复制
视图同步

通过对 OnlyOffice 9.x 进行深度定制:

  • 新增协作者广播通道
  • 新增页面状态采集 API
  • 新增编辑器与插件双向通信机制
  • 开发屏幕跟随插件
  • 实现跨分辨率智能定位

最终实现:

主控端实时记录,观看端实时跟随。

对于法院庭审、远程听证、会议记录、在线培训等场景,这类能力往往比单纯的协同编辑更有价值。

这也是标准版 OnlyOffice 社区版和商业版均不具备的一项行业级定制能力。

相关资源


OnlyOffice最新版本镜像:

https://onlyoffice.moqisoft.com/docs/install/docker

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、业务背景
  • 二、OnlyOffice 原生能力存在的问题
  • 三、定制目标
  • 四、总体技术方案
  • 五、OnlyOffice 核心改造点
    • 1、自定义协作者广播通道
    • 2、新增页面状态采集 API
    • 3、扩展插件通信机制
  • 六、屏幕跟随插件设计
    • 插件入口
    • 主控端界面
    • 观看端界面
    • 三种工作模式
  • 七、最难解决的问题:不同分辨率适配
    • 同步逻辑
  • 八、性能表现
  • 九、适用于哪些行业场景
  • 十、总结
  • 相关资源
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档