4

ソフトウェアを必要とせずにブラウザだけでウェブサイトのスクリーンキャストを実現しようとしています。Web サイトを実際にスクリーンキャストする必要はありません。おそらく、ブラウザ、ビューポートの解像度、スクロールされたピクセルなどの情報を使用して Web サイトを「再構築」することは良い解決策になるでしょう。

私の現在の解決策: スクリプトは、html2canvas ( http://html2canvas.hertzen.com/ ) を使用して Web サイトの「スクリーンショット」を作成しています。次に、スクリーンショットを base64 でエンコードされた png データとして受信者に転送します。彼らはそれをデコードし、そこの Web サイトに描画します。

ただし、html2canvas はキャンバスを生成するのに約 1 秒かかります (テキストのみの Web サイトの場合)。画像を含む Web サイトの場合、生成には約 5 ～ 10 秒かかります。それは長すぎる。

他のアプローチのアイデアはありますか？

4

2 に答える 2

5

ページ上のイベントをキャプチャして、反対側に表示することを考えたことはありますか? （おそらく、ユーザーの操作を停止する透明なオーバーレイを使用）

レコーダーが画面サイズなどを送信すると、iframe を使用して同じ Web ページを反対側に表示できます。次に、ドキュメントにイベント ハンドラーを追加し、クリック、キー押下などの一般的なイベントをリッスンします。

[ '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/ebrehaust/resurrectio/blob/master/recorder.js#L367

于 2015-10-07T06:08:59.190 に答える