【技术实现步骤摘要】
本专利技术涉及远程服务信息通信，具体的说是一种基于html的远程屏幕共享与录屏方法及装置。
技术介绍
1、现有的屏幕共享与录屏存在以下问题：
2、1、隐私方面，当屏幕共享功能被开启时，其他用户或参会者可以看到屏幕上的所有内容，导致个人隐私的泄露，包括各种个人信息、银行卡信息、账号密码信息、本地隐私文件等。
3、2、安全方面，屏幕共享过程中容易存在数据泄露的风险，可能利用屏幕共享功能截取、记录或传播屏幕内容，进而实施诈骗或其他非法活动。
4、3、多端兼容问题，不同操作系统和设备之间的屏幕共享和录屏功能可能存在差异，导致屏幕共享和录屏功能受限或无法正常使用。
技术实现思路
1、屏幕共享和录屏功能在视频会议等应用中被广泛采用，但其作为通用工具的使用方式存在一些问题，在共享屏幕时往往不加选择地显示所有内容，从而忽略了隐私性和安全性等重要方面的保护，基于此，本专利技术提供一种基于html的远程屏幕共享与录屏方法及装置，应用于远程政务办事、远程视频勘察、远程客服咨询等服务场景，保证用户在操作过程中不出现隐私与数据泄露问题，同时兼容不同操作系统与设备，并且支持视频录制保存共享内容，以便追溯问题。
2、第一方面，本专利技术提供一种基于html的远程屏幕共享与录屏方法，解决上述技术问题采用的技术方案如下：
3、一种基于html的远程屏幕共享与录屏方法，该方法涉及至少两台终端，其中一台终端称为发起共享用户端，剩余终端称为接收共享用户端，所有终
4、(1)选取页面html节点作为共享内容，将html节点转为图片；
5、(2)添加水印画布，将图片转成视频流；
6、(3)监听html节点变化更新视频流，结合webrtc传输视频流；
7、(4)拉取和播放视频流，进行视频录制与存储。
8、可选的，执行步骤(1)，选取页面html节点作为共享内容，将html节点转为图片，具体包括如下操作：
9、创建一个html文件，包含一个canvas元素和一个按钮，该canvas元素即画布a；
10、当点击按钮时，通过htmlcanvaselement.getcontext('2d')获取画布a的上下文，确定画布a在html节点中的坐标和尺寸；
11、使用domtoimage库将html节点转换为指定格式的图片，指定格式包括svg、png或jpeg。
12、进一步可选的，执行步骤(2)，添加水印画布，将图片转成视频流，具体包括如下操作：
13、首先，创建一个html文件，包含两个canvas元素：画布a和画布b；
14、然后，使用javascript的drawimage函数将图片绘制在画布a上，在画布b上添加水印坐标和文本；
15、最后，将画布b绘制到画布a上，并使用htmlcanvaselement.capturestream函数将画布a的绘制过程转变成视频流。
16、进一步可选的，执行步骤(3)，监听html节点变化更新视频流，结合webrtc传输视频流，具体包括如下操作：
17、首先设定视频流控制帧率，再创建监听事件；
18、当html节点发生触摸结束touchend、滚动条操作scroll、键盘事件tap、元素改变change、释放键盘keyup事件时更新视频流；
19、当html节点发生接触屏幕touchstart、滑动屏幕touchmove或不操作时，推迟指定时间后更新视频流。
20、进一步可选的，执行步骤(4)，拉取和播放视频流，进行视频录制与存储，具体包括如下操作：
21、获取远程共享屏幕的视频流，创建一个video元素并附加流，配置autoplay属性实现自动播放；
22、创建一个mediarecorder对象，并传递获取的视频流，点击“开始录制”按钮后，开始录制视频，点击“停止录制”按钮后，停止录制并将录制的视频保存为一个webm格式的文件。
23、第二方面，本专利技术提供一种基于html的远程屏幕共享与录屏装置，解决上述技术问题采用的技术方案如下：
24、一种基于html的远程屏幕共享与录屏装置，其实现涉及至少两台终端，其中一台终端称为发起共享用户端，剩余终端称为接收共享用户端，所有终端用户进行认证登录后，进行远程屏幕共享与录屏，所述装置包括部署在终端的如下模块：
25、选择转换模块，用于选取页面html节点作为共享内容，将html节点转为图片；
26、添加转换模块，用于添加水印画布，将图片转成视频流；
27、更新传输模块，用于监听html节点变化更新视频流，结合webrtc传输视频流；
28、播放存储模块，用于拉取和播放视频流，同时进行视频录制与存储。
29、可选的，所涉及选择转换模块选取页面html节点作为共享内容，将html节点转为图片，具体过程如下：
30、创建一个html文件，包含一个canvas元素和一个按钮，该canvas元素即画布a；
31、当点击按钮时，通过htmlcanvaselement.getcontext('2d')获取画布a的上下文，确定画布a在html节点中的坐标和尺寸；
32、使用domtoimage库将html节点转换为指定格式的图片，指定格式包括svg、png或jpeg。
33、进一步可选的，所涉及添加转换模块添加水印画布，将图片转成视频流，具体过程如下：
34、首先，创建一个html文件，包含两个canvas元素：画布a和画布b；
35、然后，使用javascript的drawimage函数将图片绘制在画布a上，在画布b上添加水印坐标和文本；
36、最后，将画布b绘制到画布a上，并使用htmlcanvaselement.capturestream函数将画布a的绘制过程转变成视频流。
37、进一步可选的，所涉及更新传输模块监听html节点变化更新视频流，结合webrtc传输视频流，具体过程如下：
38、首先设定视频流控制帧率，再创建监听事件；
39、当html节点发生触摸结束touchend、滚动条操作scroll、键盘事件tap、元素改变change、释放键盘keyup事件时更新视频流；
40、当html节点发生接触屏幕touchstart、滑动屏幕touchmove或不操作时，推迟指定时间后更新视频流。
41、进一步可选的，所涉及播放存储模块拉取和播放视频流，同时进行视频录制与存储，具体过程如下：
42、获取远程共享屏幕的视频流，创建一个video元素并附加流，配置autoplay属性实现自动播放；
43、创建一个med本文档来自技高网...
【技术保护点】
1.一种基于HTML的远程屏幕共享与录屏方法，其特征在于，该方法涉及至少两台终端，其中一台终端称为发起共享用户端，剩余终端称为接收共享用户端，所有终端用户进行认证登录后，进行远程屏幕共享与录屏，实现流程包括：
2.根据权利要求1所述的一种基于HTML的远程屏幕共享与录屏方法，其特征在于，执行步骤(1)，选取页面HTML节点作为共享内容，将HTML节点转为图片，具体包括如下操作：
3.根据权利要求2所述的一种基于HTML的远程屏幕共享与录屏方法，其特征在于，执行步骤(2)，添加水印画布，将图片转成视频流，具体包括如下操作：
4.根据权利要求3所述的一种基于HTML的远程屏幕共享与录屏方法，其特征在于，执行步骤(3)，监听HTML节点变化更新视频流，结合WebRTC传输视频流，具体包括如下操作：
5.根据权利要求4所述的一种基于HTML的远程屏幕共享与录屏方法，其特征在于，执行步骤(4)，拉取和播放视频流，进行视频录制与存储，具体包括如下操作：
6.一种基于HTML的远程屏幕共享与录屏装置，其特征在于，其实现涉及至少两台终端
7.根据权利要求6所述的一种基于HTML的远程屏幕共享与录屏装置，其特征在于，所述选择转换模块选取页面HTML节点作为共享内容，将HTML节点转为图片，具体过程如下：
8.根据权利要求7所述的一种基于HTML的远程屏幕共享与录屏装置，其特征在于，所述添加转换模块添加水印画布，将图片转成视频流，具体过程如下：
9.根据权利要求8所述的一种基于HTML的远程屏幕共享与录屏装置，其特征在于，所述更新传输模块监听HTML节点变化更新视频流，结合WebRTC传输视频流，具体过程如下：
10.根据权利要求9所述的一种基于HTML的远程屏幕共享与录屏装置，其特征在于，所述播放存储模块拉取和播放视频流，同时进行视频录制与存储，具体过程如下：
...【技术特征摘要】
1.一种基于html的远程屏幕共享与录屏方法，其特征在于，该方法涉及至少两台终端，其中一台终端称为发起共享用户端，剩余终端称为接收共享用户端，所有终端用户进行认证登录后，进行远程屏幕共享与录屏，实现流程包括：
2.根据权利要求1所述的一种基于html的远程屏幕共享与录屏方法，其特征在于，执行步骤(1)，选取页面html节点作为共享内容，将html节点转为图片，具体包括如下操作：
3.根据权利要求2所述的一种基于html的远程屏幕共享与录屏方法，其特征在于，执行步骤(2)，添加水印画布，将图片转成视频流，具体包括如下操作：
4.根据权利要求3所述的一种基于html的远程屏幕共享与录屏方法，其特征在于，执行步骤(3)，监听html节点变化更新视频流，结合webrtc传输视频流，具体包括如下操作：
5.根据权利要求4所述的一种基于html的远程屏幕共享与录屏方法，其特征在于，执行步骤(4)，拉取和播放视频流，进行视频录制与存储，具体包括如下操作：
【专利技术属性】
技术研发人员：陈华炳，郑立铭，徐金松，张伟，迟钰沛，
申请(专利权)人：浪潮软件股份有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。