Not supported by your browser :(
Try in Chromium desktop!
'
async function capture() {
if (capture_started)
@@ -245,11 +290,13 @@ async function capture() {
preferCurrentTab: true
})
} catch (e) {
- console.error(e)
- if (e instanceof TypeError)
- out_video.outerHTML = unsupported
- else
+ if (e instanceof TypeError) {
+ console.error(e)
+ out_video.outerHTML = unsupported_message
+ } else {
+ console.warn(e)
capture_started = false
+ }
return
}
const [track] = stream.getVideoTracks()
@@ -263,13 +310,13 @@ async function capture() {
out_container.oncontextmenu = e => toggle_fullscreen(e)
out_container.title = 'Right-click to enter/exit fullscreen'
} catch (e) {
- console.error(e)
+ console.warn(e)
try {
const cropTarget = await CropTarget.fromElement(orig_video)
await track.cropTo(cropTarget)
} catch (e){
console.error(e)
- out_video.outerHTML = unsupported
+ out_video.outerHTML = unsupported_message
return
}
}
@@ -303,9 +350,20 @@ async function capture() {
runningMode: 'VIDEO',
})
- const models = {'pose': poseLandmarker, 'segment': imageSegmenter}
- const canvasCtx = canvas.getContext('2d');
- const drawingUtils = new DrawingUtils(canvasCtx);
+ try {
+ await tf.setBackend('webgpu')
+ } catch (e) {
+ console.warn(e)
+ await tf.setBackend('webgl')
+ }
+
+ // https://github.com/SystemErrorWang/White-box-Cartoonization
+ // https://github.com/vladmandic/anime
+ const cartoon = await tf.loadGraphModel('cartoon/whitebox.json')
+
+ const models = {'pose': poseLandmarker, 'segment': imageSegmenter, 'cartoon': cartoon}
+ const canvasCtx = canvas.getContext('2d')
+ const drawingUtils = new DrawingUtils(canvasCtx)
const trackProcessor = new MediaStreamTrackProcessor({ track: track })
const trackGenerator = new MediaStreamTrackGenerator({ kind: 'video' })
@@ -326,7 +384,7 @@ async function capture() {
const copyResult = await videoFrame.copyTo(yuv)
const { stride, offset: Voffset } = copyResult[1]
const { offset: Uoffset } = copyResult[2]
- effect_funcs[effect.value](W, H, stride, Voffset, Uoffset, yuv, rgba, videoFrame, models)
+ effect_funcs[effect.value](W, H, stride, Voffset, Uoffset, yuv, rgba, models, videoFrame)
}
const init = {
codedHeight: H,
@@ -352,7 +410,7 @@ function capture_select(input_elem) {
let wake_lock
function request_wake_lock() {
- navigator.wakeLock?.request('screen').then(lock => wake_lock = lock).catch(e => console.error(e.message))
+ navigator.wakeLock?.request('screen').then(lock => wake_lock = lock).catch(e => console.warn(e.message))
}
function visibility_change_handler() {
@@ -371,14 +429,14 @@ function toggle_fullscreen(event_or_elem, landscape=true, elem) {
elem.addEventListener('fullscreenchange', () => {
if (elem.classList.toggle('fullscreen')) {
if (landscape)
- screen.orientation.lock('landscape').catch(e => console.error(e.message)) // Works only in Chrome Android. See: https://bugzilla.mozilla.org/show_bug.cgi?id=1744125
+ screen.orientation.lock('landscape').catch(e => console.warn(e.message)) // Works only in Chrome Android. See: https://bugzilla.mozilla.org/show_bug.cgi?id=1744125
request_wake_lock()
document.addEventListener('visibilitychange', visibility_change_handler)
} else
wake_lock?.release().then(() => wake_lock = null)
})
}
- elem.requestFullscreen({navigationUI: 'hide'}).catch(e => console.error(e.message))
+ elem.requestFullscreen({navigationUI: 'hide'}).catch(e => console.warn(e.message))
} else
document.exitFullscreen()
return was_not_fullscreen_before
diff --git a/style.css b/style.css
index a82d689..1ae5fc2 100644
--- a/style.css
+++ b/style.css
@@ -11,25 +11,32 @@ body {
padding-block: 2rem;
}
+footer {
+ display: flex;
+ gap: 2em;
+}
+
.fullscreen {
background-color: canvas !important;
}
iframe {
+ border: none;
isolation: isolate;
+ min-height: 0;
}
iframe, #out_container {
aspect-ratio: 16 / 9;
background-color: black;
- border: none;
- flex-shrink: 0;
height: 100%;
- max-height: 40%;
+ max-height: 50vw;
}
#inp_container {
display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
gap: 1rem;
}
@@ -51,9 +58,4 @@ iframe, #out_container {
#out_container > div {
align-content: center;
font-family: sans-serif;
-}
-
-footer {
- display: flex;
- gap: 2em;
}
\ No newline at end of file