@remotion/media 4.0.378 → 4.0.380
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/audio/audio-for-preview.js +1 -1
- package/dist/audio/audio-preview-iterator.js +27 -4
- package/dist/audio/props.d.ts +1 -0
- package/dist/audio-extraction/extract-audio.d.ts +1 -1
- package/dist/audio-extraction/extract-audio.js +3 -0
- package/dist/audio-for-rendering.d.ts +3 -0
- package/dist/audio-for-rendering.js +94 -0
- package/dist/audio.d.ts +3 -0
- package/dist/audio.js +60 -0
- package/dist/audiodata-to-array.d.ts +0 -0
- package/dist/audiodata-to-array.js +1 -0
- package/dist/convert-audiodata/data-types.d.ts +1 -0
- package/dist/convert-audiodata/data-types.js +22 -0
- package/dist/convert-audiodata/is-planar-format.d.ts +1 -0
- package/dist/convert-audiodata/is-planar-format.js +3 -0
- package/dist/convert-audiodata/log-audiodata.d.ts +1 -0
- package/dist/convert-audiodata/log-audiodata.js +8 -0
- package/dist/convert-audiodata/trim-audiodata.d.ts +0 -0
- package/dist/convert-audiodata/trim-audiodata.js +1 -0
- package/dist/deserialized-audiodata.d.ts +15 -0
- package/dist/deserialized-audiodata.js +26 -0
- package/dist/esm/index.mjs +56 -8
- package/dist/extract-audio.d.ts +7 -0
- package/dist/extract-audio.js +98 -0
- package/dist/extract-frame-and-audio.js +9 -0
- package/dist/extract-frame-via-broadcast-channel.d.ts +15 -0
- package/dist/extract-frame-via-broadcast-channel.js +104 -0
- package/dist/extract-frame.d.ts +27 -0
- package/dist/extract-frame.js +21 -0
- package/dist/extrct-audio.d.ts +7 -0
- package/dist/extrct-audio.js +94 -0
- package/dist/get-frames-since-keyframe.d.ts +22 -0
- package/dist/get-frames-since-keyframe.js +41 -0
- package/dist/keyframe-bank.d.ts +25 -0
- package/dist/keyframe-bank.js +120 -0
- package/dist/keyframe-manager.d.ts +23 -0
- package/dist/keyframe-manager.js +170 -0
- package/dist/log.d.ts +10 -0
- package/dist/log.js +33 -0
- package/dist/new-video-for-rendering.d.ts +3 -0
- package/dist/new-video-for-rendering.js +108 -0
- package/dist/new-video.d.ts +3 -0
- package/dist/new-video.js +37 -0
- package/dist/props.d.ts +29 -0
- package/dist/props.js +1 -0
- package/dist/remember-actual-matroska-timestamps.d.ts +4 -0
- package/dist/remember-actual-matroska-timestamps.js +19 -0
- package/dist/serialize-videoframe.d.ts +0 -0
- package/dist/serialize-videoframe.js +1 -0
- package/dist/video/media-player.d.ts +62 -0
- package/dist/video/media-player.js +361 -0
- package/dist/video/new-video-for-preview.d.ts +10 -0
- package/dist/video/new-video-for-preview.js +108 -0
- package/dist/video/props.d.ts +1 -0
- package/dist/video/timeout-utils.d.ts +2 -0
- package/dist/video/timeout-utils.js +18 -0
- package/dist/video/video-for-rendering.js +1 -1
- package/dist/video-extraction/extract-frame.d.ts +2 -0
- package/dist/video-extraction/extract-frame.js +3 -0
- package/dist/video-extraction/get-frames-since-keyframe.d.ts +2 -2
- package/dist/video-extraction/get-frames-since-keyframe.js +13 -3
- package/dist/video-extraction/media-player.d.ts +64 -0
- package/dist/video-extraction/media-player.js +501 -0
- package/dist/video-extraction/new-video-for-preview.d.ts +10 -0
- package/dist/video-extraction/new-video-for-preview.js +114 -0
- package/dist/video-for-rendering.d.ts +3 -0
- package/dist/video-for-rendering.js +108 -0
- package/dist/video.d.ts +3 -0
- package/dist/video.js +37 -0
- package/package.json +3 -3
package/dist/log.d.ts
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export declare const logLevels: readonly ["trace", "verbose", "info", "warn", "error"];
|
|
2
|
+
export type LogLevel = (typeof logLevels)[number];
|
|
3
|
+
export declare const isEqualOrBelowLogLevel: (currentLevel: LogLevel, level: LogLevel) => boolean;
|
|
4
|
+
export declare const Log: {
|
|
5
|
+
trace: (logLevel: LogLevel, message?: any, ...optionalParams: any[]) => void;
|
|
6
|
+
verbose: (logLevel: LogLevel, message?: any, ...optionalParams: any[]) => void;
|
|
7
|
+
info: (logLevel: LogLevel, message?: any, ...optionalParams: any[]) => void;
|
|
8
|
+
warn: (logLevel: LogLevel, message?: any, ...optionalParams: any[]) => void;
|
|
9
|
+
error: (message?: any, ...optionalParams: any[]) => void;
|
|
10
|
+
};
|
package/dist/log.js
ADDED
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
/* eslint-disable no-console */
|
|
2
|
+
export const logLevels = ['trace', 'verbose', 'info', 'warn', 'error'];
|
|
3
|
+
const getNumberForLogLevel = (level) => {
|
|
4
|
+
return logLevels.indexOf(level);
|
|
5
|
+
};
|
|
6
|
+
export const isEqualOrBelowLogLevel = (currentLevel, level) => {
|
|
7
|
+
return getNumberForLogLevel(currentLevel) <= getNumberForLogLevel(level);
|
|
8
|
+
};
|
|
9
|
+
export const Log = {
|
|
10
|
+
trace: (logLevel, ...args) => {
|
|
11
|
+
if (isEqualOrBelowLogLevel(logLevel, 'trace')) {
|
|
12
|
+
return console.log(...args);
|
|
13
|
+
}
|
|
14
|
+
},
|
|
15
|
+
verbose: (logLevel, ...args) => {
|
|
16
|
+
if (isEqualOrBelowLogLevel(logLevel, 'verbose')) {
|
|
17
|
+
return console.log(...args);
|
|
18
|
+
}
|
|
19
|
+
},
|
|
20
|
+
info: (logLevel, ...args) => {
|
|
21
|
+
if (isEqualOrBelowLogLevel(logLevel, 'info')) {
|
|
22
|
+
return console.log(...args);
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
warn: (logLevel, ...args) => {
|
|
26
|
+
if (isEqualOrBelowLogLevel(logLevel, 'warn')) {
|
|
27
|
+
return console.warn(...args);
|
|
28
|
+
}
|
|
29
|
+
},
|
|
30
|
+
error: (...args) => {
|
|
31
|
+
return console.error(...args);
|
|
32
|
+
},
|
|
33
|
+
};
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useContext, useLayoutEffect, useMemo, useRef, useState, } from 'react';
|
|
3
|
+
import { cancelRender, Internals, useCurrentFrame, useDelayRender, useRemotionEnvironment, } from 'remotion';
|
|
4
|
+
import { extractFrameViaBroadcastChannel } from './extract-frame-via-broadcast-channel';
|
|
5
|
+
export const VideoForRendering = ({ volume: volumeProp, playbackRate, src, muted, loopVolumeCurveBehavior, delayRenderRetries, delayRenderTimeoutInMilliseconds,
|
|
6
|
+
// call when a frame of the video, i.e. frame drawn on canvas
|
|
7
|
+
onVideoFrame, logLevel = window.remotion_logLevel, }) => {
|
|
8
|
+
const absoluteFrame = Internals.useTimelinePosition();
|
|
9
|
+
const videoConfig = Internals.useUnsafeVideoConfig();
|
|
10
|
+
const canvasRef = useRef(null);
|
|
11
|
+
const { registerRenderAsset, unregisterRenderAsset } = useContext(Internals.RenderAssetManager);
|
|
12
|
+
const frame = useCurrentFrame();
|
|
13
|
+
const volumePropsFrame = Internals.useFrameForVolumeProp(loopVolumeCurveBehavior ?? 'repeat');
|
|
14
|
+
const environment = useRemotionEnvironment();
|
|
15
|
+
const [id] = useState(() => `${Math.random()}`.replace('0.', ''));
|
|
16
|
+
if (!videoConfig) {
|
|
17
|
+
throw new Error('No video config found');
|
|
18
|
+
}
|
|
19
|
+
if (!src) {
|
|
20
|
+
throw new TypeError('No `src` was passed to <Video>.');
|
|
21
|
+
}
|
|
22
|
+
const volume = Internals.evaluateVolume({
|
|
23
|
+
volume: volumeProp,
|
|
24
|
+
frame: volumePropsFrame,
|
|
25
|
+
mediaVolume: 1,
|
|
26
|
+
});
|
|
27
|
+
Internals.warnAboutTooHighVolume(volume);
|
|
28
|
+
const shouldRenderAudio = useMemo(() => {
|
|
29
|
+
if (!window.remotion_audioEnabled) {
|
|
30
|
+
return false;
|
|
31
|
+
}
|
|
32
|
+
if (muted) {
|
|
33
|
+
return false;
|
|
34
|
+
}
|
|
35
|
+
if (volume <= 0) {
|
|
36
|
+
return false;
|
|
37
|
+
}
|
|
38
|
+
return true;
|
|
39
|
+
}, [muted, volume]);
|
|
40
|
+
const { fps } = videoConfig;
|
|
41
|
+
const { delayRender, continueRender } = useDelayRender();
|
|
42
|
+
useLayoutEffect(() => {
|
|
43
|
+
if (!canvasRef.current) {
|
|
44
|
+
return;
|
|
45
|
+
}
|
|
46
|
+
const actualFps = playbackRate ? fps / playbackRate : fps;
|
|
47
|
+
const timestamp = frame / actualFps;
|
|
48
|
+
const durationInSeconds = 1 / actualFps;
|
|
49
|
+
const newHandle = delayRender(`Extracting frame number ${frame}`, {
|
|
50
|
+
retries: delayRenderRetries ?? undefined,
|
|
51
|
+
timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined,
|
|
52
|
+
});
|
|
53
|
+
extractFrameViaBroadcastChannel({
|
|
54
|
+
src,
|
|
55
|
+
timeInSeconds: timestamp,
|
|
56
|
+
durationInSeconds,
|
|
57
|
+
logLevel: logLevel ?? 'info',
|
|
58
|
+
shouldRenderAudio,
|
|
59
|
+
isClientSideRendering: environment.isClientSideRendering,
|
|
60
|
+
})
|
|
61
|
+
.then(({ frame: imageBitmap, audio }) => {
|
|
62
|
+
if (!imageBitmap) {
|
|
63
|
+
cancelRender(new Error('No video frame found'));
|
|
64
|
+
}
|
|
65
|
+
onVideoFrame?.(imageBitmap);
|
|
66
|
+
canvasRef.current?.getContext('2d')?.drawImage(imageBitmap, 0, 0);
|
|
67
|
+
imageBitmap.close();
|
|
68
|
+
if (audio) {
|
|
69
|
+
registerRenderAsset({
|
|
70
|
+
type: 'inline-audio',
|
|
71
|
+
id,
|
|
72
|
+
audio: Array.from(audio.data),
|
|
73
|
+
sampleRate: audio.sampleRate,
|
|
74
|
+
numberOfChannels: audio.numberOfChannels,
|
|
75
|
+
frame: absoluteFrame,
|
|
76
|
+
timestamp: audio.timestamp,
|
|
77
|
+
duration: (audio.numberOfFrames / audio.sampleRate) * 1000000,
|
|
78
|
+
});
|
|
79
|
+
}
|
|
80
|
+
continueRender(newHandle);
|
|
81
|
+
})
|
|
82
|
+
.catch((error) => {
|
|
83
|
+
cancelRender(error);
|
|
84
|
+
});
|
|
85
|
+
return () => {
|
|
86
|
+
continueRender(newHandle);
|
|
87
|
+
unregisterRenderAsset(id);
|
|
88
|
+
};
|
|
89
|
+
}, [
|
|
90
|
+
absoluteFrame,
|
|
91
|
+
continueRender,
|
|
92
|
+
delayRender,
|
|
93
|
+
delayRenderRetries,
|
|
94
|
+
delayRenderTimeoutInMilliseconds,
|
|
95
|
+
environment.isClientSideRendering,
|
|
96
|
+
fps,
|
|
97
|
+
frame,
|
|
98
|
+
id,
|
|
99
|
+
logLevel,
|
|
100
|
+
onVideoFrame,
|
|
101
|
+
playbackRate,
|
|
102
|
+
registerRenderAsset,
|
|
103
|
+
shouldRenderAudio,
|
|
104
|
+
src,
|
|
105
|
+
unregisterRenderAsset,
|
|
106
|
+
]);
|
|
107
|
+
return (_jsx("canvas", { ref: canvasRef, width: videoConfig.width, height: videoConfig.height }));
|
|
108
|
+
};
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useCallback } from 'react';
|
|
3
|
+
import { Internals, Sequence, useRemotionEnvironment } from 'remotion';
|
|
4
|
+
import { VideoForRendering } from './new-video-for-rendering';
|
|
5
|
+
const { validateMediaTrimProps, resolveTrimProps, validateMediaProps, VideoForPreview, } = Internals;
|
|
6
|
+
export const Video = (props) => {
|
|
7
|
+
// Should only destruct `startFrom` and `endAt` from props,
|
|
8
|
+
// rest gets drilled down
|
|
9
|
+
const { trimBefore, trimAfter, name, pauseWhenBuffering, stack, showInTimeline, ...otherProps } = props;
|
|
10
|
+
const environment = useRemotionEnvironment();
|
|
11
|
+
const onDuration = useCallback(() => undefined, []);
|
|
12
|
+
if (typeof props.src !== 'string') {
|
|
13
|
+
throw new TypeError(`The \`<Video>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
|
|
14
|
+
}
|
|
15
|
+
validateMediaTrimProps({
|
|
16
|
+
startFrom: undefined,
|
|
17
|
+
endAt: undefined,
|
|
18
|
+
trimBefore,
|
|
19
|
+
trimAfter,
|
|
20
|
+
});
|
|
21
|
+
const { trimBeforeValue, trimAfterValue } = resolveTrimProps({
|
|
22
|
+
startFrom: undefined,
|
|
23
|
+
endAt: undefined,
|
|
24
|
+
trimBefore,
|
|
25
|
+
trimAfter,
|
|
26
|
+
});
|
|
27
|
+
if (typeof trimBeforeValue !== 'undefined' ||
|
|
28
|
+
typeof trimAfterValue !== 'undefined') {
|
|
29
|
+
return (_jsx(Sequence, { layout: "none", from: 0 - (trimBeforeValue ?? 0), showInTimeline: false, durationInFrames: trimAfterValue, name: name, children: _jsx(Video, { pauseWhenBuffering: pauseWhenBuffering ?? false, ...otherProps }) }));
|
|
30
|
+
}
|
|
31
|
+
validateMediaProps(props, 'Video');
|
|
32
|
+
if (environment.isRendering) {
|
|
33
|
+
return _jsx(VideoForRendering, { ...otherProps });
|
|
34
|
+
}
|
|
35
|
+
const { onAutoPlayError, onVideoFrame, crossOrigin, delayRenderRetries, delayRenderTimeoutInMilliseconds, ...propsForPreview } = otherProps;
|
|
36
|
+
return (_jsx(VideoForPreview, { _remotionInternalStack: stack ?? null, _remotionInternalNativeLoopPassed: false, onDuration: onDuration, onlyWarnForMediaSeekingError: true, pauseWhenBuffering: pauseWhenBuffering ?? false, showInTimeline: showInTimeline ?? true, onAutoPlayError: onAutoPlayError ?? undefined, onVideoFrame: onVideoFrame ?? null, crossOrigin: crossOrigin, ...propsForPreview }));
|
|
37
|
+
};
|
package/dist/props.d.ts
ADDED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import type { LoopVolumeCurveBehavior, VolumeProp } from 'remotion';
|
|
2
|
+
import type { LogLevel } from './log';
|
|
3
|
+
export type AudioProps = {
|
|
4
|
+
src: string;
|
|
5
|
+
trimBefore?: number;
|
|
6
|
+
trimAfter?: number;
|
|
7
|
+
volume?: VolumeProp;
|
|
8
|
+
loopVolumeCurveBehavior?: LoopVolumeCurveBehavior;
|
|
9
|
+
name?: string;
|
|
10
|
+
pauseWhenBuffering?: boolean;
|
|
11
|
+
showInTimeline?: boolean;
|
|
12
|
+
onAutoPlayError?: null | (() => void);
|
|
13
|
+
playbackRate?: number;
|
|
14
|
+
muted?: boolean;
|
|
15
|
+
delayRenderRetries?: number;
|
|
16
|
+
delayRenderTimeoutInMilliseconds?: number;
|
|
17
|
+
crossOrigin?: '' | 'anonymous' | 'use-credentials';
|
|
18
|
+
style?: React.CSSProperties;
|
|
19
|
+
onError?: (err: Error) => void;
|
|
20
|
+
useWebAudioApi?: boolean;
|
|
21
|
+
acceptableTimeShiftInSeconds?: number;
|
|
22
|
+
/**
|
|
23
|
+
* @deprecated For internal use only
|
|
24
|
+
*/
|
|
25
|
+
stack?: string;
|
|
26
|
+
logLevel?: LogLevel;
|
|
27
|
+
loop?: boolean;
|
|
28
|
+
_remotionInternalNativeLoopPassed?: boolean;
|
|
29
|
+
};
|
package/dist/props.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
export const rememberActualMatroskaTimestamps = (isMatroska) => {
|
|
2
|
+
const observations = [];
|
|
3
|
+
const observeTimestamp = (startTime) => {
|
|
4
|
+
if (!isMatroska) {
|
|
5
|
+
return;
|
|
6
|
+
}
|
|
7
|
+
observations.push(startTime);
|
|
8
|
+
};
|
|
9
|
+
const getRealTimestamp = (observedTimestamp) => {
|
|
10
|
+
if (!isMatroska) {
|
|
11
|
+
return observedTimestamp;
|
|
12
|
+
}
|
|
13
|
+
return (observations.find((observation) => Math.abs(observedTimestamp - observation) < 0.001) ?? null);
|
|
14
|
+
};
|
|
15
|
+
return {
|
|
16
|
+
observeTimestamp,
|
|
17
|
+
getRealTimestamp,
|
|
18
|
+
};
|
|
19
|
+
};
|
|
File without changes
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import type { LogLevel } from 'remotion';
|
|
2
|
+
export declare const SEEK_THRESHOLD = 0.05;
|
|
3
|
+
export declare class MediaPlayer {
|
|
4
|
+
private canvas;
|
|
5
|
+
private context;
|
|
6
|
+
private src;
|
|
7
|
+
private logLevel;
|
|
8
|
+
private canvasSink;
|
|
9
|
+
private videoFrameIterator;
|
|
10
|
+
private nextFrame;
|
|
11
|
+
private audioSink;
|
|
12
|
+
private audioBufferIterator;
|
|
13
|
+
private queuedAudioNodes;
|
|
14
|
+
private gainNode;
|
|
15
|
+
private sharedAudioContext;
|
|
16
|
+
private audioSyncAnchor;
|
|
17
|
+
private playing;
|
|
18
|
+
private animationFrameId;
|
|
19
|
+
private videoAsyncId;
|
|
20
|
+
private initialized;
|
|
21
|
+
private totalDuration;
|
|
22
|
+
private isBuffering;
|
|
23
|
+
private onBufferingChangeCallback?;
|
|
24
|
+
private audioBufferHealth;
|
|
25
|
+
private audioIteratorStarted;
|
|
26
|
+
private readonly HEALTHY_BUFER_THRESHOLD_SECONDS;
|
|
27
|
+
constructor({ canvas, src, logLevel, sharedAudioContext, }: {
|
|
28
|
+
canvas: HTMLCanvasElement;
|
|
29
|
+
src: string;
|
|
30
|
+
logLevel: LogLevel;
|
|
31
|
+
sharedAudioContext: AudioContext;
|
|
32
|
+
});
|
|
33
|
+
private input;
|
|
34
|
+
private isReady;
|
|
35
|
+
private hasAudio;
|
|
36
|
+
private isCurrentlyBuffering;
|
|
37
|
+
initialize(startTime?: number): Promise<void>;
|
|
38
|
+
private cleanupAudioQueue;
|
|
39
|
+
private cleanAudioIteratorAndNodes;
|
|
40
|
+
seekTo(time: number): Promise<void>;
|
|
41
|
+
play(): Promise<void>;
|
|
42
|
+
pause(): void;
|
|
43
|
+
dispose(): void;
|
|
44
|
+
private getPlaybackTime;
|
|
45
|
+
private scheduleAudioChunk;
|
|
46
|
+
onBufferingChange(callback: (isBuffering: boolean) => void): void;
|
|
47
|
+
private canRenderVideo;
|
|
48
|
+
private startRenderLoop;
|
|
49
|
+
private stopRenderLoop;
|
|
50
|
+
private render;
|
|
51
|
+
private shouldRenderFrame;
|
|
52
|
+
private drawCurrentFrame;
|
|
53
|
+
private startAudioIterator;
|
|
54
|
+
private startVideoIterator;
|
|
55
|
+
private updateNextFrame;
|
|
56
|
+
private bufferingStartedAtMs;
|
|
57
|
+
private minBufferingTimeoutMs;
|
|
58
|
+
private setBufferingState;
|
|
59
|
+
private maybeResumeFromBuffering;
|
|
60
|
+
private maybeForceResumeFromBuffering;
|
|
61
|
+
private runAudioIterator;
|
|
62
|
+
}
|