save and load video from url hash; request capture on load; support u…

…rls without protocol; support time params
eyaler · May 24, 2024 · 78ab318 · 78ab318
1 parent 63188d7
commit 78ab318
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 # LordTubeMaster
 ### Live YouTube processing in client-side JS using self screen capture
 
-Demo: https://eyaler.github.io/LordTubeMaster/
+Demo: https://eyaler.github.io/LordTubeMaster/#dQw4w9WgXcQ
 
 Note as of May 2024 this is only supported on *Chromium desktop*
 

diff --git a/index.html b/index.html
@@ -7,7 +7,7 @@
     <link rel="stylesheet" type="text/css" href="style.css">
     <script src="script.js" type="module"></script>
 </head>
-<body>
+<body onload="video_url.value = location.hash.slice(1); video_url.dispatchEvent(new Event('change'))">  <!-- Chromium allows requesting screen capture without user gesture (against the spec). See: https://issues.chromium.org/issues/40177563 -->
     <div id="inp_container">
         <input type="text" id="video_url" autofocus inputmode="url" spellcheck="false" size="45" placeholder="Enter Youtube/Vimeo ID or URL">
         <select id="effect">

diff --git a/script.js b/script.js
@@ -9,23 +9,31 @@ import {
 
 video_url.addEventListener('change', e => get_video(e.currentTarget))
 video_url.addEventListener('keydown', e => {if (e.key == 'Enter' || e.key == 'Tab') get_video(e.currentTarget)})
-video_url.addEventListener('focus', e => {if (e.currentTarget.value) {e.currentTarget.select(); capture()}})
+video_url.addEventListener('focus', e => {if (e.currentTarget.value) capture_select(e.currentTarget)})
 
 function get_video(input_elem) {
     let host = ''
     let vid_id = input_elem.value
     let url = 'about:blank'
+    if (vid_id.includes('/') && !vid_id.includes('//'))
+        vid_id = 'https://' + vid_id
+    let params = vid_id.match(/(#|&|\?t=).+|$/)[0]
+    if (params)
+        vid_id = vid_id.split(params)[0]
     try {
         const input_url = new URL(vid_id)
         host = input_url.hostname
         vid_id = input_url.searchParams.get('v') || input_url.pathname.split('/').at(-1)
     } catch {}
     if (host.includes('vimeo') || vid_id.match(/^\d+$/))
-        url = `https://player.vimeo.com/video/${vid_id}?autoplay=1&byline=0&dnt=1&loop=1&&muted=1&portrait=0&quality=1080p&title=0`
-    else if (vid_id)
-        url = `https://www.youtube-nocookie.com/embed/${vid_id}?autoplay=1&loop=1&playlist=${vid_id}&playsinline=1&rel=0&mute=1`
+        url = `https://player.vimeo.com/video/${vid_id}?autoplay=1&byline=0&dnt=1&loop=1&&muted=1&portrait=0&quality=1080p&title=0${params}`
+    else if (vid_id) {
+        params = params.replace(/[&?]t=(\d+).*/, '&start=$1')
+        url = `https://www.youtube-nocookie.com/embed/${vid_id}?autoplay=1&loop=1&playlist=${vid_id}&playsinline=1&rel=0${params}&mute=1`
+    }
+    location.hash = vid_id + params
     orig_video.src = url
-    capture()
+    capture_select(input_elem)
 }
 
 function yuv2rgb(Y, U, V) {  // https://github.com/pps83/libyuv/blob/master/source/row_common.cc#L1226
@@ -267,6 +275,10 @@ async function capture() {
     out_video.srcObject = new MediaStream([trackGenerator])
 }
 
+function capture_select(input_elem) {
+    capture().then(() => input_elem.select())
+}
+
 
 // FULLSCREEN