diff --git a/web/css/ui.css b/web/css/ui.css
index 49ef51935..81264e0fc 100644
--- a/web/css/ui.css
+++ b/web/css/ui.css
@@ -228,6 +228,11 @@
     color: #7e7e7e;
 }
 
+#mirror-stream {
+    image-rendering: pixelated;
+    width: 100%;
+    height: 100%;
+}
 
 #screen {
     display: flex;
diff --git a/web/index.html b/web/index.html
index 61bbc6ddb..efb9c8d2d 100644
--- a/web/index.html
+++ b/web/index.html
@@ -34,6 +34,7 @@
     <div id="screen">
         <div id="stats-overlay"></div>
         <video id="stream" class="game-screen" hidden muted preload="none"></video>
+        <canvas id="mirror-stream" class="game-screen" hidden></canvas>
         <div id="menu-screen">
             <div id="menu-container"></div>
             <div id="menu-item-choice" class="hidden"></div>
diff --git a/web/js/app.js b/web/js/app.js
index 98e03ea47..1a45bed51 100644
--- a/web/js/app.js
+++ b/web/js/app.js
@@ -60,10 +60,14 @@ import {stats} from './stats.js?v=3';
 import {stream} from './stream.js?v=3';
 import {workerManager} from "./workerManager.js?v=3";
 
-// application state
+// application display state
 let state;
 let lastState;
 
+const state_ = {
+    showPing: false
+}
+
 // first user interaction
 let interacted = false;
 
@@ -474,11 +478,11 @@ if (kbmEl) {
 
 // Browser lock API
 document.onpointerlockchange = () => {
-    pub(POINTER_LOCK_CHANGE, document.pointerLockElement);
+    pub(POINTER_LOCK_CHANGE, document.pointerLockElement)
 }
 
 document.onfullscreenchange = () => {
-    pub(FULLSCREEN_CHANGE, document.fullscreenElement);
+    pub(FULLSCREEN_CHANGE, document.fullscreenElement)
 }
 
 // subscriptions
@@ -535,8 +539,8 @@ sub(RECORDING_STATUS_CHANGED, handleRecordingStatus);
 sub(SETTINGS_CHANGED, () => {
     const s = settings.get();
     log.level = s[opts.LOG_LEVEL];
-    if (state.showPing !== s[opts.SHOW_PING]) {
-        state.showPing = s[opts.SHOW_PING];
+    if (state_.showPing !== s[opts.SHOW_PING]) {
+        state_.showPing = s[opts.SHOW_PING];
         stats.toggle();
     }
 });
@@ -591,5 +595,5 @@ stats.modules = [
         },
     }]
 
-state.showPing = settings.loadOr(opts.SHOW_PING, true);
-state.showPing && stats.toggle();
+state_.showPing = settings.loadOr(opts.SHOW_PING, true);
+state_.showPing && stats.toggle();
diff --git a/web/js/input/keyboard.js b/web/js/input/keyboard.js
index f3b0c08f6..dd6173c91 100644
--- a/web/js/input/keyboard.js
+++ b/web/js/input/keyboard.js
@@ -3,15 +3,12 @@ import {
     sub,
     AXIS_CHANGED,
     DPAD_TOGGLE,
-    FULLSCREEN_CHANGE,
-    KB_MOUSE_FLAG,
     KEY_PRESSED,
     KEY_RELEASED,
     KEYBOARD_KEY_PRESSED,
     KEYBOARD_KEY_DOWN,
     KEYBOARD_KEY_UP,
     KEYBOARD_TOGGLE_FILTER_MODE,
-    KBM_SKIP
 } from 'event';
 import {KEY} from 'input';
 import {log} from 'log'
@@ -57,7 +54,8 @@ let isFullscreen = false;
 let isKeysFilteredMode = true;
 // if the browser supports Keyboard Lock API (Firefox does not)
 let hasKeyboardLock = ('keyboard' in navigator) && ('lock' in navigator.keyboard);
-let kbmSkip = false;
+
+let locked = false
 
 const remap = (map = {}) => {
     settings.set(opts.INPUT_KEYBOARD_MAP, map);
@@ -98,6 +96,24 @@ function onDpadToggle(checked) {
     }
 }
 
+const lock = async (lock) => {
+    if (lock) {
+        if (!hasKeyboardLock) {
+            log.warn("Browser doesn't support keyboard lock! It will be emulated.");
+        }
+        if (hasKeyboardLock) {
+            await navigator.keyboard.lock()
+
+        }
+        log.debug(`Keyboard lock: ${isFullscreen}`);
+    } else {
+        if (hasKeyboardLock) {
+            navigator.keyboard.unlock();
+        }
+    }
+    locked = lock
+}
+
 const onKey = (code, evt, state) => {
     const key = keyMap[code]
 
@@ -117,27 +133,6 @@ const onKey = (code, evt, state) => {
 
 sub(DPAD_TOGGLE, (data) => onDpadToggle(data.checked));
 
-sub(KB_MOUSE_FLAG, () => {
-    if (!hasKeyboardLock) {
-        log.warn("Browser doesn't support keyboard lock! It will be emulated.");
-    }
-
-    sub(FULLSCREEN_CHANGE, async (fullscreenEl) => {
-        isFullscreen = !!fullscreenEl;
-
-        if (kbmSkip) return;
-
-        if (hasKeyboardLock) {
-            isFullscreen ? await navigator.keyboard.lock() : navigator.keyboard.unlock();
-        }
-        log.debug(`Keyboard lock: ${isFullscreen}`);
-    })
-})
-
-sub(KBM_SKIP, (v) => {
-    kbmSkip = v
-})
-
 /**
  * Keyboard controls.
  */
@@ -148,15 +143,15 @@ export const keyboard = {
 
         body.addEventListener('keyup', e => {
             e.stopPropagation();
-            !hasKeyboardLock && isFullscreen && e.preventDefault();
+            !hasKeyboardLock && locked && e.preventDefault();
 
-            let lock = isFullscreen ;
+            let lock = locked
             // hack with Esc up when outside of lock
             if (e.code === 'Escape') {
                 lock = true
             }
 
-            lock = lock && !kbmSkip
+            // lock = lock && !kbmSkip
 
             isKeysFilteredMode ?
                 (lock ? pub(KEYBOARD_KEY_UP, e) : onKey(e.code, KEY_RELEASED, false))
@@ -165,12 +160,10 @@ export const keyboard = {
 
         body.addEventListener('keydown', e => {
             e.stopPropagation();
-            !hasKeyboardLock && isFullscreen && e.preventDefault();
-
-            const lock = isFullscreen && !kbmSkip
+            !hasKeyboardLock && locked && e.preventDefault();
 
             isKeysFilteredMode ?
-                (lock ? pub(KEYBOARD_KEY_DOWN, e) : onKey(e.code, KEY_PRESSED, true)) :
+                (locked ? pub(KEYBOARD_KEY_DOWN, e) : onKey(e.code, KEY_PRESSED, true)) :
                 pub(KEYBOARD_KEY_PRESSED, {key: e.code});
         });
 
@@ -178,5 +171,6 @@ export const keyboard = {
     },
     settings: {
         remap
-    }
+    },
+    lock,
 }
diff --git a/web/js/input/pointer.js b/web/js/input/pointer.js
index dba6de13d..ef87d2555 100644
--- a/web/js/input/pointer.js
+++ b/web/js/input/pointer.js
@@ -29,25 +29,27 @@ const track = (el, cb, single) => {
     }
 }
 
-const dpiScaler = {
-    _ex: 0,
-    _ey: 0,
-    _rez: {dx: 0, dy: 0},
-    scale(sdx, sdy) {
-        this._rez.dx = sdx + this._ex
-        this._rez.dy = sdy + this._ey
-
-        this._ex = this._rez.dx % 1
-        this._ey = this._rez.dy % 1
-
-        this._rez.dx -= this._ex
-        this._rez.dy -= this._ey
-
-        return this._rez
+const dpiScaler = () => {
+    let ex = 0
+    let ey = 0
+    let scaled = {dx: 0, dy: 0}
+    return {
+        scale(x, y, src, dst) {
+            scaled.dx = x / (src.w / dst.videoWidth) + ex
+            scaled.dy = y / (src.h / dst.videoHeight) + ey
+
+            ex = scaled.dx % 1
+            ey = scaled.dy % 1
+
+            scaled.dx -= ex
+            scaled.dy -= ey
+
+            return scaled
+        }
     }
 }
 
 export const pointer = {
     track,
-    scaler: () => ({...dpiScaler})
+    scaler: dpiScaler
 }
diff --git a/web/js/screen.js b/web/js/screen.js
index ec0f83b24..862d34744 100644
--- a/web/js/screen.js
+++ b/web/js/screen.js
@@ -4,36 +4,37 @@ import {
     KB_MOUSE_FLAG,
     MOUSE_MOVED,
     MOUSE_PRESSED,
-    POINTER_LOCK_CHANGE,
     SETTINGS_CHANGED,
     KBM_SKIP,
 } from 'event';
 import {browser, env} from 'env';
-import {pointer} from 'input';
+import {pointer, keyboard} from 'input';
 import {opts, settings} from 'settings';
 
-const rootEl = document.getElementById('screen');
+const rootEl = document.getElementById('screen')
 
 const state = {
     kbmSkip: false,
-    kbmLock: false,
+    kbmSupport: false,
     components: [],
     current: undefined,
     forceFullscreen: false,
+    showCursor: false,
 }
 
-const toggle = (component, force) => {
-    component && (state.current = component); // keep the last component
-    state.components.forEach(c => c.toggle(false));
-    state.current?.toggle(force);
-    component && !env.isMobileDevice && !state.current?.noFullscreen && state.forceFullscreen && fullscreen();
+const toggle = async (component, force) => {
+    component && (state.current = component) // keep the last component
+    state.components.forEach(c => c.toggle(false))
+    state.current?.toggle(force)
+    component && !env.isMobileDevice && !state.current?.noFullscreen && state.forceFullscreen && fullscreen()
+    state.showCursor && await switchKeyboardMouse(true)
 }
 
 const init = () => {
-    state.forceFullscreen = settings.loadOr(opts.FORCE_FULLSCREEN, false);
+    state.forceFullscreen = settings.loadOr(opts.FORCE_FULLSCREEN, false)
     sub(SETTINGS_CHANGED, () => {
-        state.forceFullscreen = settings.get()[opts.FORCE_FULLSCREEN];
-    });
+        state.forceFullscreen = settings.get()[opts.FORCE_FULLSCREEN]
+    })
 }
 
 const fullscreen = () => {
@@ -41,61 +42,77 @@ const fullscreen = () => {
         .height
         .replace('px', '')
     )
-    env.display().toggleFullscreen(h !== window.innerHeight, rootEl);
+    env.display().toggleFullscreen(h !== window.innerHeight, rootEl)
 }
 
-const dpiScaler = pointer.scaler()
-
-const handlePointerMove = (p) => {
-    const display = state.current
-
-    if (!display?.hasDisplay) {
-        pub(MOUSE_MOVED, p)
-        return
+const handlePointerMove = (() => {
+    const dpi = pointer.scaler()
+    return (p) => {
+        const display = state.current
+        pub(MOUSE_MOVED, display?.hasDisplay ? dpi.scale(p.dx, p.dy, display.video.size, display.video.el) : p)
+    }
+})()
+const handlePointerDown = (() => {
+    const b = {b: null, p: true}
+    return (e) => {
+        b.b = e.button
+        pub(MOUSE_PRESSED, b)
     }
+})()
+const handlePointerUp = (() => {
+    const b = {b: null, p: false}
+    return (e) => {
+        b.b = e.button
+        pub(MOUSE_PRESSED, b)
+    }
+})()
 
-    const {sw, sh} = display?.video.sizeRatio()
-    const sp = dpiScaler.scale(p.dx / sw, p.dy / sh)
-    pub(MOUSE_MOVED, sp)
-}
-const handlePointerDown = (e) => pub(MOUSE_PRESSED, {b: e.button, p: true});
-const handlePointerUp = (e) => pub(MOUSE_PRESSED, {b: e.button, p: false});
+const trackPointer = (() => {
+    let noTrack
 
-rootEl.addEventListener('fullscreenchange', async () => {
-    const fullscreen = document.fullscreenElement !== null;
-    state.current?.onFullscreen?.(fullscreen)
-
-    if (state.current?.hasDisplay) {
-        if (!state.kbmLock) return;
+    // disable coalesced mouse move events
+    const single = true
 
-        const lockLock = fullscreen && !state.kbmSkip
+    // coalesced event are broken since FF 120
+    const isFF = env.getBrowser === browser.firefox
 
-        if (lockLock) {
-            await rootEl.requestPointerLock(/*{ unadjustedMovement: true}*/)
+    return (enabled) => {
+        if (enabled) {
+            !noTrack && (noTrack = pointer.track(rootEl, handlePointerMove, isFF || single))
+        } else {
+            noTrack?.()
+            noTrack = null
         }
-
-        rootEl.onpointerdown = lockLock ? handlePointerDown : null;
-        rootEl.onpointerup = lockLock ? handlePointerUp : null;
+        rootEl.onpointerdown = enabled ? handlePointerDown : null
+        rootEl.onpointerup = enabled ? handlePointerUp : null
     }
-})
+})()
 
-sub(KB_MOUSE_FLAG, () => {
-    state.kbmLock = true;
+const switchKeyboardMouse = async (enabled) => {
+    if (!state.current?.hasDisplay) return
+    if (!state.kbmSupport) return
 
-    // disable coalesced mouse move events
-    const single = true;
+    const lockLock = enabled && !state.kbmSkip
 
-    // coalesced event are broken since FF 120
-    const isFF = env.getBrowser === browser.firefox
+    if (lockLock) {
+        await rootEl.requestPointerLock(/*{ unadjustedMovement: true}*/)
+    }
 
-    let noTrack;
-    sub(POINTER_LOCK_CHANGE, (lockedEl) => {
-        lockedEl === null ? noTrack?.() : (noTrack = pointer.track(rootEl, handlePointerMove, isFF || single));
-    });
+    trackPointer(lockLock)
+    await keyboard.lock(lockLock)
+}
+
+rootEl.addEventListener('fullscreenchange', async () => {
+    const fullscreen = document.fullscreenElement !== null
+    state.current?.onFullscreen?.(fullscreen)
+    await switchKeyboardMouse(fullscreen)
 })
 
-sub(KBM_SKIP, (v) => {
+sub(KB_MOUSE_FLAG, async () => (state.kbmSupport = true))
+
+sub(KBM_SKIP, async (v) => {
     state.kbmSkip = v
+    state.showCursor && await switchKeyboardMouse(!v)
 })
 
 export const screen = {
diff --git a/web/js/stream.js b/web/js/stream.js
index fa0dd96d9..c6638f104 100644
--- a/web/js/stream.js
+++ b/web/js/stream.js
@@ -2,12 +2,12 @@ import {
     sub,
     APP_VIDEO_CHANGED,
     SETTINGS_CHANGED
-} from 'event' ;
-import {gui} from 'gui';
+} from 'event';
 import {log} from 'log';
 import {opts, settings} from 'settings';
 
-const videoEl = document.getElementById('stream');
+const videoEl = document.getElementById('stream')
+const mirrorEl = document.getElementById('mirror-stream')
 
 const options = {
     volume: 0.5,
@@ -21,37 +21,38 @@ const state = {
     timerId: null,
     w: 0,
     h: 0,
-    aspect: 4 / 3
+    aspect: 4 / 3,
+    ready: false
 }
 
 const mute = (mute) => (videoEl.muted = mute)
 
-const _stream = () => {
+const play = () => {
     videoEl.play()
-        .then(() => log.info('Media can autoplay'))
-        .catch(error => {
-            log.error('Media failed to play', error);
-        });
+        .then()
+        .catch(error => log.error('Can\'t autoplay', error))
 }
 
 const toggle = (show) => state.screen.toggleAttribute('hidden', show === undefined ? show : !show)
 
-videoEl.addEventListener('loadedmetadata', () => {
-    if (state.screen !== videoEl) {
-        state.screen.setAttribute('width', videoEl.videoWidth);
-        state.screen.setAttribute('height', videoEl.videoHeight);
-    }
-}, false);
+// Track resize even when the underlying media stream changes its video size
+videoEl.addEventListener('resize', () => {
+    if (state.screen === videoEl) return
+
+    state.screen.setAttribute('width', videoEl.videoWidth)
+    state.screen.setAttribute('height', videoEl.videoHeight)
+})
 
 videoEl.addEventListener('loadstart', () => {
-    videoEl.volume = options.volume;
-    videoEl.poster = options.poster;
-}, false);
+    videoEl.volume = options.volume
+    videoEl.poster = options.poster
+}, false)
 
 videoEl.addEventListener('canplay', () => {
-    videoEl.poster = '';
-    useCustomScreen(options.mirrorMode === 'mirror');
-}, false);
+    state.ready = true
+    videoEl.poster = ''
+    useCustomScreen(options.mirrorMode === 'mirror')
+}, false)
 
 videoEl.onfocus = () => {
     videoEl.blur()
@@ -62,16 +63,16 @@ videoEl.onerror = (e) => {
 }
 
 const onFullscreen = (fullscreen) => {
-    const el = document.fullscreenElement;
+    const el = document.fullscreenElement
 
     if (fullscreen) {
-        // timeout due to a chrome bug workaround
+        // timeout is due to a chrome bug
         setTimeout(() => {
             // aspect ratio calc
-            const w = window.screen.width ?? window.innerWidth;
-            const hh = el.innerHeight || el.clientHeight || 0;
-            const dw = (w - hh * state.aspect) / 2;
-            state.screen.style.padding = `0 ${dw}px`;
+            const w = window.screen.width ?? window.innerWidth
+            const hh = el.innerHeight || el.clientHeight || 0
+            const dw = (w - hh * state.aspect) / 2
+            state.screen.style.padding = `0 ${dw}px`
         }, 1)
     } else {
         state.screen.style.padding = '0'
@@ -79,95 +80,81 @@ const onFullscreen = (fullscreen) => {
 
     if (el === videoEl) {
         videoEl.classList.toggle('no-media-controls', !fullscreen)
-        videoEl.blur();
+        videoEl.blur()
     }
 }
 
-const vrs = {sw: 1, sh: 1}
+const vs = {w: 1, h: 1}
 
-const videoSizeRatio = () => {
-    const fullscreen = document.fullscreenElement !== null;
-    const {aspect, screen} = state;
+const videoSize = () => {
+    const fullscreen = document.fullscreenElement !== null
+    const {aspect, screen} = state
 
-    let width, height;
+    let width, height
     if (fullscreen) {
-        // we can't get the real <video> size without black bars, so we're trying to
-        // derive the dimensions from the known width or height
-        // and by calculating unknown dimension from the aspect ratio
-        const horizontal = videoEl.videoWidth > videoEl.videoHeight;
-        width = horizontal ? aspect * screen.offsetHeight : screen.offsetWidth;
-        height = horizontal ? screen.offsetHeight : aspect * screen.offsetWidth;
+        // we can't get the real <video> size on the screen without the black bars,
+        // so we're using one side (without the bar) for the length calc of another
+        const horizontal = videoEl.videoWidth > videoEl.videoHeight
+        width = horizontal ? aspect * screen.offsetHeight : screen.offsetWidth
+        height = horizontal ? screen.offsetHeight : aspect * screen.offsetWidth
     } else {
         ({width, height} = screen.getBoundingClientRect())
     }
 
-    vrs.sw = width / videoEl.videoWidth
-    vrs.sh = height / videoEl.videoHeight
+    vs.w = width
+    vs.h = height
 
-    return vrs
+    return vs
 }
 
 const useCustomScreen = (use) => {
     if (use) {
-        if (videoEl.paused || videoEl.ended) return;
+        if (videoEl.paused || videoEl.ended) return
 
-        let id = state.screen.getAttribute('id');
-        if (id === 'canvas-mirror') return;
+        if (state.screen === mirrorEl) return
 
-        const canvas = gui.create('canvas');
-        canvas.setAttribute('id', 'canvas-mirror');
-        canvas.setAttribute('hidden', '');
-        canvas.setAttribute('width', videoEl.videoWidth);
-        canvas.setAttribute('height', videoEl.videoHeight);
-        canvas.style['image-rendering'] = 'pixelated';
-        canvas.style.width = '100%'
-        canvas.style.height = '100%'
-        canvas.classList.add('game-screen');
+        toggle(false)
+        state.screen = mirrorEl
+        state.screen.setAttribute('width', videoEl.videoWidth)
+        state.screen.setAttribute('height', videoEl.videoHeight)
 
         // stretch depending on the video orientation
-        const isPortrait = videoEl.videoWidth < videoEl.videoHeight;
-        canvas.style.width = isPortrait ? 'auto' : canvas.style.width;
-        // canvas.style.height = isPortrait ? canvas.style.height : 'auto';
+        const isPortrait = videoEl.videoWidth < videoEl.videoHeight
+        state.screen.style.width = isPortrait ? 'auto' : videoEl.videoWidth
 
-        let surface = canvas.getContext('2d');
-        videoEl.parentNode.insertBefore(canvas, videoEl.nextSibling);
-        toggle(false)
-        state.screen = canvas
-        toggle(true)
+        let surface = state.screen.getContext('2d')
+        state.ready && toggle(true)
         state.timerId = setInterval(function () {
-            if (videoEl.paused || videoEl.ended || !surface) return;
-            surface.drawImage(videoEl, 0, 0);
-        }, options.mirrorUpdateRate);
+            if (videoEl.paused || videoEl.ended || !surface) return
+            surface.drawImage(videoEl, 0, 0)
+        }, options.mirrorUpdateRate)
     } else {
-        clearInterval(state.timerId);
-        let mirror = state.screen;
-        state.screen = videoEl;
-        toggle(true);
-        if (mirror !== videoEl) {
-            mirror.parentNode.removeChild(mirror);
-        }
+        clearInterval(state.timerId)
+        toggle(false)
+        state.screen = videoEl
+        state.ready && toggle(true)
     }
 }
 
 const init = () => {
-    options.mirrorMode = settings.loadOr(opts.MIRROR_SCREEN, 'none');
-    options.volume = settings.loadOr(opts.VOLUME, 50) / 100;
+    options.mirrorMode = settings.loadOr(opts.MIRROR_SCREEN, 'none')
+    options.volume = settings.loadOr(opts.VOLUME, 50) / 100
     sub(SETTINGS_CHANGED, () => {
-        const s = settings.get();
-        const newValue = s[opts.MIRROR_SCREEN];
+        const s = settings.get()
+        const newValue = s[opts.MIRROR_SCREEN]
         if (newValue !== options.mirrorMode) {
-            useCustomScreen(newValue === 'mirror');
-            options.mirrorMode = newValue;
+            useCustomScreen(newValue === 'mirror')
+            options.mirrorMode = newValue
         }
-    });
+    })
 }
 
 sub(APP_VIDEO_CHANGED, (payload) => {
     const {w, h, a, s} = payload
 
-    const scale = !s ? 1 : s;
-    const ww = w * scale;
-    const hh = h * scale;
+    const scale = !s ? 1 : s
+    const ww = w * scale
+    const hh = h * scale
 
     state.aspect = a
 
@@ -191,9 +178,11 @@ export const stream = {
     audio: {mute},
     video: {
         el: videoEl,
-        sizeRatio: videoSizeRatio,
+        get size() {
+            return videoSize()
+        },
     },
-    play: _stream,
+    play,
     toggle,
     hasDisplay: true,
     init,