straight_to_video 0.0.11 → 0.0.12

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4783067cfef03451a12e35404133f518b5e73fedd306c99e47d02791022300b1
-  data.tar.gz: 8cabcf1177d87439fd41ac63be9dc88fddecca8123f7efc70c5a849061096340
+  metadata.gz: c562c9b7243f141e7524a58e115bd257d5207bd7272bf01547812e9845235e75
+  data.tar.gz: bbe4b5f3e82e6d84fb928c9165d5c8935416ed6c04034c55db44c740db949785
 SHA512:
-  metadata.gz: 26e1e12b9fb1cfcfcece442b49fcde59b5e19b429f70914286b59bc9efa8423761f98fccd0992807bdecbf5b50f97584e6e83ccaefd88a761d5cef2c52e8e4a8
-  data.tar.gz: 1980a0f482a87965ef98d3287fc2ccdfe51edd3d9127d3f0903c5d0a0336bc9b19d81785a012fb8dfddcf10b444d462af666f28d02c8e11eacafb8b4484da1d9
+  metadata.gz: 368159b6977e3d37b116a55a35cca1d849029657ae86b01aa8113f9385288dab86f140d98a5bbb4d9639464e7e2ef8c362e204b52c45e5e2c36927e9aaa4db93
+  data.tar.gz: 8acd9f7af6b1293e7b2a6bd4626e6dc0897a09811684bcf8a7e27260dd48071306c1aba8b61c6b8d9a76f1aac0f5552eb8edd43f0e7e9cc9259e800531a3803d

data/CHANGELOG.md

@@ -1,5 +1,10 @@
 # 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.

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

@@ -1,4 +1,4 @@
-// straight-to-video@0.0.11 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 -----
@@ -14,6 +14,7 @@ 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) {
@@ -34,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 -----
@@ -125,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
@@ -142,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) }
   }
@@ -161,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, bitrate: TARGET_VIDEO_BITRATE, 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, bitrate: TARGET_VIDEO_BITRATE, 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 }
 }
@@ -175,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) => {
@@ -239,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 {
@@ -285,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 {
@@ -311,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 {
@@ -628,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 })
 

data/index.js

@@ -13,6 +13,7 @@ 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 +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 -----
@@ -124,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
@@ -141,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) }
   }
@@ -160,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, bitrate: TARGET_VIDEO_BITRATE, 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, bitrate: TARGET_VIDEO_BITRATE, 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 +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) => {
@@ -238,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 {
@@ -284,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 {
@@ -310,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 {
@@ -627,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 })
 

data/lib/straight_to_video/version.rb

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

data/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "straight-to-video",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "straight-to-video",
-      "version": "0.0.11",
+      "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.11",
+  "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.11
+  version: 0.0.12
 platform: ruby
 authors:
 - Justin Searls