网页截屏调研记录

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

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

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

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

很绝望,继续查找资料

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

参考如下一篇文章

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

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

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

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

有个牛牛截图能够,但须要额外安装客户端

然而领导明确需求:

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

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

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

 

前端不行,那转向后端

后端一位同窗表示经过ffmpeg能够截取rtsp视频流的图片

因而咱们的方案是把html2canvas截的图和ffmpeg合成一张完整的图

 

到此告一段落