capturing-mouse-coordinates-manual.tentative.https.html (4372B)
1 <!DOCTYPE html> 2 <meta charset="utf-8" /> 3 <h1>Capturing mouse coordinates</h1> 4 <link rel="help" href="https://screen-share.github.io/captured-mouse-events" /> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style> 8 li.highlight { 9 font-weight: bold; 10 } 11 #latest_captured_mouse_event { 12 font-family: monospace; 13 } 14 </style> 15 <ol class="instructions"> 16 <li> 17 <button id="start_capture">Click here</button> and share this window as a 18 captured surface. 19 </li> 20 <li>Move the mouse near the top left corner of the window.</li> 21 <li>Move the mouse near the top right corner of the window.</li> 22 <li>Move the mouse near the bottom right corner of the window.</li> 23 <li>Move the mouse near the bottom left corner of the window.</li> 24 <li>Move the mouse near the center of the window.</li> 25 <li>Move the mouse outside the window.</li> 26 <li>Move the mouse inside the window.</li> 27 </ol> 28 <pre id="log"></pre> 29 <video width="1024" height="512" id="captured_content" autoplay></video> 30 <div id="latest_captured_mouse_event"></div> 31 <script> 32 setup({explicit_timeout: true}); 33 34 const items = document.querySelectorAll('ol.instructions > li'); 35 let highlighted_item_index = 0; 36 function clear_all_highlight() { 37 Array.from(items).forEach(item => item.classList.remove('highlight')); 38 } 39 function highlight_next_item() { 40 clear_all_highlight(); 41 items[highlighted_item_index].classList.add('highlight'); 42 highlighted_item_index++; 43 } 44 add_completion_callback(clear_all_highlight); 45 46 let capture_controller; 47 let latest_captured_mouse_event_index = 0; 48 function observe_mouse_coordinates(check_condition) { 49 assert_true(!!capture_controller, 'Screen capture started.'); 50 assert_own_property(window, 'CapturedMouseEvent'); 51 return new Promise(resolve => { 52 const listener = (event) => { 53 if (check_condition(event.surfaceX, event.surfaceY)) { 54 capture_controller.removeEventListener( 55 'capturedmousechange', listener); 56 resolve(); 57 } 58 }; 59 capture_controller.addEventListener('capturedmousechange', listener); 60 }); 61 } 62 63 promise_test(async () => { 64 assert_own_property(window, 'CaptureController'); 65 const controller = new CaptureController(); 66 highlight_next_item(); 67 await new Promise(resolve => { 68 document.getElementById('start_capture') 69 .addEventListener('click', (event) => { 70 event.target.disabled = true; 71 resolve(); 72 }); 73 }); 74 const video = document.getElementById('captured_content'); 75 video.srcObject = 76 await navigator.mediaDevices.getDisplayMedia({controller}); 77 await new Promise(resolve => video.onloadedmetadata = resolve); 78 controller.addEventListener('capturedmousechange', (event) => { 79 document.getElementById('latest_captured_mouse_event').textContent = 80 `Last event (#${++latest_captured_mouse_event_index}) observed at ${ 81 (new Date()).toTimeString()}, was {surfaceX: ${ 82 event.surfaceX}, surfaceY: ${event.surfaceY}}.`; 83 }); 84 capture_controller = controller; 85 }, 'Starting Screen Capture'); 86 87 const max_distance = 100; 88 [{x: 0, y: 0, name: 'top left corner'}, 89 {x: window.outerWidth, y: 0, name: 'top right corner'}, 90 {x: window.outerWidth, y: window.outerHeight, name: 'bottom right corner'}, 91 {x: 0, y: window.outerHeight, name: 'bottom left corner'}, 92 {x: window.outerWidth / 2, y: window.outerHeight / 2, name: 'center'}, 93 ].forEach(target => { 94 promise_test(async () => { 95 highlight_next_item(); 96 assert_less_than( 97 max_distance, Math.min(window.outerWidth, window.outerHeight) / 4, 98 'window is large enough'); 99 await observe_mouse_coordinates((x, y) => { 100 return x >= 0 && y >= 0 && 101 Math.hypot(target.x - x, target.y - y) < max_distance; 102 }) 103 }, `Moving mouse to the ${target.name} of the window.`); 104 }); 105 106 promise_test(async () => { 107 highlight_next_item(); 108 await observe_mouse_coordinates((x, y) => { 109 return x == -1 && y == -1; 110 }) 111 }, `Moving mouse outside the window.`); 112 113 promise_test(async () => { 114 highlight_next_item(); 115 await observe_mouse_coordinates((x, y) => { 116 return x >= 0 && y >= 0; 117 }) 118 }, `Moving mouse inside the window.`); 119 </script>