Stabilize hosted live video playback
This commit is contained in:
parent
6739b424ab
commit
bd5d9857ed
4 changed files with 83 additions and 67 deletions
|
|
@ -16,14 +16,11 @@ fn chrome_path() -> Option<std::path::PathBuf> {
|
|||
.or_else(|| which("chromium"))
|
||||
}
|
||||
|
||||
fn wait_for_blob_video(tab: &headless_chrome::Tab, timeout: Duration) -> anyhow::Result<()> {
|
||||
fn wait_for_canvas_element(tab: &headless_chrome::Tab, timeout: Duration) -> anyhow::Result<()> {
|
||||
let deadline = Instant::now() + timeout;
|
||||
while Instant::now() < deadline {
|
||||
let js = r#"(function() {
|
||||
let v = document.querySelector('video');
|
||||
if (!v) return false;
|
||||
if (typeof v.src !== 'string') return false;
|
||||
return v.src.startsWith('blob:');
|
||||
return !!document.querySelector('moq-watch canvas');
|
||||
})();"#;
|
||||
let v = tab.evaluate(js, false)?;
|
||||
if v.value.and_then(|v| v.as_bool()).unwrap_or(false) {
|
||||
|
|
@ -31,14 +28,14 @@ fn wait_for_blob_video(tab: &headless_chrome::Tab, timeout: Duration) -> anyhow:
|
|||
}
|
||||
std::thread::sleep(Duration::from_millis(200));
|
||||
}
|
||||
anyhow::bail!("timed out waiting for video blob src");
|
||||
anyhow::bail!("timed out waiting for canvas player");
|
||||
}
|
||||
|
||||
fn wait_for_video_element(tab: &headless_chrome::Tab, timeout: Duration) -> anyhow::Result<()> {
|
||||
fn wait_for_moq_watch_element(tab: &headless_chrome::Tab, timeout: Duration) -> anyhow::Result<()> {
|
||||
let deadline = Instant::now() + timeout;
|
||||
while Instant::now() < deadline {
|
||||
let js = r#"(function() {
|
||||
return !!document.querySelector('video');
|
||||
return !!document.querySelector('moq-watch');
|
||||
})();"#;
|
||||
let v = tab.evaluate(js, false)?;
|
||||
if v.value.and_then(|v| v.as_bool()).unwrap_or(false) {
|
||||
|
|
@ -46,23 +43,32 @@ fn wait_for_video_element(tab: &headless_chrome::Tab, timeout: Duration) -> anyh
|
|||
}
|
||||
std::thread::sleep(Duration::from_millis(200));
|
||||
}
|
||||
anyhow::bail!("timed out waiting for <video> element");
|
||||
anyhow::bail!("timed out waiting for <moq-watch> element");
|
||||
}
|
||||
|
||||
fn debug_player_state(tab: &headless_chrome::Tab) -> anyhow::Result<String> {
|
||||
let js = r#"(function() {
|
||||
let v = document.querySelector('video');
|
||||
let src = v ? (v.src || '') : null;
|
||||
let currentTime = v ? v.currentTime : null;
|
||||
let muted = v ? v.muted : null;
|
||||
let readyState = v ? v.readyState : null;
|
||||
let buffered = v ? Array.from({ length: v.buffered.length }, (_, i) => [v.buffered.start(i), v.buffered.end(i)]) : [];
|
||||
let watch = document.querySelector('moq-watch');
|
||||
let canvas = document.querySelector('moq-watch canvas');
|
||||
let placeholder = document.querySelector('.placeholder');
|
||||
let placeholderText = placeholder ? (placeholder.innerText || '') : null;
|
||||
let status = document.querySelector('.source-status');
|
||||
let statusText = status ? (status.innerText || '') : null;
|
||||
let sources = Array.from(document.querySelectorAll('button[data-testid="global-watch"]')).length;
|
||||
return JSON.stringify({ hasVideo: !!v, videoSrc: src, currentTime, muted, readyState, buffered, placeholderText, statusText, sources });
|
||||
let hint = document.querySelector('#hint');
|
||||
let hintText = hint ? (hint.innerText || '') : null;
|
||||
return JSON.stringify({
|
||||
hasWatch: !!watch,
|
||||
hasCanvas: !!canvas,
|
||||
canvasWidth: canvas ? canvas.width : null,
|
||||
canvasHeight: canvas ? canvas.height : null,
|
||||
muted: watch ? watch.muted : null,
|
||||
volume: watch ? watch.volume : null,
|
||||
hintText,
|
||||
placeholderText,
|
||||
statusText,
|
||||
sources
|
||||
});
|
||||
})();"#;
|
||||
let v = tab.evaluate(js, false)?;
|
||||
Ok(v.value
|
||||
|
|
@ -70,15 +76,15 @@ fn debug_player_state(tab: &headless_chrome::Tab) -> anyhow::Result<String> {
|
|||
.unwrap_or_default())
|
||||
}
|
||||
|
||||
fn video_motion_sample(tab: &headless_chrome::Tab) -> anyhow::Result<Option<(f64, u32)>> {
|
||||
fn canvas_motion_sample(tab: &headless_chrome::Tab) -> anyhow::Result<Option<(f64, u32)>> {
|
||||
let js = r#"(function() {
|
||||
let v = document.querySelector('video');
|
||||
if (!v || !v.videoWidth || !v.videoHeight) return null;
|
||||
let source = document.querySelector('moq-watch canvas');
|
||||
if (!source || !source.width || !source.height) return null;
|
||||
let canvas = window.__ec_motion_canvas || (window.__ec_motion_canvas = document.createElement('canvas'));
|
||||
canvas.width = 160;
|
||||
canvas.height = 90;
|
||||
let ctx = canvas.getContext('2d', { willReadFrequently: true });
|
||||
ctx.drawImage(v, 0, 0, canvas.width, canvas.height);
|
||||
ctx.drawImage(source, 0, 0, canvas.width, canvas.height);
|
||||
let data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
|
||||
let hash = 2166136261 >>> 0;
|
||||
for (let i = 0; i < data.length; i += 16) {
|
||||
|
|
@ -86,7 +92,7 @@ fn video_motion_sample(tab: &headless_chrome::Tab) -> anyhow::Result<Option<(f64
|
|||
hash ^= data[i + 1]; hash = Math.imul(hash, 16777619);
|
||||
hash ^= data[i + 2]; hash = Math.imul(hash, 16777619);
|
||||
}
|
||||
return JSON.stringify({ currentTime: v.currentTime, hash: hash >>> 0 });
|
||||
return JSON.stringify({ currentTime: performance.now() / 1000, hash: hash >>> 0 });
|
||||
})();"#;
|
||||
let v = tab.evaluate(&js, false)?;
|
||||
let Some(s) = v.value.and_then(|v| v.as_str().map(|s| s.to_string())) else {
|
||||
|
|
@ -104,11 +110,11 @@ fn video_motion_sample(tab: &headless_chrome::Tab) -> anyhow::Result<Option<(f64
|
|||
Ok(Some((current_time, hash)))
|
||||
}
|
||||
|
||||
fn wait_for_video_motion(tab: &headless_chrome::Tab, timeout: Duration) -> anyhow::Result<()> {
|
||||
fn wait_for_canvas_motion(tab: &headless_chrome::Tab, timeout: Duration) -> anyhow::Result<()> {
|
||||
let deadline = Instant::now() + timeout;
|
||||
let mut first: Option<(f64, u32)> = None;
|
||||
while Instant::now() < deadline {
|
||||
if let Some(sample) = video_motion_sample(tab)? {
|
||||
if let Some(sample) = canvas_motion_sample(tab)? {
|
||||
if let Some((first_time, first_hash)) = first {
|
||||
if sample.0 > first_time + 0.5 && sample.1 != first_hash {
|
||||
return Ok(());
|
||||
|
|
@ -120,15 +126,15 @@ fn wait_for_video_motion(tab: &headless_chrome::Tab, timeout: Duration) -> anyho
|
|||
std::thread::sleep(Duration::from_millis(500));
|
||||
}
|
||||
let st = debug_player_state(tab).unwrap_or_default();
|
||||
anyhow::bail!("timed out waiting for changing video frames\nplayer_state={st}");
|
||||
anyhow::bail!("timed out waiting for changing canvas frames\nplayer_state={st}");
|
||||
}
|
||||
|
||||
fn wait_for_unmuted_video(tab: &headless_chrome::Tab, timeout: Duration) -> anyhow::Result<()> {
|
||||
fn wait_for_unmuted_player(tab: &headless_chrome::Tab, timeout: Duration) -> anyhow::Result<()> {
|
||||
let deadline = Instant::now() + timeout;
|
||||
while Instant::now() < deadline {
|
||||
let js = r#"(function() {
|
||||
let v = document.querySelector('video');
|
||||
return !!v && v.muted === false && v.volume > 0;
|
||||
let watch = document.querySelector('moq-watch');
|
||||
return !!watch && watch.muted === false && watch.volume > 0 && !watch.hasAttribute('muted');
|
||||
})();"#;
|
||||
let v = tab.evaluate(js, false)?;
|
||||
if v.value.and_then(|v| v.as_bool()).unwrap_or(false) {
|
||||
|
|
@ -137,7 +143,7 @@ fn wait_for_unmuted_video(tab: &headless_chrome::Tab, timeout: Duration) -> anyh
|
|||
std::thread::sleep(Duration::from_millis(200));
|
||||
}
|
||||
let st = debug_player_state(tab).unwrap_or_default();
|
||||
anyhow::bail!("timed out waiting for unmuted video\nplayer_state={st}");
|
||||
anyhow::bail!("timed out waiting for unmuted player\nplayer_state={st}");
|
||||
}
|
||||
|
||||
fn watch_url(site_url: &str, relay_url: &str, stream_id: &str) -> anyhow::Result<String> {
|
||||
|
|
@ -188,20 +194,19 @@ fn e2e_remote_website_watch_existing_stream_id() -> anyhow::Result<()> {
|
|||
tab.wait_until_navigated()?;
|
||||
|
||||
// Ensure the player is instantiated.
|
||||
if let Err(err) = wait_for_video_element(&tab, Duration::from_secs(90)) {
|
||||
if let Err(err) = wait_for_moq_watch_element(&tab, Duration::from_secs(90)) {
|
||||
let st = debug_player_state(&tab).unwrap_or_default();
|
||||
anyhow::bail!("{err}\nplayer_state={st}");
|
||||
}
|
||||
|
||||
// We consider playback "started" when the video uses a blob: URL (MSE).
|
||||
if let Err(err) = wait_for_blob_video(&tab, Duration::from_secs(90)) {
|
||||
if let Err(err) = wait_for_canvas_element(&tab, Duration::from_secs(90)) {
|
||||
let st = debug_player_state(&tab).unwrap_or_default();
|
||||
anyhow::bail!("{err}\nplayer_state={st}");
|
||||
}
|
||||
|
||||
tab.wait_for_element("video")?.click()?;
|
||||
wait_for_unmuted_video(&tab, Duration::from_secs(10))?;
|
||||
wait_for_video_motion(&tab, Duration::from_secs(30))?;
|
||||
tab.wait_for_element("moq-watch canvas")?.click()?;
|
||||
wait_for_unmuted_player(&tab, Duration::from_secs(10))?;
|
||||
wait_for_canvas_motion(&tab, Duration::from_secs(30))?;
|
||||
|
||||
Ok(())
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue