HTML5/Canvas/JavaScriptを使用してブラウザ内のスクリーンショットを取得する

Question

Googleの「バグを報告する」または「フィードバックツール」では、ブラウザウィンドウの領域を選択してバグについてのフィードバックとともに送信されるスクリーンショットを作成できます。ジェイソン・スモールによって

_{スクリーンショットは、duplicate questionに投稿しました。}

どのようにこれらの作業を行っていますか？ GoogleのJavaScriptフィードバックAPIはhereからロードされ、their overview of the feedback moduleはスクリーンショット機能を実演します。

Answer 1

JavaScriptはDOMを読み取って、かなり正確な表現をcanvasを使って表示できます。私はhtmlをキャンバスイメージに変換するスクリプトを作成しています。あなたが説明したようにフィードバックを送信するために、今日それを実装することを決定しました。

このスクリプトを使用すると、クライアントブラウザで作成されたスクリーンショットとフォームを含むフィードバックフォームを作成できます。スクリーンショットはDOMに基づいており、実際のスクリーンショットを作成するのではなく、ページで利用可能な情報に基づいてスクリーンショットを作成するため、実際の表現に対して100％正確ではない場合があります。

は、画像全体がクライアントのブラウザで作成されるため、サーバからのレンダリングを必要としません。 HTML2Canvasスクリプト自体はまだ実験的な状態ですが、CSS3の属性をほとんど解析しないので、プロキシが利用可能であってもCORSイメージを読み込むことはできません。

まだかなり限られたブラウザ互換性があります（それ以上の機能はサポートされていないため、クロスブラウザをサポートする時間がありませんでした）。詳細については

は、ここでは例を見て：

http://hertzen.com/experiments/jsfeedback/

編集 html2canvasスクリプトは別途になりましhereといくつかのexamples here可能です。

編集2 Googleは（唯一の大きな違いは、彼らの非同期横断/描画する方法であり、文書に基づいて実際には）非常によく似た方法を使用し、別の確認からエリオットSprehnでこのプレゼンテーションで見つけることができますGoogleフィードバックチーム： http://www.elliottsprehn.com/preso/fluentconf/

Answer 2

あなたのウェブアプリは今getUserMedia()を使用して、クライアントのデスクトップ全体の「ネイティブ」のスクリーンショットを撮ることができます。

は、この例を見てください：

https://www.webrtc-experiment.com/Pluginfree-Screen-Sharing/

クライアントはchrome（現在は）を使用している必要があり、chrome：// flagsの下でスクリーンキャプチャのサポートを有効にする必要があります。