src/cobalt/tools/cobalt_in_a_tab/screenshot.js - cobalt - Git at Google

 import cobaltService from "./cobaltService.js";

 // The unique ID needed for almost every webdriver command.
 let sessionId = null;
 // A container holding all the screens sending requests for frames.
 let screenList = [];
 // The number of screens requesting frames from Cobalt.
 // This must be greater than 1, but can be optimized for performance.
 // On flakey networks, more may be necessary.
 // 3-4 are recommended for stable behavior on a reliable, fast network.
 let numScreens = 4;
 // The screen that is currently displayed to the user.
 let visibleScreen = null;
 // The current position of the mouse relative to the screens.
 let mousePosition = {xPos: 0, yPos:0};
 // The ID of cobalt's body element.
 // Used to send mouse positioning instructions.
 let bodyElementId = null;
 // A cancelable event that sends mouse position to Cobalt.
 let mouseInterval = null;
 // The div that contains all the image frames.
 let parentContainer = null;

 window.onload = async function(){
     await cobaltService.initialize();
     // Create image tags with the appropriate css.
     parentContainer = document.getElementById("screenContainer");
     if (numScreens < 1) return;
     for (let i = 0; i < numScreens; i++){
         // Create an image and append it to DOM.
         let newScreen = document.createElement("img");
         newScreen.id = "screen" + i;
         newScreen.classList.add("screen");
         parentContainer.appendChild(newScreen);
         screenList.push(newScreen);
     }

     // Grab a current session.
     let sessions = await cobaltService.getSessions();
     if(sessions.length > 0){
         sessionId = sessions[0];
     }
     else{
         // Create a new session if none are already created.
         sessionId = await cobaltService.makeSession();
     }
     // Get Webdriver body element for mouse positioning.
     bodyElementId = await cobaltService.getElement(sessionId);

     cobaltService.startScreencast(sessionId).then((response) => {
         cobaltService.setScreencastPort(response);
         subscribeToMouseEvents();
         window.addEventListener("keydown", sendKeyPress);
         window.addEventListener("beforeunload", function(e){
             cobaltService.stopScreencast(sessionId);
             cobaltService.deleteSession(sessionId);
         }, false);

         // Start requesting screenshots.
         for (let i = 0; i < screenList.length; i++) {
             assignScreenshotURLAndId(screenList[i]);
             // No screenshots are currently displayed.
             screenList[i].currentImageId = -1;
             visibleScreen = screenList[0];
         }
     });

     // Assign image behavior.
     for (let i = 0; i < screenList.length; i++) {
         screenList[i].onload = () => { imageLoaded(screenList[i]) };
         // Reload on error.
         // TODO - differentiate between types of errors.
         screenList[i].onerror = () => { assignScreenshotURLAndId(screenList[i]) };
     }
 }

 function assignScreenshotURLAndId(screen){
     let nextImageId = cobaltService.createNextScreenshotId();
     screen.nextImageId = nextImageId;
     screen.src = cobaltService.getScreenshotURL() + nextImageId;
 }

 function imageLoaded(screen){
     // The image will only become visible if it's more recent than the last image.
     if(screen.nextImageId > visibleScreen.currentImageId){
         visibleScreen.classList.remove("visibleScreen");
         screen.classList.add("visibleScreen");
         visibleScreen = screen;
     }
     screen.currentImageId = screen.nextImageId;
     assignScreenshotURLAndId(screen);
 }

 function sendClick(event){
     let data = {
         button: event.button
     };
     cobaltService.sendClick(sessionId, data);
 }

 function sendScroll(event){
     // Prevent default browser action like scrolling on mouseKey.
     event.preventDefault();
 }

 function saveMousePos(event){
     mousePosition = {
         xPos: event.clientX,
         yPos: event.clientY
     };
 }

 // Requests that get stalled send outdated mouse positions,
 // so only send one at a time. This will help ensure no mouse
 // movements are delayed.
 var mouseLock = false;
 function sendMousePos(){
     if (mouseLock) return;
     let viewportOffset = parentContainer.getBoundingClientRect();

     let data = {
         element: bodyElementId,
         xoffset: mousePosition.xPos - viewportOffset.left,
         yoffset: mousePosition.yPos - viewportOffset.top
     };
     mouseLock = true;
     cobaltService.sendMouseMove(sessionId, data)
     .then((response) => {
         mouseLock = false;
     });
 }

 function subscribeToMouseEvents(){
     window.addEventListener('mousemove', saveMousePos);
     window.addEventListener('click', sendClick);
     window.addEventListener('scroll', sendScroll);
     mouseInterval = setInterval(sendMousePos, 200);
 }

 if (typeof KeyEvent === 'undefined') {
     var KeyEvent = {
         DOM_VK_CANCEL: 3,
         DOM_VK_HELP: 6,
         DOM_VK_BACK_SPACE: 8,
         DOM_VK_TAB: 9,
         DOM_VK_CLEAR: 12,
         DOM_VK_RETURN: 13,
         DOM_VK_ENTER: 14,
         DOM_VK_SHIFT: 16,
         DOM_VK_CONTROL: 17,
         DOM_VK_ALT: 18,
         DOM_VK_PAUSE: 19,
         DOM_VK_CAPS_LOCK: 20,
         DOM_VK_ESCAPE: 27,
         DOM_VK_SPACE: 32,
         DOM_VK_PAGE_UP: 33,
         DOM_VK_PAGE_DOWN: 34,
         DOM_VK_END: 35,
         DOM_VK_HOME: 36,
         DOM_VK_LEFT: 37,
         DOM_VK_UP: 38,
         DOM_VK_RIGHT: 39,
         DOM_VK_DOWN: 40,
         DOM_VK_PRINTSCREEN: 44,
         DOM_VK_INSERT: 45,
         DOM_VK_DELETE: 46,
         DOM_VK_0: 48,
         DOM_VK_1: 49,
         DOM_VK_2: 50,
         DOM_VK_3: 51,
         DOM_VK_4: 52,
         DOM_VK_5: 53,
         DOM_VK_6: 54,
         DOM_VK_7: 55,
         DOM_VK_8: 56,
         DOM_VK_9: 57,
         DOM_VK_SEMICOLON: 59,
         DOM_VK_EQUALS: 61,
         DOM_VK_A: 65,
         DOM_VK_B: 66,
         DOM_VK_C: 67,
         DOM_VK_D: 68,
         DOM_VK_E: 69,
         DOM_VK_F: 70,
         DOM_VK_G: 71,
         DOM_VK_H: 72,
         DOM_VK_I: 73,
         DOM_VK_J: 74,
         DOM_VK_K: 75,
         DOM_VK_L: 76,
         DOM_VK_M: 77,
         DOM_VK_N: 78,
         DOM_VK_O: 79,
         DOM_VK_P: 80,
         DOM_VK_Q: 81,
         DOM_VK_R: 82,
         DOM_VK_S: 83,
         DOM_VK_T: 84,
         DOM_VK_U: 85,
         DOM_VK_V: 86,
         DOM_VK_W: 87,
         DOM_VK_X: 88,
         DOM_VK_Y: 89,
         DOM_VK_Z: 90,
         DOM_VK_CONTEXT_MENU: 93,
         DOM_VK_NUMPAD0: 96,
         DOM_VK_NUMPAD1: 97,
         DOM_VK_NUMPAD2: 98,
         DOM_VK_NUMPAD3: 99,
         DOM_VK_NUMPAD4: 100,
         DOM_VK_NUMPAD5: 101,
         DOM_VK_NUMPAD6: 102,
         DOM_VK_NUMPAD7: 103,
         DOM_VK_NUMPAD8: 104,
         DOM_VK_NUMPAD9: 105,
         DOM_VK_MULTIPLY: 106,
         DOM_VK_ADD: 107,
         DOM_VK_SEPARATOR: 108,
         DOM_VK_SUBTRACT: 109,
         DOM_VK_DECIMAL: 110,
         DOM_VK_DIVIDE: 111,
         DOM_VK_F1: 112,
         DOM_VK_F2: 113,
         DOM_VK_F3: 114,
         DOM_VK_F4: 115,
         DOM_VK_F5: 116,
         DOM_VK_F6: 117,
         DOM_VK_F7: 118,
         DOM_VK_F8: 119,
         DOM_VK_F9: 120,
         DOM_VK_F10: 121,
         DOM_VK_F11: 122,
         DOM_VK_F12: 123,
         DOM_VK_F13: 124,
         DOM_VK_F14: 125,
         DOM_VK_F15: 126,
         DOM_VK_F16: 127,
         DOM_VK_F17: 128,
         DOM_VK_F18: 129,
         DOM_VK_F19: 130,
         DOM_VK_F20: 131,
         DOM_VK_F21: 132,
         DOM_VK_F22: 133,
         DOM_VK_F23: 134,
         DOM_VK_F24: 135,
         DOM_VK_NUM_LOCK: 144,
         DOM_VK_SCROLL_LOCK: 145,
         DOM_VK_COMMA: 188,
         DOM_VK_PERIOD: 190,
         DOM_VK_SLASH: 191,
         DOM_VK_BACK_QUOTE: 192,
         DOM_VK_OPEN_BRACKET: 219,
         DOM_VK_BACK_SLASH: 220,
         DOM_VK_CLOSE_BRACKET: 221,
         DOM_VK_QUOTE: 222,
         DOM_VK_META: 224
     };
 }

 function mapKeyCode(code){
     // We want to optimize this for all printable characters ideally.
     switch(code){
         case KeyEvent.DOM_VK_UP:
             return '\ue013';
         case KeyEvent.DOM_VK_DOWN:
             return '\ue015';
         case KeyEvent.DOM_VK_LEFT:
             return '\ue012';
         case KeyEvent.DOM_VK_RIGHT:
             return '\ue014';
         case KeyEvent.DOM_VK_ENTER:
             return '\ue007';
         case KeyEvent.DOM_VK_RETURN:
             return '\ue006';
         case KeyEvent.DOM_VK_ESCAPE:
             return '\ue00c';
         case KeyEvent.DOM_VK_BACK_SPACE:
             return '\ue003';
         case KeyEvent.DOM_VK_SPACE:
             return '\ue00d';
         case KeyEvent.DOM_VK_SHIFT:
             return '\ue008';
         default:
             return null;
     }
 }

 function sendKeyPress(event){
     // Prevent default browser action like scrolling on mouseKey.
     event.preventDefault();

     let uKeyCode = mapKeyCode(event.keyCode);
     if(uKeyCode === null) uKeyCode = event.key;
     cobaltService.sendKeystrokes(sessionId, [uKeyCode]);
 }
	import cobaltService from "./cobaltService.js";

	// The unique ID needed for almost every webdriver command.
	let sessionId = null;
	// A container holding all the screens sending requests for frames.
	let screenList = [];
	// The number of screens requesting frames from Cobalt.
	// This must be greater than 1, but can be optimized for performance.
	// On flakey networks, more may be necessary.
	// 3-4 are recommended for stable behavior on a reliable, fast network.
	let numScreens = 4;
	// The screen that is currently displayed to the user.
	let visibleScreen = null;
	// The current position of the mouse relative to the screens.
	let mousePosition = {xPos: 0, yPos:0};
	// The ID of cobalt's body element.
	// Used to send mouse positioning instructions.
	let bodyElementId = null;
	// A cancelable event that sends mouse position to Cobalt.
	let mouseInterval = null;
	// The div that contains all the image frames.
	let parentContainer = null;

	window.onload = async function(){
	await cobaltService.initialize();
	// Create image tags with the appropriate css.
	parentContainer = document.getElementById("screenContainer");
	if (numScreens < 1) return;
	for (let i = 0; i < numScreens; i++){
	// Create an image and append it to DOM.
	let newScreen = document.createElement("img");
	newScreen.id = "screen" + i;
	newScreen.classList.add("screen");
	parentContainer.appendChild(newScreen);
	screenList.push(newScreen);
	}

	// Grab a current session.
	let sessions = await cobaltService.getSessions();
	if(sessions.length > 0){
	sessionId = sessions[0];
	}
	else{
	// Create a new session if none are already created.
	sessionId = await cobaltService.makeSession();
	}
	// Get Webdriver body element for mouse positioning.
	bodyElementId = await cobaltService.getElement(sessionId);

	cobaltService.startScreencast(sessionId).then((response) => {
	cobaltService.setScreencastPort(response);
	subscribeToMouseEvents();
	window.addEventListener("keydown", sendKeyPress);
	window.addEventListener("beforeunload", function(e){
	cobaltService.stopScreencast(sessionId);
	cobaltService.deleteSession(sessionId);
	}, false);

	// Start requesting screenshots.
	for (let i = 0; i < screenList.length; i++) {
	assignScreenshotURLAndId(screenList[i]);
	// No screenshots are currently displayed.
	screenList[i].currentImageId = -1;
	visibleScreen = screenList[0];
	}
	});

	// Assign image behavior.
	for (let i = 0; i < screenList.length; i++) {
	screenList[i].onload = () => { imageLoaded(screenList[i]) };
	// Reload on error.
	// TODO - differentiate between types of errors.
	screenList[i].onerror = () => { assignScreenshotURLAndId(screenList[i]) };
	}
	}

	function assignScreenshotURLAndId(screen){
	let nextImageId = cobaltService.createNextScreenshotId();
	screen.nextImageId = nextImageId;
	screen.src = cobaltService.getScreenshotURL() + nextImageId;
	}

	function imageLoaded(screen){
	// The image will only become visible if it's more recent than the last image.
	if(screen.nextImageId > visibleScreen.currentImageId){
	visibleScreen.classList.remove("visibleScreen");
	screen.classList.add("visibleScreen");
	visibleScreen = screen;
	}
	screen.currentImageId = screen.nextImageId;
	assignScreenshotURLAndId(screen);
	}

	function sendClick(event){
	let data = {
	button: event.button
	};
	cobaltService.sendClick(sessionId, data);
	}

	function sendScroll(event){
	// Prevent default browser action like scrolling on mouseKey.
	event.preventDefault();
	}

	function saveMousePos(event){
	mousePosition = {
	xPos: event.clientX,
	yPos: event.clientY
	};
	}

	// Requests that get stalled send outdated mouse positions,
	// so only send one at a time. This will help ensure no mouse
	// movements are delayed.
	var mouseLock = false;
	function sendMousePos(){
	if (mouseLock) return;
	let viewportOffset = parentContainer.getBoundingClientRect();

	let data = {
	element: bodyElementId,
	xoffset: mousePosition.xPos - viewportOffset.left,
	yoffset: mousePosition.yPos - viewportOffset.top
	};
	mouseLock = true;
	cobaltService.sendMouseMove(sessionId, data)
	.then((response) => {
	mouseLock = false;
	});
	}

	function subscribeToMouseEvents(){
	window.addEventListener('mousemove', saveMousePos);
	window.addEventListener('click', sendClick);
	window.addEventListener('scroll', sendScroll);
	mouseInterval = setInterval(sendMousePos, 200);
	}

	if (typeof KeyEvent === 'undefined') {
	var KeyEvent = {
	DOM_VK_CANCEL: 3,
	DOM_VK_HELP: 6,
	DOM_VK_BACK_SPACE: 8,
	DOM_VK_TAB: 9,
	DOM_VK_CLEAR: 12,
	DOM_VK_RETURN: 13,
	DOM_VK_ENTER: 14,
	DOM_VK_SHIFT: 16,
	DOM_VK_CONTROL: 17,
	DOM_VK_ALT: 18,
	DOM_VK_PAUSE: 19,
	DOM_VK_CAPS_LOCK: 20,
	DOM_VK_ESCAPE: 27,
	DOM_VK_SPACE: 32,
	DOM_VK_PAGE_UP: 33,
	DOM_VK_PAGE_DOWN: 34,
	DOM_VK_END: 35,
	DOM_VK_HOME: 36,
	DOM_VK_LEFT: 37,
	DOM_VK_UP: 38,
	DOM_VK_RIGHT: 39,
	DOM_VK_DOWN: 40,
	DOM_VK_PRINTSCREEN: 44,
	DOM_VK_INSERT: 45,
	DOM_VK_DELETE: 46,
	DOM_VK_0: 48,
	DOM_VK_1: 49,
	DOM_VK_2: 50,
	DOM_VK_3: 51,
	DOM_VK_4: 52,
	DOM_VK_5: 53,
	DOM_VK_6: 54,
	DOM_VK_7: 55,
	DOM_VK_8: 56,
	DOM_VK_9: 57,
	DOM_VK_SEMICOLON: 59,
	DOM_VK_EQUALS: 61,
	DOM_VK_A: 65,
	DOM_VK_B: 66,
	DOM_VK_C: 67,
	DOM_VK_D: 68,
	DOM_VK_E: 69,
	DOM_VK_F: 70,
	DOM_VK_G: 71,
	DOM_VK_H: 72,
	DOM_VK_I: 73,
	DOM_VK_J: 74,
	DOM_VK_K: 75,
	DOM_VK_L: 76,
	DOM_VK_M: 77,
	DOM_VK_N: 78,
	DOM_VK_O: 79,
	DOM_VK_P: 80,
	DOM_VK_Q: 81,
	DOM_VK_R: 82,
	DOM_VK_S: 83,
	DOM_VK_T: 84,
	DOM_VK_U: 85,
	DOM_VK_V: 86,
	DOM_VK_W: 87,
	DOM_VK_X: 88,
	DOM_VK_Y: 89,
	DOM_VK_Z: 90,
	DOM_VK_CONTEXT_MENU: 93,
	DOM_VK_NUMPAD0: 96,
	DOM_VK_NUMPAD1: 97,
	DOM_VK_NUMPAD2: 98,
	DOM_VK_NUMPAD3: 99,
	DOM_VK_NUMPAD4: 100,
	DOM_VK_NUMPAD5: 101,
	DOM_VK_NUMPAD6: 102,
	DOM_VK_NUMPAD7: 103,
	DOM_VK_NUMPAD8: 104,
	DOM_VK_NUMPAD9: 105,
	DOM_VK_MULTIPLY: 106,
	DOM_VK_ADD: 107,
	DOM_VK_SEPARATOR: 108,
	DOM_VK_SUBTRACT: 109,
	DOM_VK_DECIMAL: 110,
	DOM_VK_DIVIDE: 111,
	DOM_VK_F1: 112,
	DOM_VK_F2: 113,
	DOM_VK_F3: 114,
	DOM_VK_F4: 115,
	DOM_VK_F5: 116,
	DOM_VK_F6: 117,
	DOM_VK_F7: 118,
	DOM_VK_F8: 119,
	DOM_VK_F9: 120,
	DOM_VK_F10: 121,
	DOM_VK_F11: 122,
	DOM_VK_F12: 123,
	DOM_VK_F13: 124,
	DOM_VK_F14: 125,
	DOM_VK_F15: 126,
	DOM_VK_F16: 127,
	DOM_VK_F17: 128,
	DOM_VK_F18: 129,
	DOM_VK_F19: 130,
	DOM_VK_F20: 131,
	DOM_VK_F21: 132,
	DOM_VK_F22: 133,
	DOM_VK_F23: 134,
	DOM_VK_F24: 135,
	DOM_VK_NUM_LOCK: 144,
	DOM_VK_SCROLL_LOCK: 145,
	DOM_VK_COMMA: 188,
	DOM_VK_PERIOD: 190,
	DOM_VK_SLASH: 191,
	DOM_VK_BACK_QUOTE: 192,
	DOM_VK_OPEN_BRACKET: 219,
	DOM_VK_BACK_SLASH: 220,
	DOM_VK_CLOSE_BRACKET: 221,
	DOM_VK_QUOTE: 222,
	DOM_VK_META: 224
	};
	}

	function mapKeyCode(code){
	// We want to optimize this for all printable characters ideally.
	switch(code){
	case KeyEvent.DOM_VK_UP:
	return '\ue013';
	case KeyEvent.DOM_VK_DOWN:
	return '\ue015';
	case KeyEvent.DOM_VK_LEFT:
	return '\ue012';
	case KeyEvent.DOM_VK_RIGHT:
	return '\ue014';
	case KeyEvent.DOM_VK_ENTER:
	return '\ue007';
	case KeyEvent.DOM_VK_RETURN:
	return '\ue006';
	case KeyEvent.DOM_VK_ESCAPE:
	return '\ue00c';
	case KeyEvent.DOM_VK_BACK_SPACE:
	return '\ue003';
	case KeyEvent.DOM_VK_SPACE:
	return '\ue00d';
	case KeyEvent.DOM_VK_SHIFT:
	return '\ue008';
	default:
	return null;
	}
	}

	function sendKeyPress(event){
	// Prevent default browser action like scrolling on mouseKey.
	event.preventDefault();

	let uKeyCode = mapKeyCode(event.keyCode);
	if(uKeyCode === null) uKeyCode = event.key;
	cobaltService.sendKeystrokes(sessionId, [uKeyCode]);
	}