webvnc novnc 方案
项目背景
这两天领导派了一个活,要求在我们现有的物联网平台做一个功能,功能的大致是这样的。
在浏览器端点击一个设备链接这个设备的桌面。并且能够进行文件,命令行的操作。
其实就是一个web版的vnc链接功能。我们知道如果两个设备需要远程连接。除了使用teamview或向日葵,这种第三方的软件,就是使用vnc来远程连接设备。
这里说明一下vnc
vncserver 是一个为了满足分布式用户共享服务器上面的资源,而在服务器上开启的一项服务,对应的客户端软件为vncviewer;它也可以是不同的操作系统,比如利用windows远程访问linux系统资源的一种远程访问方式。
在服务器上,或者被操控的设备上安装vncserver,在其他设备上安装vncviewer。这样二者就能够单向访问资源了。
概念理解清楚了,我们在来分析一下需求。如果需求不要去在浏览器中实现,其实这个功能是很完成的。就是给一台电脑安装上vncviewer,给其他所有待控制的设备安装上vncserver。使用ip地址+密码就能进行链接控制。
但一旦要求在浏览器中就比较麻烦了。
开始调研
其实一接到这个需求,我是懵圈的,我一个前端,你让我去调用这种方案。我连linux命令都不会敲几个。
没办法就要想办法,领导把问题抛给你,是相信你。知道你能完成。
首先我想到的是在github上找找相关的项目,搜索web-vnc,语言设置为javascript
点击此处链接即可查看搜索结果
还真发现了几个项目。
以下是截图。
首先是noVNC这个项目,star很多,看描述完全就是我需要的功能
该项目的特征如下
- 支持所有现代浏览器,包括移动设备(iOS,Android)
- 支持的VNC编码:raw,copyrect,rre,hextile,tight,tightPNG
- 支持缩放,裁剪和调整桌面大小
- 本地光标渲染
- 剪贴板复制/粘贴
- 翻译
- 触摸手势可模拟常见的鼠标操作
- 主要在MPL 2.0下获得许可,有关详细信息,请参见 许可文档
官方的两个效果图
浏览器的要求是 Chrome 49, Firefox 44, Safari 11, Opera 36, Edge 79
足够使用了。而且我们平台用户都是不会用IE。
探索实践
方案找到了,就开始真正的着手去做,领导让你做方案,你不能仅仅把这个项目丢给他,你需要做出一套完整的
详细的,可落地的方案。 每一步要做什么,安装那些软件,如何配置参数,那些做不到,那些需要注意。
说做就做吧
我有三台机器,本地虚拟机,腾讯云服务器,鲲鹏云服务器,我打算用其中一台来做web-vnc的方案。
这里先来简单介绍一下,noVNC的原理。
noVNC是将一个设备的vnc服务使用websocket代理起来,并通过一个web服务来供用户使用。
原理一句话就能说完。但要真正理解去不容易。
首先你的设备需要安装并启动了vnc,测试这一步可以使用vncviewer来链接设备,能正常显示页面则表示vnc启动成功。
vnc启动成功后,还需要启动noVNC的一个websocket代理,这个代理所做的事情就是将vnc的服务代理到另一个端口,并通过websocket服务来提供访问。
代理启动后,我们还要针对这个websocket来进行编码,处理返回的数据,发送请求。所幸这一步noVNC已经做好了,给我们提供了npm包支持。
通过看官方文档,以及查阅资料,将这些概念流程都搞清楚了。下面就是动手安装了。
安装vnc
首先在设备上安装vnc服务,并启动一个服务
sudo apt-get install xfce4
sudo apt-get install vnc4server
sudo apt-get install xrdp
编辑
sudo vi ~/.vnc/xstartup
替换一下内容
#!/bin/shexport XKL_XMODMAP_DISABLE=1unset SESSION_MANAGERunset DBUS_SESSION_BUS_ADDRESSgnome-panel &gnome-settings-daemon &metacity &nautilus &gnome-terminal &
启动vncserver
vncserver
这种方式启动的vnc一般都是5901端口,端口号随着vnc服务累加,5902,5903,
安装noVNC,启动代理
官方提供了二种方案来安装启动noVNC
第一种:
源码启动安装
git clone https://github.com/novnc/noVNC.git
cd noVNC
./utils/launch.sh --vnc localhost:5901
运行launch.sh
脚本可以自动地下载,并启动noVNC的姐妹项目websocket的代理。
代理项目是这个
执行日志
Warning: could not find self.pem
Using local websockify at /home/fizz/noVNC/utils/websockify/run
Starting webserver and WebSockets proxy on port 6080
/home/fizz/noVNC/utils/websockify/websockify/websocket.py:31: UserWarning: no 'numpy' module, HyBi protocol will be slowerwarnings.warn("no 'numpy' module, HyBi protocol will be slower")
WebSocket server settings:- Listen on :6080- Web server. Web root: /home/fizz/noVNC- No SSL/TLS support (no cert file)- proxying from :6080 to localhost:5901Navigate to this URL:http://ubuntu:6080/vnc.html?host=ubuntu&port=6080Press Ctrl-C to exit
脚本有很多参数,可直接看shell源码
第二种:
使用snap安装。
sudo snap install novnc
novnc --listen 6081 --vnc localhost:5901 # /snap/bin/novnc if /snap/bin is not in your PATH
注意snap不能在arm解构的设备上使用,比较坑。建议还是使用源码安装部署。可以将源码放到oss上以加速访问下载。
项目启动后就可以使用ip+端口号来访问noVNC的服务。默认的端口是6080,你也可以添加 --listen 6081
来修改暴露的端口
使用浏览器打开地址会,会看到这个一个页面。
看到这里方案算是差不多了。下面开始想方案。
详细方案制定
环境要求
要使用浏览器连接虚拟机的VNC,需要保证满足一下条件
• 虚拟机已安装桌面软件
• 虚拟机已安装vncserver
• 虚拟机已安装noVNC
• 虚拟机已启动noVNC的代理
• 浏览版本要求 Chrome 49, Firefox 44, Safari 11, Opera 36, Edge 79
安装运行noVNC(linux系统)
可使用snap来安装, 但arm架构不支持此方法
sudo snap install novncsudo novnc --listen 6081 --vnc localhost:5901 /snap/bin/novn
5901 为vnc端口
6081 为web服务端口
源码来部署
git clone https://github.com/novnc/noVNC.git
cd noVNC
./utils/launch.sh --vnc localhost:5901 --listen 6080
运行noVNC项目中的launch.sh脚本可以自动下载并开启websockify,启动一个webserver。
这个web服务就包含了访问服务器vnc的所有前端资源。只需要通过一个连接就可以访问。 客户端无需任何集成步骤。
效果图
相关代码库与功能
noVNC GitHub
noVNC官网
其他项目的使用
npm 库
webvnc novnc 方案相关推荐
- 利用novnc登录绕过WFA
0x00 简介 前端时间看了一个新闻说是一个安全人员研究使用webVNC来钓鱼绕过MFA多因子验证,因为现在很多环境钓鱼抓到的账号密码,在登录时候可能会要求输入安全码或者PIN马之类的东西,学名叫做M ...
- 瑞芯微rk3568移植openbmc(四)----关于novnc h264 webcodec硬解码
2022.11.04 更新 1.关于h264 novnc 软解码 上一篇中实现了novnc h264的webassembly软解码,kvm功能 运行一切正常,但帧率较低,且cpu负载相对较高,goog ...
- 写给技术负责人的 AI 落地方案,医疗、金融、教育、零售等行业都用得上!
数字智能时代到来,AI 作为核心驱动力量将为各行各业带来巨大转变.会有越来越多,医疗.金融.教育等行业的 AI 产品落地. 在医疗行业,应用认知计算技术AI能为人们的健康保驾护航,将人工智能应用到医院 ...
- 内网项目中引入NoVnc服务
内网项目中引入NoVnc服务 背景 目标 方案 部署步骤 完成后验证效果 背景 目前项目中,管理的实例底层为虚拟机,而在用户或运维人员管理具体的实例时,需另外启动VNC Viewer客户端才能配置实例 ...
- 吸水间最低动水位标高_水库水位库容监测系统方案
一.前 言 水利行业在中国有着悠久的历史.随着国民经济的迅猛发展,水利工程在国民经济中所起的作用越来越大,防汛更是直接影响国民经济发展的一个重要方面.我国有水库8万座左右.众所周知,水库在防洪.兴利上 ...
- 程序员如何讲清楚技术方案
最近在评审技术方案,和代码review的时候,遇到刚入行的同学们,很多都讲不清楚技术方案. 具体表现是: – 上来不说需求,直接说算法实现.台下一头雾水,根本不知道设计方案是否合理. – 描述完需求后 ...
- 云计算灾备原理与预防恢复方案
云计算灾备原理与预防恢复方案 一.灾备的定义 1.1 什么是灾备? 1.2 备份和容灾的概念 1.2.1 备份 1.2.2 容灾 1.2.3 两者区别 1.2.4 两者关系 1.3 灾备提供的保护 二 ...
- TensorRT优化方案图例
TensorRT优化方案图例 图 12. TensorRT 循环由循环边界层设置.数据流只能通过下方式离开循环环输出层. 唯一允许的后边缘是第二个输入递归层. 图 13. 一个 if 条件构造抽象模型 ...
- SystemML大规模机器学习,优化算子融合方案的研究
SystemML大规模机器学习,优化算子融合方案的研究 摘要 许多大规模机器学习(ML)系统允许通过线性代数程序指定定制的ML算法,然后自动生成有效的执行计划.在这种情况下,优化的机会融合基本算子的熔 ...
最新文章
- 根据根据图片的url怎么取得图片ImageView对象
- t-SNE(t-distributed stochastic neighbor embedding)
- springmvc学习笔记--ueditor和springmvc的集成
- Android中的Handler, Looper, MessageQueue和Thread
- 【测试设计】基于正交法的测试用例设计工具--PICT
- 谷歌大脑联手Hinton提出SimCLR新框架,疯狂提升自监督学习性能
- Json.net 动态序列化属性
- 将文本文件内容存储在DataSet中的方法总结
- CCF NOI1080 统计字符
- 1.Magento的配置系统
- 地下城php补丁怎么用,dnf补丁怎么用,教你如何学会使用补丁
- 学计算机电脑屏幕多大,买电脑显示器的技巧 电脑显示屏多大尺寸好
- python发送put请求
- CSS3炫酷的发光文字 可自定义文字色彩
- 常见算法:c语言矩阵算法问题
- Linux集群部署系列(六):Hadoop 在window系统下安装方法
- 计算机将症状与疾病联系起来的能力有多强?
- 华侨大学计算机学院宋益国,华侨大学团队摘得CVPR 2020智慧城市挑战赛全球亚军...
- watch取消配对怎么重新配对_Apple Watch 怎么重新配对iphone手机?
- 以太网(ethernet)通信。DSP开发板28388D发送数据,电脑接收数据。使用的是UDP协议
热门文章
- 【2022】招商银行信用卡中心春招实习生技术岗A卷
- AMD APU A10-5800K, Debian Wheezy, 系统安装ATI闭源驱动
- Perl,PHP,Python,Ruby概要及各自特点
- brave浏览器_“隐私至上” Brave浏览器退出测试版
- keil5安装国民技术芯片包
- PTA 2021年秋-MOOC-编程练习
- 被限制的ckplayer播放器如何实现倍速播放和快进
- 联发科 MTK 4G/5G 方案的选择
- 如果你是个迷茫的程序员,有必要看这篇技术人职业发展路径
- icloud邮箱添加发件服务器地址,怎么设置iCloud电子邮件地址别名 怎么在iPhone上管理电子邮箱...