@remotion/web-renderer 4.0.424 → 4.0.425

package/dist/drawing/text/handle-text-node.js

@@ -0,0 +1,24 @@
+import { processNode } from '../process-node';
+import { drawText } from './draw-text';
+export const handleTextNode = async ({ node, context, logLevel, parentRect, internalState, rootElement, onlyBackgroundClip, }) => {
+    const span = document.createElement('span');
+    const parent = node.parentNode;
+    if (!parent) {
+        throw new Error('Text node has no parent');
+    }
+    parent.insertBefore(span, node);
+    span.appendChild(node);
+    const value = await processNode({
+        context,
+        element: span,
+        draw: drawText({ span, logLevel, onlyBackgroundClip }),
+        logLevel,
+        parentRect,
+        internalState,
+        rootElement,
+    });
+    // Undo the layout manipulation
+    parent.insertBefore(node, span);
+    parent.removeChild(span);
+    return value;
+};

package/dist/drawing/transform-in-3d.js

@@ -0,0 +1,177 @@
+// Vertex shader - now includes texture coordinates
+const vsSource = `
+		attribute vec2 aPosition;
+		attribute vec2 aTexCoord;
+		uniform mat4 uTransform;
+		uniform mat4 uProjection;
+		varying vec2 vTexCoord;
+
+		void main() {
+				gl_Position = uProjection * uTransform * vec4(aPosition, 0.0, 1.0);
+				vTexCoord = aTexCoord;
+		}
+`;
+// Fragment shader - samples from texture and unpremultiplies alpha
+const fsSource = `
+		precision mediump float;
+		uniform sampler2D uTexture;
+		varying vec2 vTexCoord;
+
+		void main() {
+				gl_FragColor = texture2D(uTexture, vTexCoord);
+		}
+`;
+function compileShader(shaderGl, source, type) {
+    const shader = shaderGl.createShader(type);
+    if (!shader) {
+        throw new Error('Could not create shader');
+    }
+    shaderGl.shaderSource(shader, source);
+    shaderGl.compileShader(shader);
+    if (!shaderGl.getShaderParameter(shader, shaderGl.COMPILE_STATUS)) {
+        const log = shaderGl.getShaderInfoLog(shader);
+        shaderGl.deleteShader(shader);
+        throw new Error('Shader compile error: ' + log);
+    }
+    return shader;
+}
+const createHelperCanvas = ({ canvasWidth, canvasHeight, helperCanvasState, }) => {
+    var _a;
+    if (helperCanvasState.current) {
+        // Resize canvas if dimensions changed
+        if (helperCanvasState.current.canvas.width !== canvasWidth ||
+            helperCanvasState.current.canvas.height !== canvasHeight) {
+            helperCanvasState.current.canvas.width = canvasWidth;
+            helperCanvasState.current.canvas.height = canvasHeight;
+        }
+        // Always reset viewport and clear when reusing
+        helperCanvasState.current.gl.viewport(0, 0, canvasWidth, canvasHeight);
+        helperCanvasState.current.gl.clearColor(0, 0, 0, 0);
+        helperCanvasState.current.gl.clear(helperCanvasState.current.gl.COLOR_BUFFER_BIT);
+        return helperCanvasState.current;
+    }
+    const canvas = new OffscreenCanvas(canvasWidth, canvasHeight);
+    const gl = (_a = canvas.getContext('webgl', {
+        premultipliedAlpha: true,
+    })) !== null && _a !== void 0 ? _a : undefined;
+    if (!gl) {
+        throw new Error('WebGL not supported');
+    }
+    // Compile shaders and create program once
+    const vertexShader = compileShader(gl, vsSource, gl.VERTEX_SHADER);
+    const fragmentShader = compileShader(gl, fsSource, gl.FRAGMENT_SHADER);
+    const program = gl.createProgram();
+    if (!program) {
+        throw new Error('Could not create program');
+    }
+    gl.attachShader(program, vertexShader);
+    gl.attachShader(program, fragmentShader);
+    gl.linkProgram(program);
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+        throw new Error('Program link error: ' + gl.getProgramInfoLog(program));
+    }
+    // Get attribute and uniform locations once
+    const locations = {
+        aPosition: gl.getAttribLocation(program, 'aPosition'),
+        aTexCoord: gl.getAttribLocation(program, 'aTexCoord'),
+        uTransform: gl.getUniformLocation(program, 'uTransform'),
+        uProjection: gl.getUniformLocation(program, 'uProjection'),
+        uTexture: gl.getUniformLocation(program, 'uTexture'),
+    };
+    // Shaders can be deleted after linking
+    gl.deleteShader(vertexShader);
+    gl.deleteShader(fragmentShader);
+    const cleanup = () => {
+        gl.deleteProgram(program);
+        const loseContext = gl.getExtension('WEBGL_lose_context');
+        if (loseContext) {
+            loseContext.loseContext();
+        }
+    };
+    helperCanvasState.current = { canvas, gl, program, locations, cleanup };
+    return helperCanvasState.current;
+};
+export const transformIn3d = ({ matrix, sourceCanvas, untransformedRect, rectAfterTransforms, internalState, }) => {
+    const { canvas, gl, program, locations } = createHelperCanvas({
+        canvasWidth: rectAfterTransforms.width,
+        canvasHeight: rectAfterTransforms.height,
+        helperCanvasState: internalState.helperCanvasState,
+    });
+    // Use the cached program
+    gl.useProgram(program);
+    // Setup viewport and clear (already done in createHelperCanvas, but ensure it's set)
+    gl.viewport(0, 0, rectAfterTransforms.width, rectAfterTransforms.height);
+    gl.clearColor(0, 0, 0, 0);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+    // Enable blending
+    gl.enable(gl.BLEND);
+    gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
+    // Create vertex buffer
+    const vertexBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
+    // prettier-ignore
+    const vertices = new Float32Array([
+        untransformedRect.x, untransformedRect.y, 0, 0,
+        untransformedRect.x + untransformedRect.width, untransformedRect.y, 1, 0,
+        untransformedRect.x, untransformedRect.y + untransformedRect.height, 0, 1,
+        untransformedRect.x, untransformedRect.y + untransformedRect.height, 0, 1,
+        untransformedRect.x + untransformedRect.width, untransformedRect.y, 1, 0,
+        untransformedRect.x + untransformedRect.width, untransformedRect.y + untransformedRect.height, 1, 1,
+    ]);
+    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
+    // Setup attributes using cached locations
+    gl.enableVertexAttribArray(locations.aPosition);
+    gl.vertexAttribPointer(locations.aPosition, 2, gl.FLOAT, false, 4 * 4, 0);
+    gl.enableVertexAttribArray(locations.aTexCoord);
+    gl.vertexAttribPointer(locations.aTexCoord, 2, gl.FLOAT, false, 4 * 4, 2 * 4);
+    // Create and configure texture
+    const texture = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, sourceCanvas);
+    // Set uniforms using cached locations
+    const transformMatrix = matrix.toFloat32Array();
+    const zScale = 1000000000;
+    // Projection matrix accounts for the output canvas dimensions
+    const projectionMatrix = new Float32Array([
+        2 / rectAfterTransforms.width,
+        0,
+        0,
+        0,
+        0,
+        -2 / rectAfterTransforms.height,
+        0,
+        0,
+        0,
+        0,
+        -2 / zScale,
+        0,
+        -1 + (2 * -rectAfterTransforms.x) / rectAfterTransforms.width,
+        1 - (2 * -rectAfterTransforms.y) / rectAfterTransforms.height,
+        0,
+        1,
+    ]);
+    gl.uniformMatrix4fv(locations.uTransform, false, transformMatrix);
+    gl.uniformMatrix4fv(locations.uProjection, false, projectionMatrix);
+    gl.uniform1i(locations.uTexture, 0);
+    // Draw
+    gl.drawArrays(gl.TRIANGLES, 0, 6);
+    // Clean up per-frame resources only
+    gl.disableVertexAttribArray(locations.aPosition);
+    gl.disableVertexAttribArray(locations.aTexCoord);
+    gl.deleteTexture(texture);
+    gl.deleteBuffer(vertexBuffer);
+    gl.bindTexture(gl.TEXTURE_2D, null);
+    gl.bindBuffer(gl.ARRAY_BUFFER, null);
+    // Reset state
+    gl.disable(gl.BLEND);
+    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
+    return {
+        canvas,
+        rect: rectAfterTransforms,
+    };
+};

package/dist/drawing/transform-rect-with-matrix.js

@@ -0,0 +1,19 @@
+export function transformDOMRect({ rect, matrix, }) {
+    // Get all four corners of the rectangle
+    const topLeft = new DOMPointReadOnly(rect.left, rect.top);
+    const topRight = new DOMPointReadOnly(rect.right, rect.top);
+    const bottomLeft = new DOMPointReadOnly(rect.left, rect.bottom);
+    const bottomRight = new DOMPointReadOnly(rect.right, rect.bottom);
+    // Transform all corners
+    const transformedTopLeft = topLeft.matrixTransform(matrix);
+    const transformedTopRight = topRight.matrixTransform(matrix);
+    const transformedBottomLeft = bottomLeft.matrixTransform(matrix);
+    const transformedBottomRight = bottomRight.matrixTransform(matrix);
+    // Find the bounding box of the transformed points
+    const minX = Math.min(transformedTopLeft.x / transformedTopLeft.w, transformedTopRight.x / transformedTopRight.w, transformedBottomLeft.x / transformedBottomLeft.w, transformedBottomRight.x / transformedBottomRight.w);
+    const maxX = Math.max(transformedTopLeft.x / transformedTopLeft.w, transformedTopRight.x / transformedTopRight.w, transformedBottomLeft.x / transformedBottomLeft.w, transformedBottomRight.x / transformedBottomRight.w);
+    const minY = Math.min(transformedTopLeft.y / transformedTopLeft.w, transformedTopRight.y / transformedTopRight.w, transformedBottomLeft.y / transformedBottomLeft.w, transformedBottomRight.y / transformedBottomRight.w);
+    const maxY = Math.max(transformedTopLeft.y / transformedTopLeft.w, transformedTopRight.y / transformedTopRight.w, transformedBottomLeft.y / transformedBottomLeft.w, transformedBottomRight.y / transformedBottomRight.w);
+    // Create a new DOMRect from the bounding box
+    return new DOMRect(minX, minY, maxX - minX, maxY - minY);
+}

package/dist/drawing/transform.js

@@ -0,0 +1,10 @@
+export const setTransform = ({ ctx, transform, parentRect, }) => {
+    const offsetMatrix = new DOMMatrix()
+        .translate(-parentRect.x, -parentRect.y)
+        .multiply(transform)
+        .translate(parentRect.x, parentRect.y);
+    ctx.setTransform(offsetMatrix);
+    return () => {
+        ctx.setTransform(new DOMMatrix());
+    };
+};

package/dist/drawing/turn-svg-into-drawable.js

@@ -0,0 +1,41 @@
+export const turnSvgIntoDrawable = (svg) => {
+    const { fill, color } = getComputedStyle(svg);
+    const originalTransform = svg.style.transform;
+    const originalTransformOrigin = svg.style.transformOrigin;
+    const originalMarginLeft = svg.style.marginLeft;
+    const originalMarginRight = svg.style.marginRight;
+    const originalMarginTop = svg.style.marginTop;
+    const originalMarginBottom = svg.style.marginBottom;
+    const originalFill = svg.style.fill;
+    const originalColor = svg.style.color;
+    svg.style.transform = 'none';
+    svg.style.transformOrigin = '';
+    // Margins were already included in the positioning calculation,
+    // so we need to remove them to avoid double counting.
+    svg.style.marginLeft = '0';
+    svg.style.marginRight = '0';
+    svg.style.marginTop = '0';
+    svg.style.marginBottom = '0';
+    svg.style.fill = fill;
+    svg.style.color = color;
+    const svgData = new XMLSerializer().serializeToString(svg);
+    svg.style.marginLeft = originalMarginLeft;
+    svg.style.marginRight = originalMarginRight;
+    svg.style.marginTop = originalMarginTop;
+    svg.style.marginBottom = originalMarginBottom;
+    svg.style.transform = originalTransform;
+    svg.style.transformOrigin = originalTransformOrigin;
+    svg.style.fill = originalFill;
+    svg.style.color = originalColor;
+    return new Promise((resolve, reject) => {
+        const image = new Image();
+        const url = `data:image/svg+xml;base64,${btoa(svgData)}`;
+        image.onload = function () {
+            resolve(image);
+        };
+        image.onerror = () => {
+            reject(new Error('Failed to convert SVG to image'));
+        };
+        image.src = url;
+    });
+};

package/dist/frame-range.js

@@ -0,0 +1,15 @@
+export const getRealFrameRange = (durationInFrames, frameRange) => {
+    if (frameRange === null) {
+        return [0, durationInFrames - 1];
+    }
+    if (typeof frameRange === 'number') {
+        if (frameRange < 0 || frameRange >= durationInFrames) {
+            throw new Error(`Frame number is out of range, must be between 0 and ${durationInFrames - 1} but got ${frameRange}`);
+        }
+        return [frameRange, frameRange];
+    }
+    if (frameRange[1] >= durationInFrames || frameRange[0] < 0) {
+        throw new Error(`The "durationInFrames" of the composition was evaluated to be ${durationInFrames}, but frame range ${frameRange.join('-')} is not inbetween 0-${durationInFrames - 1}`);
+    }
+    return frameRange;
+};

package/dist/get-audio-encoding-config.js

@@ -0,0 +1,18 @@
+import { canEncodeAudio, QUALITY_MEDIUM, } from 'mediabunny';
+export const getDefaultAudioEncodingConfig = async () => {
+    const preferredDefaultAudioEncodingConfig = {
+        codec: 'aac',
+        bitrate: QUALITY_MEDIUM,
+    };
+    if (await canEncodeAudio(preferredDefaultAudioEncodingConfig.codec, preferredDefaultAudioEncodingConfig)) {
+        return preferredDefaultAudioEncodingConfig;
+    }
+    const backupDefaultAudioEncodingConfig = {
+        codec: 'opus',
+        bitrate: QUALITY_MEDIUM,
+    };
+    if (await canEncodeAudio(backupDefaultAudioEncodingConfig.codec, backupDefaultAudioEncodingConfig)) {
+        return backupDefaultAudioEncodingConfig;
+    }
+    return null;
+};

package/dist/get-biggest-bounding-client-rect.js

@@ -0,0 +1,43 @@
+import { parseBoxShadow } from './drawing/draw-box-shadow';
+import { parseOutlineOffset, parseOutlineWidth } from './drawing/draw-outline';
+import { skipToNextNonDescendant } from './walk-tree';
+export const getBiggestBoundingClientRect = (element) => {
+    const treeWalker = document.createTreeWalker(element, NodeFilter.SHOW_ELEMENT);
+    let mostLeft = Infinity;
+    let mostTop = Infinity;
+    let mostRight = -Infinity;
+    let mostBottom = -Infinity;
+    while (true) {
+        const computedStyle = getComputedStyle(treeWalker.currentNode);
+        const outlineWidth = parseOutlineWidth(computedStyle.outlineWidth);
+        const outlineOffset = parseOutlineOffset(computedStyle.outlineOffset);
+        const rect = treeWalker.currentNode.getBoundingClientRect();
+        // Calculate box shadow extensions
+        const shadows = parseBoxShadow(computedStyle.boxShadow);
+        let shadowLeft = 0;
+        let shadowRight = 0;
+        let shadowTop = 0;
+        let shadowBottom = 0;
+        for (const shadow of shadows) {
+            if (!shadow.inset) {
+                shadowLeft = Math.max(shadowLeft, Math.abs(Math.min(shadow.offsetX, 0)) + shadow.blurRadius);
+                shadowRight = Math.max(shadowRight, Math.max(shadow.offsetX, 0) + shadow.blurRadius);
+                shadowTop = Math.max(shadowTop, Math.abs(Math.min(shadow.offsetY, 0)) + shadow.blurRadius);
+                shadowBottom = Math.max(shadowBottom, Math.max(shadow.offsetY, 0) + shadow.blurRadius);
+            }
+        }
+        mostLeft = Math.min(mostLeft, rect.left - outlineOffset - outlineWidth - shadowLeft);
+        mostTop = Math.min(mostTop, rect.top - outlineOffset - outlineWidth - shadowTop);
+        mostRight = Math.max(mostRight, rect.right + outlineOffset + outlineWidth + shadowRight);
+        mostBottom = Math.max(mostBottom, rect.bottom + outlineOffset + outlineWidth + shadowBottom);
+        if (computedStyle.overflow === 'hidden') {
+            if (!skipToNextNonDescendant(treeWalker)) {
+                break;
+            }
+        }
+        if (!treeWalker.nextNode()) {
+            break;
+        }
+    }
+    return new DOMRect(mostLeft, mostTop, mostRight - mostLeft, mostBottom - mostTop);
+};

package/dist/index.js

@@ -0,0 +1,2 @@
+export { renderMediaOnWeb } from './render-media-on-web';
+export { renderStillOnWeb } from './render-still-on-web';

package/dist/internal-state.js

@@ -0,0 +1,36 @@
+export const makeInternalState = () => {
+    let drawnPrecomposedPixels = 0;
+    let precomposedTextures = 0;
+    let waitForReadyTime = 0;
+    let addSampleTime = 0;
+    let createFrameTime = 0;
+    const helperCanvasState = {
+        current: null,
+    };
+    return {
+        getDrawn3dPixels: () => drawnPrecomposedPixels,
+        getPrecomposedTiles: () => precomposedTextures,
+        addPrecompose: ({ canvasWidth, canvasHeight, }) => {
+            drawnPrecomposedPixels += canvasWidth * canvasHeight;
+            precomposedTextures++;
+        },
+        helperCanvasState,
+        cleanup: () => {
+            if (helperCanvasState.current) {
+                helperCanvasState.current.cleanup();
+            }
+        },
+        getWaitForReadyTime: () => waitForReadyTime,
+        addWaitForReadyTime: (time) => {
+            waitForReadyTime += time;
+        },
+        getAddSampleTime: () => addSampleTime,
+        addAddSampleTime: (time) => {
+            addSampleTime += time;
+        },
+        getCreateFrameTime: () => createFrameTime,
+        addCreateFrameTime: (time) => {
+            createFrameTime += time;
+        },
+    };
+};

package/dist/mediabunny-mappings.js

@@ -0,0 +1,63 @@
+import { Mp4OutputFormat, QUALITY_HIGH, QUALITY_LOW, QUALITY_MEDIUM, QUALITY_VERY_HIGH, QUALITY_VERY_LOW, WebMOutputFormat, } from 'mediabunny';
+export const codecToMediabunnyCodec = (codec) => {
+    switch (codec) {
+        case 'h264':
+            return 'avc';
+        case 'h265':
+            return 'hevc';
+        case 'vp8':
+            return 'vp8';
+        case 'vp9':
+            return 'vp9';
+        case 'av1':
+            return 'av1';
+        default:
+            throw new Error(`Unsupported codec: ${codec}`);
+    }
+};
+export const containerToMediabunnyContainer = (container) => {
+    switch (container) {
+        case 'mp4':
+            return new Mp4OutputFormat();
+        case 'webm':
+            return new WebMOutputFormat();
+        default:
+            throw new Error(`Unsupported container: ${container}`);
+    }
+};
+export const getDefaultVideoCodecForContainer = (container) => {
+    switch (container) {
+        case 'mp4':
+            return 'h264';
+        case 'webm':
+            return 'vp8';
+        default:
+            throw new Error(`Unsupported container: ${container}`);
+    }
+};
+export const getQualityForWebRendererQuality = (quality) => {
+    switch (quality) {
+        case 'very-low':
+            return QUALITY_VERY_LOW;
+        case 'low':
+            return QUALITY_LOW;
+        case 'medium':
+            return QUALITY_MEDIUM;
+        case 'high':
+            return QUALITY_HIGH;
+        case 'very-high':
+            return QUALITY_VERY_HIGH;
+        default:
+            throw new Error(`Unsupported quality: ${quality}`);
+    }
+};
+export const getMimeType = (container) => {
+    switch (container) {
+        case 'mp4':
+            return 'video/mp4';
+        case 'webm':
+            return 'video/webm';
+        default:
+            throw new Error(`Unsupported container: ${container}`);
+    }
+};

package/dist/output-target.js

@@ -0,0 +1 @@
+export {};

package/dist/props-if-has-props.js

@@ -0,0 +1 @@
+export {};