Screencast網站與Socket.IO和Node.JS

我想實現一個網站的屏幕錄像，沒有任何需要的軟件，但瀏覽器。不需要真正的屏幕截圖。也許這將是一個很好的解決方案，用瀏覽器，視口分辨率，滾動像素等信息來「重建」網站。它僅用於網站的解釋性瀏覽和功能。Screencast網站與Socket.IO和Node.JS

我目前的解決方案：該腳本使用html2canvas（http://html2canvas.hertzen.com/）製作網站的「屏幕截圖」。然後，我將屏幕截圖作爲base64編碼的png數據傳輸到接收器。他們解碼並將其繪製到那裏的網站。

但html2canvas需要大約1秒來生成一個畫布（只有文本的網站）。它將需要大約5-10秒來爲帶有圖像的網站生成它。這是很長的。

你有其他方法的想法嗎？

來源

2015-10-04 rakete

搜索WebRTC，它是爲了這個。 – Prinzhorn

@Prinzhorn RTC是用於通信的權利？我認爲這不是我的問題。它更多的屏幕捕獲... – rakete

http://www.w3.org/TR/screen-capture/但直到它在瀏覽器支持，你可能需要一個不同的解決方案。也許應用內聯的所有樣式（通過getComputedStyle）並傳輸HTML。 – Prinzhorn

您是否想過在頁面上捕獲事件並在另一側顯示它們？（也許用透明的覆蓋層來阻止用戶交互）

一旦錄像機發送屏幕大小等，一個iframe可以用來在另一邊顯示相同的網頁。然後，事件處理程序添加到文檔中，並聽取常見的事件，如點擊，按鍵等

[ 'click', 'change', 'keypress', 'select', 'submit', 'mousedown'].forEach(function(event_name){ 
    document.documentElement.addEventListener(event_name, function(e){ 
     // send event to the other side using Socket.IO or web sockets 
     console.log(getSelector(e.target), e.type); 
    }, true); 
});

在播放網站，你可以去找選擇和觸發事件。尋找一個元素的CSS選擇器可能有點棘手，但下面的代碼將是一個很好的開始。

https://github.com/ebrehault/resurrectio/blob/master/recorder.js#L367

來源

2015-10-07 06:08:59

你對這個問題有什麼看法，差異瀏覽器可以呈現相同的html代碼不同？ – rakete

大多數新瀏覽器都以相同的方式呈現html，使用選擇器找到的元素記錄和重新觸發事件將保證正確的事件觸發正確的元素，即使存在任何細微差異。需要注意的是互聯網速度和渲染時間。例如：一個元素可能需要較長時間才能加載播放器端，並且在您重放該事件時可能無法使用。所以使用waitForElementToBeVisible（）和waitForElementToStopMoving（）函數的預先等待事件可能是一個好主意。真的很酷的想法，很有趣，看看它是如何工作的。 –

也檢查出這個項目我捕捉事件通過使用鉻插件通過selinium播放：https：//github.com/chris-gunawardena/test-rec –

你可以考慮什麼是捕捉一端的用戶輸入事件，然後模擬它的另一端。這可以通過實時完成 - 將鼠標和鍵盤事件轉換爲流 - 然後將其發送到客戶端的模擬器。看到這篇文章：https://gist.github.com/staltz/868e7e9bc2a7b8c1f754

你也可以捕獲與時間戳流並將其發送到數據存儲，這實質上創建一個陣列式的日誌，它給你一個接一個在時間序列中的項目。然後，您可以將此日誌反饋到RxJS等反應式庫中，並在客戶端上安排事件播放。

對於仿真，應該有一些庫（我想jQuery也可以工作）。例如http://yuilibrary.com/yui/docs/event/simulate.html

來源

2015-10-08 05:21:31

Unfortunateley第一個鏈接是死的.. – rakete

Screencast網站與Socket.IO和Node.JS

回答

相關問題