网页截屏调研记录

Posted 2021-02-15 jieker

　　对于普通网页,截屏的实现并不难,网上也有成熟的插件,使用最多的应该是html2canvas,自己也试了下,能达到效果,我以为这部分的工作就这么简单交差了

然而我们的网页并不普通,网页中还嵌入了视频,而且不是同源的,导致截出来的图片视频区域是空白

网上继续查资料,才发现是跨域问题

继续查找能不能解决跨域问题,html2canvas是有配置,然而其针对的是服务端允许跨域的情况,意思是说服务端不允许跨域,设置了也没效果,而我们网页的视频源也没办法设置

很绝望,继续查找资料

大概了解到网页截屏不管什么插件,基本使用canvas和svg实现,而且都会出现跨域资源无法加载的问题

参考以下一篇文章

https://juejin.im/entry/58b91491570c35006c4f7fdf

看了基于dom转化对应我们项目是行不通的,于是继续寻找别的方案

研究过phantomjs,然而其实际是个无界面浏览器,我们的网站需要登录,它不能截取我们登录后的网页

网上看下有没有可用的Chrome插件,结果看了几个都需要额外的操作

有个牛牛截图可以,但需要额外安装客户端

然而领导明确需求:

1.无感知截图,即点击一个按钮,默认截图,不需要额外的操作

2.不需要额外安装客户端等插件

跟领导反应,不使用插件没办法完成,像webqq等都是通过插件实现的,

 

前端不行,那转向后端

后端一位同学表示通过ffmpeg可以截取rtsp视频流的图片

于是我们的方案是把html2canvas截的图和ffmpeg合成一张完整的图

 

到此告一段落