AI Flow: Video

@@ -62,7 +62,7 @@   }   function report() {     const d = v() ? v().duration || 0 : 0, t = v() ? v().currentTime : 0, c = v() ? p._chapterAt?.(t) : null;-    const body = { mode, t: +t.toFixed(2), duration: +d.toFixed(2), left: +(d - t).toFixed(1), chapter: c ? c.title : '', mics: [...$('mic').options].map((o) => o.textContent), mic: $('mic').selectedOptions[0]?.textContent || '', micAccess,+    const body = { mode, t: +t.toFixed(2), duration: +d.toFixed(2), left: +(d - t).toFixed(1), chapter: c ? c.title : '', mics: [...$('mic').options].map((o) => o.textContent), mic: $('mic').selectedOptions[0]?.textContent || '', micAccess, cams: [...$('cam').options].slice(1).map((o) => o.textContent), camera: $('cam').value ? $('cam').selectedOptions[0]?.textContent || '' : '', camAccess,       recording: mode === 'record', level: +level.toFixed(3), rawLevel: +rawLevel.toFixed(3), peak: +peak.toFixed(3), boost: +boost.toFixed(2), calibration: cal, calibrating: calPhase, takes: takes.length, chosen: chosen ? chosen.file : null, strokes: strokes.length, status: lastStatus };     fetch('state', { method: 'POST', body: JSON.stringify(body) }).catch(() => {});   }@@ -240,6 +240,41 @@   }    // ---------------- rehearse, record, stop ----------------+  // ---------------- camera: the narrator's face, a picture in the corner of the film ----------------+  let camStream = null, camRec = null, camChunks = [], camAccess = 'not asked';+  const pip = $('campip');+  async function cams() {+    const devs = (await navigator.mediaDevices.enumerateDevices()).filter((d) => d.kind === 'videoinput');+    const keep = $('cam').value;+    $('cam').innerHTML = '<option value="">No camera (voice only)</option>' + devs.map((d, i) => `<option value="${d.deviceId}">${esc(d.label || 'Camera ' + (i + 1))}</option>`).join('');+    if (keep && [...$('cam').options].some((o) => o.value === keep)) $('cam').value = keep;+  }+  function closeCam() { if (camStream) camStream.getTracks().forEach((x) => x.stop()); camStream = null; pip.srcObject = null; pip.classList.remove('on'); }+  async function openCam(first) {+    closeCam();+    const id = $('cam').value;+    if (!id && !first) { $('camstat').textContent = 'Off. Pick a camera to appear in the corner of the film.'; report(); return; }+    try {+      camStream = await navigator.mediaDevices.getUserMedia({ video: { deviceId: id ? { exact: id } : undefined, width: { ideal: 1280 }, height: { ideal: 720 }, frameRate: { ideal: 30 } } });+      camAccess = 'allowed';+    } catch (e) { camAccess = 'blocked: ' + e.message; $('cam').value = ''; $('camstat').textContent = 'The browser did not give access to a camera. Allow it in the address bar, then pick it again.'; toast('The browser did not give access to a camera.', 'error'); report(); return; }+    await cams();+    const st = camStream.getVideoTracks()[0].getSettings();+    if (!$('cam').value) { const o = [...$('cam').options].find((o) => o.value === st.deviceId) || $('cam').options[1]; if (o) $('cam').value = o.value; }+    pip.classList.remove('playback'); pip.srcObject = camStream; pip.classList.add('on'); pip.play().catch(() => {});+    $('camstat').textContent = `On, ${st.width} x ${st.height}. This corner picture is recorded with every take.`;+    try { localStorage.setItem('aiflow-video-cam', $('cam').selectedOptions[0]?.textContent || ''); } catch (_) {}+    report();+  }+  $('cam').onchange = () => { if (mode === 'record') return toast('Finish this take first.', 'info'); if (!$('cam').value) { try { localStorage.removeItem('aiflow-video-cam'); } catch (_) {} } openCam(); };+  function stopCamRec() {+    return new Promise((res) => {+      if (!camRec || camRec.state === 'inactive') return res(null);+      camRec.onstop = () => res(new Blob(camChunks, { type: camRec.mimeType || 'video/webm' }));+      camRec.stop();+    });+  }+   async function preroll(text) {     const n = Math.max(0, Math.round(S.preRoll)); if (!n) return true;     $('preroll').classList.add('on'); $('pre-text').textContent = text;@@ -264,11 +299,17 @@     const type = ['audio/webm;codecs=opus', 'audio/webm', 'audio/mp4'].find((x) => MediaRecorder.isTypeSupported(x)) || '';     rec = new MediaRecorder(recStream, type ? { mimeType: type, audioBitsPerSecond: 192000 } : undefined);     rec.ondataavailable = (e) => e.data.size && chunks.push(e.data);+    camRec = null; camChunks = [];+    if (camStream) {+      const vt = ['video/webm;codecs=vp9', 'video/webm;codecs=vp8', 'video/webm', 'video/mp4'].find((x) => MediaRecorder.isTypeSupported(x)) || '';+      try { camRec = new MediaRecorder(camStream, vt ? { mimeType: vt, videoBitsPerSecond: 3000000 } : undefined); camRec.ondataavailable = (e) => e.data.size && camChunks.push(e.data); camRec.onstart = () => { tRec.cam = performance.now(); }; camRec.start(1000); }+      catch (e) { camRec = null; toast('The camera could not be recorded (' + e.message + '). Your voice is still being recorded.', 'error'); }+    }     rec.onstart = () => { tRec.rec = performance.now(); v().play(); };     rec.onstop = save;     v().addEventListener('playing', () => { if (tRec.rec && tRec.play === undefined) tRec.play = performance.now(); }, { once: true });     rec.start(1000);-    setMode('record'); $('recbadge-text').textContent = 'Recording your voice'; say('Recording');+    setMode('record'); $('recbadge-text').textContent = camRec ? 'Recording your voice and camera' : 'Recording your voice'; say('Recording');   }   function stop() {     stopFlag = true;@@ -280,14 +321,17 @@    async function save() {     v().pause(); const whole = v().duration - v().currentTime < 1.5;+    const camBlob = await stopCamRec();+     const blob = new Blob(chunks, { type: rec.mimeType || 'audio/webm' });     const drawn = strokes.map((s) => ({ t0: s.t0, end: s.end ?? +v().currentTime.toFixed(3), wiped: s.wiped, pts: s.pts }));-    const meta = { mime: blob.type, mic: $('mic').selectedOptions[0]?.textContent || '', videoStartsAtMs: Math.round((tRec.play ?? tRec.rec) - tRec.rec), recordedMs: Math.round(performance.now() - tRec.rec), videoStoppedAtS: +v().currentTime.toFixed(2), videoDurationS: +v().duration.toFixed(2), whole, peak: +peak.toFixed(3), boost: +boost.toFixed(2), calibration: cal, strokes: drawn.length, drawFade: S.drawFade };+    const meta = { mime: blob.type, mic: $('mic').selectedOptions[0]?.textContent || '', videoStartsAtMs: Math.round((tRec.play ?? tRec.rec) - tRec.rec), recordedMs: Math.round(performance.now() - tRec.rec), camStartsAtMs: camBlob && tRec.cam !== undefined ? Math.round(tRec.cam - tRec.rec) : null, camera: camBlob ? ($('cam').value ? $('cam').selectedOptions[0]?.textContent || '' : 'camera') : '', videoStoppedAtS: +v().currentTime.toFixed(2), videoDurationS: +v().duration.toFixed(2), whole, peak: +peak.toFixed(3), boost: +boost.toFixed(2), calibration: cal, strokes: drawn.length, drawFade: S.drawFade };     setMode('idle', 'Saving'); say('Saving the take');     modal(`<h2>Saving your recording...</h2><p>Keep this tab open.</p>`);     try {       const r = await (await fetch('take', { method: 'POST', headers: { 'X-Take-Meta': encodeURIComponent(JSON.stringify(meta)) }, body: blob })).json();       if (drawn.length) await fetch('draw?file=' + encodeURIComponent(r.file), { method: 'POST', body: JSON.stringify(drawn) });+      if (camBlob && camBlob.size) { modal(`<h2>Saving your camera recording...</h2><p>Keep this tab open.</p>`); const c = await (await fetch('cam?file=' + encodeURIComponent(r.file), { method: 'POST', headers: { 'X-Cam-Mime': camBlob.type }, body: camBlob })).json(); if (c.cam) r.cam = c.cam; else toast('The camera recording could not be saved; your voice was.', 'error'); }       const take = { ...meta, ...r, strokes: drawn, n: takes.length + 1 }; takes.push(take); renderTakes(); header();       finishCard(take); setMode('idle'); say(`Take ${take.n} saved (${fmt(take.seconds)})`);     } catch (e) { modal(`<h2>The take could not be saved</h2><p>${esc(e.message)}. It is still in this page: do not close the tab, and tell your AI.</p>`); setMode('idle'); say('Save failed: ' + e.message); }@@ -328,7 +372,10 @@     const off = (tk.videoStartsAtMs || 0) / 1000;     const sync = () => { if (!reviewAudio) return; const want = v().currentTime + off; if (Math.abs(reviewAudio.currentTime - want) > 0.25) reviewAudio.currentTime = want; };     v().muted = true; p.seekTo(0); capsOn();-    v().onplay = () => { sync(); reviewAudio && reviewAudio.play().catch(() => {}); }; v().onpause = () => reviewAudio && reviewAudio.pause(); v().onseeked = sync; v().ontimeupdate = sync;+    const camOff = off - (tk.camStartsAtMs || 0) / 1000;+    if (tk.cam) { pip.srcObject = null; pip.src = 'takes/' + tk.cam; pip.classList.add('on', 'playback'); }+    const csync = () => { if (!tk.cam) return; const want = Math.max(0, v().currentTime + camOff); if (Math.abs(pip.currentTime - want) > 0.3) pip.currentTime = want; };+    v().onplay = () => { sync(); csync(); reviewAudio && reviewAudio.play().catch(() => {}); tk.cam && pip.play().catch(() => {}); }; v().onpause = () => { reviewAudio && reviewAudio.pause(); tk.cam && pip.pause(); }; v().onseeked = () => { sync(); csync(); }; v().ontimeupdate = () => { sync(); csync(); };     v().onended = () => mode === 'review' && endReview(true);     setMode('review', `Reviewing take ${tk.n}`); $('recbadge-text').textContent = `Take ${tk.n}: your voice with the film`;     say(`Reviewing take ${tk.n} with the film`); v().play().catch(() => {});@@ -336,6 +383,7 @@   }   function endReview(done) {     v().pause(); if (reviewAudio) { reviewAudio.pause(); reviewAudio = null; }+    if (pip.classList.contains('playback')) { pip.pause(); pip.removeAttribute('src'); pip.load(); pip.classList.remove('on', 'playback'); if (camStream) { pip.srcObject = camStream; pip.classList.add('on'); pip.play().catch(() => {}); } }     v().onplay = v().onpause = v().onseeked = v().ontimeupdate = v().onended = null;     const tk = reviewTake; reviewTake = null; setMode('idle'); say('Review ended');     if (done && tk && !chosen) finishCard(tk);@@ -387,6 +435,10 @@     test: (d) => act('test', (d.by || 'AI') + ': test the microphone'), calibrate: (d) => act('cal', (d.by || 'AI') + ': calibrate'),     gain: async (d) => { await glide('#boost', (d.by || 'AI') + ': boost ' + d.value + 'x'); setBoost(d.value); toast(`Your AI set the microphone boost to ${boost.toFixed(1)}x`, 'info'); },     mic: async (d) => { const o = [...$('mic').options].find((o) => o.textContent.toLowerCase().includes(String(d.name || '').toLowerCase())); if (!o) return toast('No microphone matching "' + d.name + '"', 'error'); await glide('#mic', (d.by || 'AI') + ': pick ' + o.textContent); $('mic').value = o.value; $('mic').onchange(); },+    cam: async (d) => { const n = String(d.name || '').toLowerCase(); await glide('#cam', (d.by || 'AI') + (n === 'off' ? ': camera off' : ': camera on'));+      if (n === 'off') { $('cam').value = ''; return $('cam').onchange(); }+      if (n === 'on' || !n) { $('cam').value = ''; return openCam(true); }+      const o = [...$('cam').options].find((o) => o.value && o.textContent.toLowerCase().includes(n)); if (!o) return openCam(true); $('cam').value = o.value; $('cam').onchange(); },     seek: (d) => p.seekTo(Math.max(0, +d.seconds || 0)), play: () => v().play(), pause: () => v().pause(),     review: (d) => { const tk = takes[(+d.take || takes.length) - 1]; tk ? review(tk) : toast('No such take', 'error'); },     use: (d) => { const tk = takes[(+d.take || takes.length) - 1]; tk ? choose(tk) : toast('No such take', 'error'); },@@ -404,6 +456,8 @@     if (st.chosen) chosen = takes.find((t) => t.file === st.chosen) || null;     segs(); header(); renderTakes(); setBoost(boost, true); setMode('idle'); mics(); tick();     navigator.mediaDevices.addEventListener('devicechange', mics);+    await cams(); navigator.mediaDevices.addEventListener('devicechange', cams);+    try { const want = localStorage.getItem('aiflow-video-cam'); if (want) { const o = [...$('cam').options].find((o) => o.textContent === want); if (o) { $('cam').value = o.value; openCam(); } else openCam(true); } } catch (_) {}     v().addEventListener('ended', () => { if (mode === 'record' && rec && rec.state !== 'inactive') rec.stop(); else if (mode === 'rehearse') { setMode('idle'); say('Rehearsal finished'); toast('That was the whole film. Press Record when you are ready.', 'success'); } });     v().addEventListener('durationchange', () => { segs(); header(); });     say('Ready');