straight_to_video 0.0.10 → 0.0.12

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: eb365dda5fa968b1cae50f89065e24b0d49f49fa911aa067ace2b19052243123
-  data.tar.gz: a67e3ac69b986d0a4458d8c72412ef52de6deb4f564312a3bf156199a99f5260
+  metadata.gz: c562c9b7243f141e7524a58e115bd257d5207bd7272bf01547812e9845235e75
+  data.tar.gz: bbe4b5f3e82e6d84fb928c9165d5c8935416ed6c04034c55db44c740db949785
 SHA512:
-  metadata.gz: c0da985ed8833ee888047ea9654df6d2fc964bf5629a11c03bfdd292047a183f59a41b5fd127805eb25731ff8b34171969b3a36c57ac40bd95961f5c1628ab54
-  data.tar.gz: 315f2daf669d9b524f6310f1796becc0606573a39b85f93cf1a725c6e6eceacaf7c2b6bee4cab398f5e3261d05ace06fc42c800095cb14197d26066846bf6f2d
+  metadata.gz: 368159b6977e3d37b116a55a35cca1d849029657ae86b01aa8113f9385288dab86f140d98a5bbb4d9639464e7e2ef8c362e204b52c45e5e2c36927e9aaa4db93
+  data.tar.gz: 8acd9f7af6b1293e7b2a6bd4626e6dc0897a09811684bcf8a7e27260dd48071306c1aba8b61c6b8d9a76f1aac0f5552eb8edd43f0e7e9cc9259e800531a3803d

data/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 0.0.12
+
+* Bound the WebCodecs encoder queue so long videos cannot exhaust WebKit memory.
+* Keep browser encoding at or below the source video's bitrate.
+
+## 0.0.11
+
+* Work around WebKit labeling the requested first HEVC keyframe as a delta packet.
+* Keep browser-encoded video below the 25 Mbps delivery limit.
+* Accept WebKit's full-range `yuvj420p` output as progressive 4:2:0 video.
+
 ## 0.0.10
 
 - Fix Safari macOS Tahoe bug where native video controls never auto-hide by rewriting the moov atom to match ffmpeg's conventions (zero timestamps, standard handler names, edts/elst, extended esds, btrt, sgpd/sbgp)

data/app/assets/javascripts/straight-to-video.js

@@ -1,4 +1,4 @@
-// straight-to-video@0.0.10 vendored by the straight_to_video gem
+// straight-to-video@0.0.12 vendored by the straight_to_video gem
 // straight-to-video - https://github.com/searlsco/straight-to-video
 
 // ----- External imports -----
@@ -10,9 +10,11 @@ import {
 
 // ----- Constants -----
 const MAX_LONG_SIDE = 1920
+const TARGET_VIDEO_BITRATE = 12_000_000
 const TARGET_AUDIO_BITRATE = 96_000
 const TARGET_AUDIO_SR = 48_000
 const TARGET_AUDIO_CHANNELS = 2
+const MAX_VIDEO_ENCODER_QUEUE_SIZE = 4
 
 // ----- Video metadata probe -----
 async function probeVideo (file) {
@@ -33,34 +35,47 @@ async function probeVideo (file) {
   })
 }
 
-async function estimateSourceVideoFps (file) {
+async function estimateSourceVideoStats (file) {
   try {
     const input = new Input({ source: new BlobSource(file), formats: ALL_FORMATS })
     const tracks = await input.getTracks()
     const video = tracks.find(t => typeof t.isVideoTrack === 'function' && t.isVideoTrack())
-    if (!video) return 0
+    if (!video) return { fps: 0, bitrate: 0 }
     const sink = new EncodedPacketSink(video)
     const durations = []
+    let firstTimestamp = Infinity
+    let lastTimestamp = -Infinity
+    let totalBytes = 0
     for await (const packet of sink.packets(undefined, undefined, { metadataOnly: true })) {
-      const dur = Number(packet?.duration)
-      if (packet.timestamp >= 0 && Number.isFinite(dur) && dur > 0) durations.push(dur)
+      const duration = Number(packet?.duration)
+      if (packet.timestamp >= 0 && Number.isFinite(duration) && duration > 0) {
+        durations.push(duration)
+        firstTimestamp = Math.min(firstTimestamp, packet.timestamp)
+        lastTimestamp = Math.max(lastTimestamp, packet.timestamp + duration)
+        totalBytes += packet.byteLength
+      }
       if (durations.length >= 120) break
     }
-    if (!durations.length) return 0
+    if (!durations.length) return { fps: 0, bitrate: 0 }
     durations.sort((a, b) => a - b)
-    const dur = durations[Math.floor(durations.length / 2)]
-    return Number.isFinite(dur) && dur > 0 ? (1 / dur) : 0
+    const duration = durations[Math.floor(durations.length / 2)]
+    const sampledDuration = lastTimestamp - firstTimestamp
+    return {
+      fps: Number.isFinite(duration) && duration > 0 ? (1 / duration) : 0,
+      bitrate: sampledDuration > 0 ? (totalBytes * 8 / sampledDuration) : 0
+    }
   } catch (_) {
-    return 0
+    return { fps: 0, bitrate: 0 }
   }
 }
 
-async function determineTargetFps (file, { width, height }) {
+async function determineEncodingPlan (file, { width, height }) {
   const maxFps = Math.max(width, height) <= 1920 ? 30 : 60
-  if (maxFps === 30) return 30
-
-  const fps = await estimateSourceVideoFps(file)
-  return fps >= 45 ? 60 : 30
+  const source = await estimateSourceVideoStats(file)
+  return {
+    fps: maxFps === 30 ? 30 : (source.fps >= 45 ? 60 : 30),
+    bitrate: source.bitrate > 0 ? Math.min(TARGET_VIDEO_BITRATE, Math.round(source.bitrate)) : TARGET_VIDEO_BITRATE
+  }
 }
 
 // ----- Audio helpers -----
@@ -124,8 +139,8 @@ async function canOptimizeVideo (file) {
     const scale = Math.min(1, MAX_LONG_SIDE / Math.max(2, long))
     const targetWidth = Math.max(2, Math.round(width * scale))
     const targetHeight = Math.max(2, Math.round(height * scale))
-    const fps = await determineTargetFps(file, { width, height })
-    const sup = await selectVideoEncoderConfig({ width: targetWidth, height: targetHeight, fps }).then(() => true).catch(() => false)
+    const plan = await determineEncodingPlan(file, { width, height })
+    const sup = await selectVideoEncoderConfig({ width: targetWidth, height: targetHeight, ...plan }).then(() => true).catch(() => false)
     if (!sup) return { ok: false, reason: 'unsupported-video-config', message: 'No supported encoder configuration for this resolution on this device.' }
 
     // Header sniffing when file.type is empty/incorrect
@@ -141,7 +156,7 @@ async function canOptimizeVideo (file) {
       const hasEbml = buf.length >= 4 && buf[0] === 0x1A && buf[1] === 0x45 && buf[2] === 0xDF && buf[3] === 0xA3
       if (!(hasFtyp || hasEbml)) return { ok: false, reason: 'unknown-container', message: 'Unrecognized container; expected MP4/MOV or WebM.' }
     }
-    return { ok: true, reason: 'ok', message: 'ok', plan: { width: targetWidth, height: targetHeight, fps } }
+    return { ok: true, reason: 'ok', message: 'ok', plan: { width: targetWidth, height: targetHeight, ...plan } }
   } catch (e) {
     return { ok: false, reason: 'probe-failed', message: String(e?.message || e) }
   }
@@ -160,12 +175,12 @@ async function optimizeVideo (file, { onProgress } = {}) {
   return { changed: true, file: newFile }
 }
 
-async function selectVideoEncoderConfig ({ width, height, fps }) {
-  const hevc = { codec: 'hvc1.1.4.L123.B0', width, height, framerate: fps, hardwareAcceleration: 'prefer-hardware', hevc: { format: 'hevc' } }
+async function selectVideoEncoderConfig ({ width, height, fps, bitrate = TARGET_VIDEO_BITRATE }) {
+  const hevc = { codec: 'hvc1.1.4.L123.B0', width, height, framerate: fps, bitrate, hardwareAcceleration: 'prefer-hardware', hevc: { format: 'hevc' } }
   const supH = await VideoEncoder.isConfigSupported(hevc).catch(() => ({ supported: false }))
   if (supH.supported) return { codecId: 'hevc', config: supH.config }
 
-  const avc = { codec: 'avc1.64002A', width, height, framerate: fps, hardwareAcceleration: 'prefer-hardware', avc: { format: 'avc' } }
+  const avc = { codec: 'avc1.64002A', width, height, framerate: fps, bitrate, hardwareAcceleration: 'prefer-hardware', avc: { format: 'avc' } }
   const supA = await VideoEncoder.isConfigSupported(avc)
   return { codecId: 'avc', config: supA.config }
 }
@@ -174,6 +189,12 @@ function shouldDecodeViaVideoElement () {
   return (navigator?.vendor || '').includes('Apple')
 }
 
+async function applyVideoEncoderBackpressure (encoder) {
+  while (encoder.encodeQueueSize > MAX_VIDEO_ENCODER_QUEUE_SIZE) {
+    await new Promise(resolve => setTimeout(resolve, 0))
+  }
+}
+
 async function waitForFrameReady (video, budgetMs) {
   if (typeof video.requestVideoFrameCallback !== 'function') return false
   return await new Promise((resolve) => {
@@ -238,6 +259,7 @@ async function encodeFramesViaVideoElement ({ file, durationCfr, step, frames, c
     const vf = new VideoFrame(canvas, { timestamp: Math.round(t * 1e6), duration: Math.round(step * 1e6) })
     ve.encode(vf, { keyFrame: i === 0 })
     vf.close()
+    await applyVideoEncoderBackpressure(ve)
 
     if (typeof onProgress === 'function') {
       try {
@@ -284,6 +306,7 @@ async function encodeFramesViaVideoSampleSink ({ file, durationCfr, step, frames
         const vf = new VideoFrame(canvas, { timestamp: Math.round(t * 1e6), duration: Math.round(step * 1e6) })
         ve.encode(vf, { keyFrame: i === 0 })
         vf.close()
+        await applyVideoEncoderBackpressure(ve)
 
         if (typeof onProgress === 'function') {
           try {
@@ -310,6 +333,7 @@ async function encodeFramesViaVideoSampleSink ({ file, durationCfr, step, frames
       const vf = new VideoFrame(canvas, { timestamp: Math.round(t * 1e6), duration: Math.round(step * 1e6) })
       ve.encode(vf, { keyFrame: i === 0 })
       vf.close()
+      await applyVideoEncoderBackpressure(ve)
 
       if (typeof onProgress === 'function') {
         try {
@@ -627,12 +651,13 @@ async function encodeVideo ({ file, srcMeta, plan, onProgress }) {
   const targetWidth = Math.max(2, Number(plan?.width) || Math.round(w * scale))
   const targetHeight = Math.max(2, Number(plan?.height) || Math.round(h * scale))
 
-  const targetFps = Math.max(1, Number(plan?.fps) || await determineTargetFps(file, { width: w, height: h }))
+  const fallbackPlan = plan || await determineEncodingPlan(file, { width: w, height: h })
+  const targetFps = Math.max(1, Number(fallbackPlan.fps))
   const step = 1 / Math.max(1, targetFps)
   const frames = Math.max(1, Math.floor(durationCfr / step))
 
   const output = new Output({ format: new Mp4OutputFormat({ fastStart: 'in-memory' }), target: new BufferTarget() })
-  const { codecId, config: usedCfg } = await selectVideoEncoderConfig({ width: targetWidth, height: targetHeight, fps: targetFps })
+  const { codecId, config: usedCfg } = await selectVideoEncoderConfig({ width: targetWidth, height: targetHeight, fps: targetFps, bitrate: fallbackPlan.bitrate })
   const videoTrack = new EncodedVideoPacketSource(codecId)
   output.addVideoTrack(videoTrack, { frameRate: targetFps })
 
@@ -685,7 +710,7 @@ async function encodeVideo ({ file, srcMeta, plan, onProgress }) {
     const { chunk } = pendingPackets[i]
     const data = new Uint8Array(chunk.byteLength); chunk.copyTo(data)
     const ts = i * step; const dur = step
-    const pkt = new EncodedPacket(data, chunk.type === 'key' ? 'key' : 'delta', ts, dur)
+    const pkt = new EncodedPacket(data, i === 0 || chunk.type === 'key' ? 'key' : 'delta', ts, dur)
     await videoTrack.add(pkt, { decoderConfig: { codec: usedCfg.codec, codedWidth: targetWidth, codedHeight: targetHeight, description: codecDesc } })
   }
 

data/index.js

@@ -9,9 +9,11 @@ import {
 
 // ----- Constants -----
 const MAX_LONG_SIDE = 1920
+const TARGET_VIDEO_BITRATE = 12_000_000
 const TARGET_AUDIO_BITRATE = 96_000
 const TARGET_AUDIO_SR = 48_000
 const TARGET_AUDIO_CHANNELS = 2
+const MAX_VIDEO_ENCODER_QUEUE_SIZE = 4
 
 // ----- Video metadata probe -----
 async function probeVideo (file) {
@@ -32,34 +34,47 @@ async function probeVideo (file) {
   })
 }
 
-async function estimateSourceVideoFps (file) {
+async function estimateSourceVideoStats (file) {
   try {
     const input = new Input({ source: new BlobSource(file), formats: ALL_FORMATS })
     const tracks = await input.getTracks()
     const video = tracks.find(t => typeof t.isVideoTrack === 'function' && t.isVideoTrack())
-    if (!video) return 0
+    if (!video) return { fps: 0, bitrate: 0 }
     const sink = new EncodedPacketSink(video)
     const durations = []
+    let firstTimestamp = Infinity
+    let lastTimestamp = -Infinity
+    let totalBytes = 0
     for await (const packet of sink.packets(undefined, undefined, { metadataOnly: true })) {
-      const dur = Number(packet?.duration)
-      if (packet.timestamp >= 0 && Number.isFinite(dur) && dur > 0) durations.push(dur)
+      const duration = Number(packet?.duration)
+      if (packet.timestamp >= 0 && Number.isFinite(duration) && duration > 0) {
+        durations.push(duration)
+        firstTimestamp = Math.min(firstTimestamp, packet.timestamp)
+        lastTimestamp = Math.max(lastTimestamp, packet.timestamp + duration)
+        totalBytes += packet.byteLength
+      }
       if (durations.length >= 120) break
     }
-    if (!durations.length) return 0
+    if (!durations.length) return { fps: 0, bitrate: 0 }
     durations.sort((a, b) => a - b)
-    const dur = durations[Math.floor(durations.length / 2)]
-    return Number.isFinite(dur) && dur > 0 ? (1 / dur) : 0
+    const duration = durations[Math.floor(durations.length / 2)]
+    const sampledDuration = lastTimestamp - firstTimestamp
+    return {
+      fps: Number.isFinite(duration) && duration > 0 ? (1 / duration) : 0,
+      bitrate: sampledDuration > 0 ? (totalBytes * 8 / sampledDuration) : 0
+    }
   } catch (_) {
-    return 0
+    return { fps: 0, bitrate: 0 }
   }
 }
 
-async function determineTargetFps (file, { width, height }) {
+async function determineEncodingPlan (file, { width, height }) {
   const maxFps = Math.max(width, height) <= 1920 ? 30 : 60
-  if (maxFps === 30) return 30
-
-  const fps = await estimateSourceVideoFps(file)
-  return fps >= 45 ? 60 : 30
+  const source = await estimateSourceVideoStats(file)
+  return {
+    fps: maxFps === 30 ? 30 : (source.fps >= 45 ? 60 : 30),
+    bitrate: source.bitrate > 0 ? Math.min(TARGET_VIDEO_BITRATE, Math.round(source.bitrate)) : TARGET_VIDEO_BITRATE
+  }
 }
 
 // ----- Audio helpers -----
@@ -123,8 +138,8 @@ async function canOptimizeVideo (file) {
     const scale = Math.min(1, MAX_LONG_SIDE / Math.max(2, long))
     const targetWidth = Math.max(2, Math.round(width * scale))
     const targetHeight = Math.max(2, Math.round(height * scale))
-    const fps = await determineTargetFps(file, { width, height })
-    const sup = await selectVideoEncoderConfig({ width: targetWidth, height: targetHeight, fps }).then(() => true).catch(() => false)
+    const plan = await determineEncodingPlan(file, { width, height })
+    const sup = await selectVideoEncoderConfig({ width: targetWidth, height: targetHeight, ...plan }).then(() => true).catch(() => false)
     if (!sup) return { ok: false, reason: 'unsupported-video-config', message: 'No supported encoder configuration for this resolution on this device.' }
 
     // Header sniffing when file.type is empty/incorrect
@@ -140,7 +155,7 @@ async function canOptimizeVideo (file) {
       const hasEbml = buf.length >= 4 && buf[0] === 0x1A && buf[1] === 0x45 && buf[2] === 0xDF && buf[3] === 0xA3
       if (!(hasFtyp || hasEbml)) return { ok: false, reason: 'unknown-container', message: 'Unrecognized container; expected MP4/MOV or WebM.' }
     }
-    return { ok: true, reason: 'ok', message: 'ok', plan: { width: targetWidth, height: targetHeight, fps } }
+    return { ok: true, reason: 'ok', message: 'ok', plan: { width: targetWidth, height: targetHeight, ...plan } }
   } catch (e) {
     return { ok: false, reason: 'probe-failed', message: String(e?.message || e) }
   }
@@ -159,12 +174,12 @@ async function optimizeVideo (file, { onProgress } = {}) {
   return { changed: true, file: newFile }
 }
 
-async function selectVideoEncoderConfig ({ width, height, fps }) {
-  const hevc = { codec: 'hvc1.1.4.L123.B0', width, height, framerate: fps, hardwareAcceleration: 'prefer-hardware', hevc: { format: 'hevc' } }
+async function selectVideoEncoderConfig ({ width, height, fps, bitrate = TARGET_VIDEO_BITRATE }) {
+  const hevc = { codec: 'hvc1.1.4.L123.B0', width, height, framerate: fps, bitrate, hardwareAcceleration: 'prefer-hardware', hevc: { format: 'hevc' } }
   const supH = await VideoEncoder.isConfigSupported(hevc).catch(() => ({ supported: false }))
   if (supH.supported) return { codecId: 'hevc', config: supH.config }
 
-  const avc = { codec: 'avc1.64002A', width, height, framerate: fps, hardwareAcceleration: 'prefer-hardware', avc: { format: 'avc' } }
+  const avc = { codec: 'avc1.64002A', width, height, framerate: fps, bitrate, hardwareAcceleration: 'prefer-hardware', avc: { format: 'avc' } }
   const supA = await VideoEncoder.isConfigSupported(avc)
   return { codecId: 'avc', config: supA.config }
 }
@@ -173,6 +188,12 @@ function shouldDecodeViaVideoElement () {
   return (navigator?.vendor || '').includes('Apple')
 }
 
+async function applyVideoEncoderBackpressure (encoder) {
+  while (encoder.encodeQueueSize > MAX_VIDEO_ENCODER_QUEUE_SIZE) {
+    await new Promise(resolve => setTimeout(resolve, 0))
+  }
+}
+
 async function waitForFrameReady (video, budgetMs) {
   if (typeof video.requestVideoFrameCallback !== 'function') return false
   return await new Promise((resolve) => {
@@ -237,6 +258,7 @@ async function encodeFramesViaVideoElement ({ file, durationCfr, step, frames, c
     const vf = new VideoFrame(canvas, { timestamp: Math.round(t * 1e6), duration: Math.round(step * 1e6) })
     ve.encode(vf, { keyFrame: i === 0 })
     vf.close()
+    await applyVideoEncoderBackpressure(ve)
 
     if (typeof onProgress === 'function') {
       try {
@@ -283,6 +305,7 @@ async function encodeFramesViaVideoSampleSink ({ file, durationCfr, step, frames
         const vf = new VideoFrame(canvas, { timestamp: Math.round(t * 1e6), duration: Math.round(step * 1e6) })
         ve.encode(vf, { keyFrame: i === 0 })
         vf.close()
+        await applyVideoEncoderBackpressure(ve)
 
         if (typeof onProgress === 'function') {
           try {
@@ -309,6 +332,7 @@ async function encodeFramesViaVideoSampleSink ({ file, durationCfr, step, frames
       const vf = new VideoFrame(canvas, { timestamp: Math.round(t * 1e6), duration: Math.round(step * 1e6) })
       ve.encode(vf, { keyFrame: i === 0 })
       vf.close()
+      await applyVideoEncoderBackpressure(ve)
 
       if (typeof onProgress === 'function') {
         try {
@@ -626,12 +650,13 @@ async function encodeVideo ({ file, srcMeta, plan, onProgress }) {
   const targetWidth = Math.max(2, Number(plan?.width) || Math.round(w * scale))
   const targetHeight = Math.max(2, Number(plan?.height) || Math.round(h * scale))
 
-  const targetFps = Math.max(1, Number(plan?.fps) || await determineTargetFps(file, { width: w, height: h }))
+  const fallbackPlan = plan || await determineEncodingPlan(file, { width: w, height: h })
+  const targetFps = Math.max(1, Number(fallbackPlan.fps))
   const step = 1 / Math.max(1, targetFps)
   const frames = Math.max(1, Math.floor(durationCfr / step))
 
   const output = new Output({ format: new Mp4OutputFormat({ fastStart: 'in-memory' }), target: new BufferTarget() })
-  const { codecId, config: usedCfg } = await selectVideoEncoderConfig({ width: targetWidth, height: targetHeight, fps: targetFps })
+  const { codecId, config: usedCfg } = await selectVideoEncoderConfig({ width: targetWidth, height: targetHeight, fps: targetFps, bitrate: fallbackPlan.bitrate })
   const videoTrack = new EncodedVideoPacketSource(codecId)
   output.addVideoTrack(videoTrack, { frameRate: targetFps })
 
@@ -684,7 +709,7 @@ async function encodeVideo ({ file, srcMeta, plan, onProgress }) {
     const { chunk } = pendingPackets[i]
     const data = new Uint8Array(chunk.byteLength); chunk.copyTo(data)
     const ts = i * step; const dur = step
-    const pkt = new EncodedPacket(data, chunk.type === 'key' ? 'key' : 'delta', ts, dur)
+    const pkt = new EncodedPacket(data, i === 0 || chunk.type === 'key' ? 'key' : 'delta', ts, dur)
     await videoTrack.add(pkt, { decoderConfig: { codec: usedCfg.codec, codedWidth: targetWidth, codedHeight: targetHeight, description: codecDesc } })
   }
 

data/lib/straight_to_video/version.rb

@@ -1,3 +1,3 @@
 module StraightToVideo
-  VERSION = "0.0.10"
+  VERSION = "0.0.12"
 end

data/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "straight-to-video",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "straight-to-video",
-      "version": "0.0.10",
+      "version": "0.0.12",
       "license": "MIT",
       "dependencies": {
         "mediabunny": "^1.27.3"

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "straight-to-video",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "description": "Browser-based, hardware-accelerated video upload optimization",
   "type": "module",
   "exports": {
@@ -26,7 +26,7 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/searlsco/straight-to-video.git"
+    "url": "git+https://github.com/searlsco/straight-to-video.git"
   },
   "license": "MIT",
   "files": [

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: straight_to_video
 version: !ruby/object:Gem::Version
-  version: 0.0.10
+  version: 0.0.12
 platform: ruby
 authors:
 - Justin Searls
@@ -77,7 +77,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 4.0.8
+rubygems_version: 3.6.9
 specification_version: 4
 summary: Browser-based, hardware-accelerated video upload optimization
 test_files: []