網頁截屏調研記錄

　　對於普通網頁,截屏的實現並不難,網上也有成熟的插件,使用最多的應該是html2canvas,本身也試了下,能達到效果,我覺得這部分的工做就這麼簡單交差了

然而咱們的網頁並不普通,網頁中還嵌入了視頻,並且不是同源的,致使截出來的圖片視頻區域是空白

網上繼續查資料,才發現是跨域問題

繼續查找能不能解決跨域問題,html2canvas是有配置,然而其針對的是服務端容許跨域的狀況,意思是說服務端不容許跨域,設置了也沒效果,而咱們網頁的視頻源也沒辦法設置

很絕望,繼續查找資料

大概瞭解到網頁截屏無論什麼插件,基本使用canvas和svg實現,並且都會出現跨域資源沒法加載的問題

參考如下一篇文章

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

看了基於dom轉化對應咱們項目是行不通的,因而繼續尋找別的方案

研究過phantomjs,然而其實際是個無界面瀏覽器,咱們的網站須要登陸,它不能截取咱們登陸後的網頁

網上看下有沒有可用的Chrome插件,結果看了幾個都須要額外的操做

有個牛牛截圖能夠,但須要額外安裝客戶端

然而領導明確需求:

1.無感知截圖,即點擊一個按鈕,默認截圖,不須要額外的操做

2.不須要額外安裝客戶端等插件

跟領導反應,不使用插件沒辦法完成,像webqq等都是經過插件實現的,

 

前端不行,那轉向後端

後端一位同窗表示經過ffmpeg能夠截取rtsp視頻流的圖片

因而咱們的方案是把html2canvas截的圖和ffmpeg合成一張完整的圖

 

到此告一段落