├── README.md
├── index.js
└── package.json


/README.md:
--------------------------------------------------------------------------------
 1 | # Browsershot
 2 | 
 3 | Taking screenshots programatically, using the [getDisplayMedia](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia) API. Useful for debugging, feedback etc.
 4 | 
 5 | ## Example
 6 | 
 7 | ```js
 8 | let bs = await import("https://unpkg.com/browsershot/index.js");
 9 | try {
10 | 	let canvas = await bs.toCanvas();
11 | 	document.body.appendChild(canvas);
12 | } catch (e) {
13 | 	alert(e.message);
14 | }
15 | ```
16 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | const options = {
 2 | 	video: {
 3 | 		cursor: "never",
 4 | 		displaySurface: "browser"
 5 | 	}
 6 | }
 7 | 
 8 | function draw(video) {
 9 | 	let canvas = document.createElement("canvas");
10 | 	video.width = canvas.width = video.videoWidth;
11 | 	video.height = canvas.height = video.videoHeight;
12 | 	canvas.getContext("2d").drawImage(video, 0, 0);
13 | 
14 | 	video.srcObject.getTracks().forEach(track => track.stop());
15 | 	video.srcObject = null;
16 | 	
17 | 	return canvas;
18 | }
19 | 
20 | export async function toCanvas() {
21 | 	let stream = await navigator.mediaDevices.getDisplayMedia(options);
22 | 	let video = document.createElement("video");
23 | 	video.srcObject = stream;
24 | 	video.play();
25 | 	
26 | 	return new Promise(resolve => {
27 | 		video.addEventListener("canplay", e => {
28 | 			let canvas = draw(video);
29 | 			resolve(canvas);
30 | 		}, {once:true});
31 | 	});
32 | }
33 | 
34 | export async function toDataURL(...args) {
35 | 	let canvas = await toCanvas();
36 | 	return canvas.toDataURL(...args);
37 | }
38 | 
39 | export async function toBlob(...args) {
40 | 	let canvas = await toCanvas();
41 | 	return new Promise(resolve => canvas.toBlob(resolve, ...args));
42 | }
43 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "browsershot",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "author": "Ondřej Žára",
10 |   "license": "ISC"
11 | }
12 | 


--------------------------------------------------------------------------------