@remotion/media 4.0.357 → 4.0.361
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 +29 -13
- package/dist/audio/audio-for-rendering.js +8 -6
- package/dist/audio-extraction/extract-audio.js +1 -0
- package/dist/browser-can-use-webgl2.d.ts +1 -0
- package/dist/browser-can-use-webgl2.js +13 -0
- package/dist/caches.d.ts +1 -1
- package/dist/caches.js +3 -3
- package/dist/esm/index.mjs +568 -327
- package/dist/extract-frame-and-audio.js +6 -0
- package/dist/get-time-in-seconds.d.ts +2 -1
- package/dist/get-time-in-seconds.js +10 -10
- package/dist/show-in-timeline.d.ts +8 -0
- package/dist/show-in-timeline.js +31 -0
- package/dist/use-media-in-timeline.d.ts +19 -0
- package/dist/use-media-in-timeline.js +103 -0
- package/dist/video/media-player.d.ts +11 -5
- package/dist/video/media-player.js +74 -36
- package/dist/video/video-for-preview.d.ts +9 -9
- package/dist/video/video-for-preview.js +43 -20
- package/dist/video/video-for-rendering.js +21 -5
- package/dist/video-extraction/extract-frame-via-broadcast-channel.d.ts +3 -0
- package/dist/video-extraction/extract-frame-via-broadcast-channel.js +17 -0
- package/dist/video-extraction/extract-frame.d.ts +3 -0
- package/dist/video-extraction/extract-frame.js +7 -0
- package/dist/video-extraction/keyframe-manager.d.ts +1 -1
- package/dist/video-extraction/keyframe-manager.js +5 -0
- package/package.json +54 -54
- package/LICENSE.md +0 -49
- package/dist/convert-audiodata/apply-tonefrequency.d.ts +0 -2
- package/dist/convert-audiodata/apply-tonefrequency.js +0 -43
- package/dist/convert-audiodata/wsola.d.ts +0 -13
- package/dist/convert-audiodata/wsola.js +0 -197
- package/dist/get-sink-weak.d.ts +0 -13
- package/dist/get-sink-weak.js +0 -15
- package/dist/log.d.ts +0 -10
- package/dist/log.js +0 -33
- package/dist/video/resolve-playback-time.d.ts +0 -8
- package/dist/video/resolve-playback-time.js +0 -22
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { useContext, useEffect, useMemo, useRef, useState } from 'react';
|
|
3
|
-
import { Internals, useBufferState, useCurrentFrame
|
|
3
|
+
import { Html5Video, Internals, useBufferState, useCurrentFrame } from 'remotion';
|
|
4
|
+
import { useLoopDisplay } from '../show-in-timeline';
|
|
5
|
+
import { useMediaInTimeline } from '../use-media-in-timeline';
|
|
4
6
|
import { MediaPlayer } from './media-player';
|
|
5
|
-
const { useUnsafeVideoConfig, Timeline, SharedAudioContext, useMediaMutedState, useMediaVolumeState, useFrameForVolumeProp, evaluateVolume, warnAboutTooHighVolume, usePreload,
|
|
6
|
-
const
|
|
7
|
+
const { useUnsafeVideoConfig, Timeline, SharedAudioContext, useMediaMutedState, useMediaVolumeState, useFrameForVolumeProp, evaluateVolume, warnAboutTooHighVolume, usePreload, SequenceContext, SequenceVisibilityToggleContext, } = Internals;
|
|
8
|
+
export const VideoForPreview = ({ src: unpreloadedSrc, style, playbackRate, logLevel, className, muted, volume, loopVolumeCurveBehavior, onVideoFrame, showInTimeline, loop, name, trimAfter, trimBefore, stack, disallowFallbackToOffthreadVideo, fallbackOffthreadVideoProps, audioStreamIndex, }) => {
|
|
9
|
+
const src = usePreload(unpreloadedSrc);
|
|
7
10
|
const canvasRef = useRef(null);
|
|
8
11
|
const videoConfig = useUnsafeVideoConfig();
|
|
9
12
|
const frame = useCurrentFrame();
|
|
@@ -17,6 +20,8 @@ const NewVideoForPreview = ({ src, style, playbackRate, logLevel, className, mut
|
|
|
17
20
|
const buffer = useBufferState();
|
|
18
21
|
const [mediaMuted] = useMediaMutedState();
|
|
19
22
|
const [mediaVolume] = useMediaVolumeState();
|
|
23
|
+
const [mediaDurationInSeconds, setMediaDurationInSeconds] = useState(null);
|
|
24
|
+
const { hidden } = useContext(SequenceVisibilityToggleContext);
|
|
20
25
|
const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior);
|
|
21
26
|
const userPreferredVolume = evaluateVolume({
|
|
22
27
|
frame: volumePropFrame,
|
|
@@ -24,21 +29,30 @@ const NewVideoForPreview = ({ src, style, playbackRate, logLevel, className, mut
|
|
|
24
29
|
mediaVolume,
|
|
25
30
|
});
|
|
26
31
|
warnAboutTooHighVolume(userPreferredVolume);
|
|
27
|
-
const [timelineId] = useState(() => String(Math.random()));
|
|
28
32
|
const parentSequence = useContext(SequenceContext);
|
|
29
|
-
|
|
33
|
+
const loopDisplay = useLoopDisplay({
|
|
34
|
+
loop,
|
|
35
|
+
mediaDurationInSeconds,
|
|
36
|
+
playbackRate,
|
|
37
|
+
trimAfter,
|
|
38
|
+
trimBefore,
|
|
39
|
+
});
|
|
40
|
+
const { id: timelineId } = useMediaInTimeline({
|
|
30
41
|
volume,
|
|
31
|
-
mediaVolume,
|
|
32
42
|
mediaType: 'video',
|
|
33
43
|
src,
|
|
34
44
|
playbackRate,
|
|
35
45
|
displayName: name ?? null,
|
|
36
|
-
id: timelineId,
|
|
37
46
|
stack,
|
|
38
47
|
showInTimeline,
|
|
39
48
|
premountDisplay: parentSequence?.premountDisplay ?? null,
|
|
40
49
|
postmountDisplay: parentSequence?.postmountDisplay ?? null,
|
|
50
|
+
loopDisplay,
|
|
51
|
+
mediaVolume,
|
|
52
|
+
trimAfter,
|
|
53
|
+
trimBefore,
|
|
41
54
|
});
|
|
55
|
+
const isSequenceHidden = hidden[timelineId] ?? false;
|
|
42
56
|
if (!videoConfig) {
|
|
43
57
|
throw new Error('No video config found');
|
|
44
58
|
}
|
|
@@ -63,10 +77,9 @@ const NewVideoForPreview = ({ src, style, playbackRate, logLevel, className, mut
|
|
|
63
77
|
logLevel,
|
|
64
78
|
sharedAudioContext: sharedAudioContext.audioContext,
|
|
65
79
|
loop,
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
: undefined,
|
|
80
|
+
trimAfter,
|
|
81
|
+
trimBefore,
|
|
82
|
+
fps: videoConfig.fps,
|
|
70
83
|
playbackRate,
|
|
71
84
|
audioStreamIndex,
|
|
72
85
|
});
|
|
@@ -108,6 +121,7 @@ const NewVideoForPreview = ({ src, style, playbackRate, logLevel, className, mut
|
|
|
108
121
|
}
|
|
109
122
|
if (result.type === 'success') {
|
|
110
123
|
setMediaPlayerReady(true);
|
|
124
|
+
setMediaDurationInSeconds(result.durationInSeconds);
|
|
111
125
|
}
|
|
112
126
|
})
|
|
113
127
|
.catch((error) => {
|
|
@@ -189,7 +203,7 @@ const NewVideoForPreview = ({ src, style, playbackRate, logLevel, className, mut
|
|
|
189
203
|
}
|
|
190
204
|
};
|
|
191
205
|
}, [mediaPlayerReady, buffer, logLevel]);
|
|
192
|
-
const effectiveMuted = muted || mediaMuted || userPreferredVolume <= 0;
|
|
206
|
+
const effectiveMuted = isSequenceHidden || muted || mediaMuted || userPreferredVolume <= 0;
|
|
193
207
|
useEffect(() => {
|
|
194
208
|
const mediaPlayer = mediaPlayerRef.current;
|
|
195
209
|
if (!mediaPlayer || !mediaPlayerReady)
|
|
@@ -202,7 +216,7 @@ const NewVideoForPreview = ({ src, style, playbackRate, logLevel, className, mut
|
|
|
202
216
|
return;
|
|
203
217
|
}
|
|
204
218
|
mediaPlayer.setVolume(userPreferredVolume);
|
|
205
|
-
}, [userPreferredVolume, mediaPlayerReady
|
|
219
|
+
}, [userPreferredVolume, mediaPlayerReady]);
|
|
206
220
|
const effectivePlaybackRate = useMemo(() => playbackRate * globalPlaybackRate, [playbackRate, globalPlaybackRate]);
|
|
207
221
|
useEffect(() => {
|
|
208
222
|
const mediaPlayer = mediaPlayerRef.current;
|
|
@@ -210,7 +224,7 @@ const NewVideoForPreview = ({ src, style, playbackRate, logLevel, className, mut
|
|
|
210
224
|
return;
|
|
211
225
|
}
|
|
212
226
|
mediaPlayer.setPlaybackRate(effectivePlaybackRate);
|
|
213
|
-
}, [effectivePlaybackRate, mediaPlayerReady
|
|
227
|
+
}, [effectivePlaybackRate, mediaPlayerReady]);
|
|
214
228
|
useEffect(() => {
|
|
215
229
|
const mediaPlayer = mediaPlayerRef.current;
|
|
216
230
|
if (!mediaPlayer || !mediaPlayerReady) {
|
|
@@ -218,6 +232,13 @@ const NewVideoForPreview = ({ src, style, playbackRate, logLevel, className, mut
|
|
|
218
232
|
}
|
|
219
233
|
mediaPlayer.setLoop(loop);
|
|
220
234
|
}, [loop, mediaPlayerReady]);
|
|
235
|
+
useEffect(() => {
|
|
236
|
+
const mediaPlayer = mediaPlayerRef.current;
|
|
237
|
+
if (!mediaPlayer || !mediaPlayerReady) {
|
|
238
|
+
return;
|
|
239
|
+
}
|
|
240
|
+
mediaPlayer.setFps(videoConfig.fps);
|
|
241
|
+
}, [videoConfig.fps, mediaPlayerReady]);
|
|
221
242
|
useEffect(() => {
|
|
222
243
|
const mediaPlayer = mediaPlayerRef.current;
|
|
223
244
|
if (!mediaPlayer || !mediaPlayerReady || !onVideoFrame) {
|
|
@@ -228,14 +249,16 @@ const NewVideoForPreview = ({ src, style, playbackRate, logLevel, className, mut
|
|
|
228
249
|
unsubscribe();
|
|
229
250
|
};
|
|
230
251
|
}, [onVideoFrame, mediaPlayerReady]);
|
|
252
|
+
const actualStyle = useMemo(() => {
|
|
253
|
+
return {
|
|
254
|
+
...style,
|
|
255
|
+
opacity: isSequenceHidden ? 0 : (style?.opacity ?? 1),
|
|
256
|
+
};
|
|
257
|
+
}, [isSequenceHidden, style]);
|
|
231
258
|
if (shouldFallbackToNativeVideo && !disallowFallbackToOffthreadVideo) {
|
|
232
259
|
// <Video> will fallback to <VideoForPreview> anyway
|
|
233
260
|
// not using <OffthreadVideo> because it does not support looping
|
|
234
|
-
return (_jsx(
|
|
261
|
+
return (_jsx(Html5Video, { src: src, style: actualStyle, className: className, muted: muted, volume: volume, trimAfter: trimAfter, trimBefore: trimBefore, playbackRate: playbackRate, loopVolumeCurveBehavior: loopVolumeCurveBehavior, name: name, loop: loop, showInTimeline: showInTimeline, stack: stack ?? undefined, ...fallbackOffthreadVideoProps }));
|
|
235
262
|
}
|
|
236
|
-
return (_jsx("canvas", { ref: canvasRef, width: videoConfig.width, height: videoConfig.height, style:
|
|
237
|
-
};
|
|
238
|
-
export const VideoForPreview = ({ className, loop, src, logLevel, muted, name, volume, loopVolumeCurveBehavior, onVideoFrame, playbackRate, style, showInTimeline, trimAfter, trimBefore, stack, disallowFallbackToOffthreadVideo, fallbackOffthreadVideoProps, audioStreamIndex, }) => {
|
|
239
|
-
const preloadedSrc = usePreload(src);
|
|
240
|
-
return (_jsx(NewVideoForPreview, { className: className, logLevel: logLevel, muted: muted, onVideoFrame: onVideoFrame, playbackRate: playbackRate, src: preloadedSrc, style: style, volume: volume, name: name, trimAfter: trimAfter, trimBefore: trimBefore, loop: loop, loopVolumeCurveBehavior: loopVolumeCurveBehavior, showInTimeline: showInTimeline, stack: stack, disallowFallbackToOffthreadVideo: disallowFallbackToOffthreadVideo, fallbackOffthreadVideoProps: fallbackOffthreadVideoProps, audioStreamIndex: audioStreamIndex }));
|
|
263
|
+
return (_jsx("canvas", { ref: canvasRef, width: videoConfig.width, height: videoConfig.height, style: actualStyle, className: classNameValue }));
|
|
241
264
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { useContext, useLayoutEffect, useMemo, useRef, useState, } from 'react';
|
|
3
3
|
import { cancelRender, Internals, Loop, random, useCurrentFrame, useDelayRender, useRemotionEnvironment, useVideoConfig, } from 'remotion';
|
|
4
|
-
import {
|
|
4
|
+
import { calculateMediaDuration } from '../../../core/src/calculate-media-duration';
|
|
5
5
|
import { applyVolume } from '../convert-audiodata/apply-volume';
|
|
6
6
|
import { TARGET_SAMPLE_RATE } from '../convert-audiodata/resample-audiodata';
|
|
7
7
|
import { frameForVolumeProp } from '../looped-frame';
|
|
@@ -88,6 +88,18 @@ export const VideoForRendering = ({ volume: volumeProp, playbackRate, src, muted
|
|
|
88
88
|
});
|
|
89
89
|
return;
|
|
90
90
|
}
|
|
91
|
+
if (result.type === 'cannot-decode-alpha') {
|
|
92
|
+
if (disallowFallbackToOffthreadVideo) {
|
|
93
|
+
cancelRender(new Error(`Cannot decode alpha component for ${src}, and 'disallowFallbackToOffthreadVideo' was set. Failing the render.`));
|
|
94
|
+
}
|
|
95
|
+
if (window.remotion_isMainTab) {
|
|
96
|
+
Internals.Log.info({ logLevel, tag: '@remotion/media' }, `Cannot decode alpha component for ${src}, falling back to <OffthreadVideo>`);
|
|
97
|
+
}
|
|
98
|
+
setReplaceWithOffthreadVideo({
|
|
99
|
+
durationInSeconds: result.durationInSeconds,
|
|
100
|
+
});
|
|
101
|
+
return;
|
|
102
|
+
}
|
|
91
103
|
if (result.type === 'network-error') {
|
|
92
104
|
if (disallowFallbackToOffthreadVideo) {
|
|
93
105
|
cancelRender(new Error(`Cannot decode ${src}, and 'disallowFallbackToOffthreadVideo' was set. Failing the render.`));
|
|
@@ -101,7 +113,9 @@ export const VideoForRendering = ({ volume: volumeProp, playbackRate, src, muted
|
|
|
101
113
|
const { frame: imageBitmap, audio, durationInSeconds: assetDurationInSeconds, } = result;
|
|
102
114
|
if (imageBitmap) {
|
|
103
115
|
onVideoFrame?.(imageBitmap);
|
|
104
|
-
const context = canvasRef.current?.getContext('2d'
|
|
116
|
+
const context = canvasRef.current?.getContext('2d', {
|
|
117
|
+
alpha: true,
|
|
118
|
+
});
|
|
105
119
|
if (!context) {
|
|
106
120
|
return;
|
|
107
121
|
}
|
|
@@ -121,7 +135,9 @@ export const VideoForRendering = ({ volume: volumeProp, playbackRate, src, muted
|
|
|
121
135
|
// In the case of https://discord.com/channels/809501355504959528/809501355504959531/1424400511070765086
|
|
122
136
|
// A video that only starts at time 0.033sec
|
|
123
137
|
// we shall not crash here but clear the canvas
|
|
124
|
-
const context = canvasRef.current?.getContext('2d'
|
|
138
|
+
const context = canvasRef.current?.getContext('2d', {
|
|
139
|
+
alpha: true,
|
|
140
|
+
});
|
|
125
141
|
if (context) {
|
|
126
142
|
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
|
|
127
143
|
}
|
|
@@ -195,14 +211,14 @@ export const VideoForRendering = ({ volume: volumeProp, playbackRate, src, muted
|
|
|
195
211
|
.join(' ');
|
|
196
212
|
}, [className]);
|
|
197
213
|
if (replaceWithOffthreadVideo) {
|
|
198
|
-
const fallback = (_jsx(Internals.InnerOffthreadVideo, { src: src, playbackRate: playbackRate ?? 1, muted: muted ?? false, acceptableTimeShiftInSeconds: fallbackOffthreadVideoProps?.acceptableTimeShiftInSeconds, loopVolumeCurveBehavior: loopVolumeCurveBehavior ?? 'repeat', delayRenderRetries: delayRenderRetries ?? undefined, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined, style: style, allowAmplificationDuringRender: true, transparent: fallbackOffthreadVideoProps?.transparent ??
|
|
214
|
+
const fallback = (_jsx(Internals.InnerOffthreadVideo, { src: src, playbackRate: playbackRate ?? 1, muted: muted ?? false, acceptableTimeShiftInSeconds: fallbackOffthreadVideoProps?.acceptableTimeShiftInSeconds, loopVolumeCurveBehavior: loopVolumeCurveBehavior ?? 'repeat', delayRenderRetries: delayRenderRetries ?? undefined, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined, style: style, allowAmplificationDuringRender: true, transparent: fallbackOffthreadVideoProps?.transparent ?? true, toneMapped: fallbackOffthreadVideoProps?.toneMapped ?? true, audioStreamIndex: audioStreamIndex ?? 0, name: name, className: className, onVideoFrame: onVideoFrame, volume: volumeProp, id: id, onError: fallbackOffthreadVideoProps?.onError, toneFrequency: fallbackOffthreadVideoProps?.toneFrequency ?? 1,
|
|
199
215
|
// these shouldn't matter during rendering / should not appear at all
|
|
200
216
|
showInTimeline: false, crossOrigin: undefined, onAutoPlayError: () => undefined, pauseWhenBuffering: false, trimAfter: undefined, trimBefore: undefined, useWebAudioApi: false, startFrom: undefined, endAt: undefined, stack: stack, _remotionInternalNativeLoopPassed: false }));
|
|
201
217
|
if (loop) {
|
|
202
218
|
if (!replaceWithOffthreadVideo.durationInSeconds) {
|
|
203
219
|
cancelRender(new Error(`Cannot render video ${src}: @remotion/media was unable to render, and fell back to <OffthreadVideo>. Also, "loop" was set, but <OffthreadVideo> does not support looping and @remotion/media could also not determine the duration of the video.`));
|
|
204
220
|
}
|
|
205
|
-
return (_jsx(Loop, { layout: "none", durationInFrames:
|
|
221
|
+
return (_jsx(Loop, { layout: "none", durationInFrames: calculateMediaDuration({
|
|
206
222
|
trimAfter: trimAfterValue,
|
|
207
223
|
mediaDurationInFrames: replaceWithOffthreadVideo.durationInSeconds * fps,
|
|
208
224
|
playbackRate,
|
|
@@ -28,6 +28,15 @@ if (window.remotion_broadcastChannel && window.remotion_isMainTab) {
|
|
|
28
28
|
window.remotion_broadcastChannel.postMessage(cannotDecodeResponse);
|
|
29
29
|
return;
|
|
30
30
|
}
|
|
31
|
+
if (result.type === 'cannot-decode-alpha') {
|
|
32
|
+
const cannotDecodeAlphaResponse = {
|
|
33
|
+
type: 'response-cannot-decode-alpha',
|
|
34
|
+
id: data.id,
|
|
35
|
+
durationInSeconds: result.durationInSeconds,
|
|
36
|
+
};
|
|
37
|
+
window.remotion_broadcastChannel.postMessage(cannotDecodeAlphaResponse);
|
|
38
|
+
return;
|
|
39
|
+
}
|
|
31
40
|
if (result.type === 'network-error') {
|
|
32
41
|
const networkErrorResponse = {
|
|
33
42
|
type: 'response-network-error',
|
|
@@ -138,6 +147,14 @@ export const extractFrameViaBroadcastChannel = ({ src, timeInSeconds, logLevel,
|
|
|
138
147
|
window.remotion_broadcastChannel.removeEventListener('message', onMessage);
|
|
139
148
|
return;
|
|
140
149
|
}
|
|
150
|
+
if (data.type === 'response-cannot-decode-alpha') {
|
|
151
|
+
resolve({
|
|
152
|
+
type: 'cannot-decode-alpha',
|
|
153
|
+
durationInSeconds: data.durationInSeconds,
|
|
154
|
+
});
|
|
155
|
+
window.remotion_broadcastChannel.removeEventListener('message', onMessage);
|
|
156
|
+
return;
|
|
157
|
+
}
|
|
141
158
|
throw new Error(`Invalid message: ${JSON.stringify(data)}`);
|
|
142
159
|
};
|
|
143
160
|
window.remotion_broadcastChannel.addEventListener('message', onMessage);
|
|
@@ -26,6 +26,7 @@ const extractFrameInternal = async ({ src, timeInSeconds: unloopedTimeInSeconds,
|
|
|
26
26
|
playbackRate,
|
|
27
27
|
trimBefore,
|
|
28
28
|
fps,
|
|
29
|
+
ifNoMediaDuration: 'fail',
|
|
29
30
|
});
|
|
30
31
|
if (timeInSeconds === null) {
|
|
31
32
|
return {
|
|
@@ -41,6 +42,12 @@ const extractFrameInternal = async ({ src, timeInSeconds: unloopedTimeInSeconds,
|
|
|
41
42
|
src,
|
|
42
43
|
logLevel,
|
|
43
44
|
});
|
|
45
|
+
if (keyframeBank === 'has-alpha') {
|
|
46
|
+
return {
|
|
47
|
+
type: 'cannot-decode-alpha',
|
|
48
|
+
durationInSeconds: await sink.getDuration(),
|
|
49
|
+
};
|
|
50
|
+
}
|
|
44
51
|
if (!keyframeBank) {
|
|
45
52
|
return {
|
|
46
53
|
type: 'success',
|
|
@@ -8,7 +8,7 @@ export declare const makeKeyframeManager: () => {
|
|
|
8
8
|
videoSampleSink: VideoSampleSink;
|
|
9
9
|
src: string;
|
|
10
10
|
logLevel: LogLevel;
|
|
11
|
-
}) => Promise<KeyframeBank | null>;
|
|
11
|
+
}) => Promise<KeyframeBank | "has-alpha" | null>;
|
|
12
12
|
getCacheStats: () => Promise<{
|
|
13
13
|
count: number;
|
|
14
14
|
totalSize: number;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { Internals } from 'remotion';
|
|
2
|
+
import { canBrowserUseWebGl2 } from '../browser-can-use-webgl2';
|
|
2
3
|
import { getMaxVideoCacheSize, getTotalCacheStats, SAFE_BACK_WINDOW_IN_SECONDS, } from '../caches';
|
|
3
4
|
import { renderTimestampRange } from '../render-timestamp-range';
|
|
4
5
|
import { getFramesSinceKeyframe } from './get-frames-since-keyframe';
|
|
@@ -104,6 +105,10 @@ export const makeKeyframeManager = () => {
|
|
|
104
105
|
const startPacket = await packetSink.getKeyPacket(timestamp, {
|
|
105
106
|
verifyKeyPackets: true,
|
|
106
107
|
});
|
|
108
|
+
const hasAlpha = startPacket?.sideData.alpha;
|
|
109
|
+
if (hasAlpha && !canBrowserUseWebGl2()) {
|
|
110
|
+
return 'has-alpha';
|
|
111
|
+
}
|
|
107
112
|
if (!startPacket) {
|
|
108
113
|
// e.g. https://discord.com/channels/809501355504959528/809501355504959531/1424400511070765086
|
|
109
114
|
// The video has an offset and the first frame is at time 0.033sec
|
package/package.json
CHANGED
|
@@ -1,55 +1,55 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
}
|
|
2
|
+
"name": "@remotion/media",
|
|
3
|
+
"version": "4.0.361",
|
|
4
|
+
"main": "dist/index.js",
|
|
5
|
+
"types": "dist/index.d.ts",
|
|
6
|
+
"module": "dist/esm/index.mjs",
|
|
7
|
+
"repository": {
|
|
8
|
+
"url": "https://github.com/remotion-dev/remotion/tree/main/packages/media"
|
|
9
|
+
},
|
|
10
|
+
"sideEffects": false,
|
|
11
|
+
"author": "Jonny Burger <jonny@remotion.dev>, Hunain Ahmed <junaidhunain6@gmail.com>",
|
|
12
|
+
"bugs": {
|
|
13
|
+
"url": "https://github.com/remotion-dev/remotion/issues"
|
|
14
|
+
},
|
|
15
|
+
"scripts": {
|
|
16
|
+
"if-node-18+": "node -e \"const [maj]=process.versions.node.split('.').map(Number); process.exit(maj>=18?0:1)\"",
|
|
17
|
+
"formatting": "prettier --experimental-cli src --check",
|
|
18
|
+
"lint": "eslint src",
|
|
19
|
+
"watch": "tsc -w",
|
|
20
|
+
"test": "node src/test/execute.mjs",
|
|
21
|
+
"make": "tsc -d && bun --env-file=../.env.bundle bundle.ts"
|
|
22
|
+
},
|
|
23
|
+
"dependencies": {
|
|
24
|
+
"mediabunny": "1.23.0",
|
|
25
|
+
"remotion": "4.0.361",
|
|
26
|
+
"webdriverio": "9.19.2"
|
|
27
|
+
},
|
|
28
|
+
"peerDependencies": {
|
|
29
|
+
"react": ">=16.8.0",
|
|
30
|
+
"react-dom": ">=16.8.0"
|
|
31
|
+
},
|
|
32
|
+
"devDependencies": {
|
|
33
|
+
"@remotion/eslint-config-internal": "4.0.361",
|
|
34
|
+
"@vitest/browser": "^3.2.4",
|
|
35
|
+
"eslint": "9.19.0",
|
|
36
|
+
"react": "19.0.0",
|
|
37
|
+
"react-dom": "19.0.0",
|
|
38
|
+
"vitest": "3.2.4"
|
|
39
|
+
},
|
|
40
|
+
"keywords": [],
|
|
41
|
+
"publishConfig": {
|
|
42
|
+
"access": "public"
|
|
43
|
+
},
|
|
44
|
+
"exports": {
|
|
45
|
+
".": {
|
|
46
|
+
"types": "./dist/index.d.ts",
|
|
47
|
+
"require": "./dist/index.js",
|
|
48
|
+
"module": "./dist/esm/index.mjs",
|
|
49
|
+
"import": "./dist/esm/index.mjs"
|
|
50
|
+
},
|
|
51
|
+
"./package.json": "./package.json"
|
|
52
|
+
},
|
|
53
|
+
"description": "Experimental WebCodecs-based media tags",
|
|
54
|
+
"homepage": "https://remotion.dev/docs/media"
|
|
55
|
+
}
|
package/LICENSE.md
DELETED
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
# Remotion License
|
|
2
|
-
|
|
3
|
-
In Remotion 5.0, the license will slightly change. [View the changes here](https://github.com/remotion-dev/remotion/pull/3750).
|
|
4
|
-
|
|
5
|
-
---
|
|
6
|
-
|
|
7
|
-
Depending on the type of your legal entity, you are granted permission to use Remotion for your project. Individuals and small companies are allowed to use Remotion to create videos for free (even commercial), while a company license is required for for-profit organizations of a certain size. This two-tier system was designed to ensure funding for this project while still allowing the source code to be available and the program to be free for most. Read below for the exact terms of use.
|
|
8
|
-
|
|
9
|
-
- [Free License](#free-license)
|
|
10
|
-
- [Company License](#company-license)
|
|
11
|
-
|
|
12
|
-
## Free License
|
|
13
|
-
|
|
14
|
-
Copyright © 2025 [Remotion](https://www.remotion.dev)
|
|
15
|
-
|
|
16
|
-
### Eligibility
|
|
17
|
-
|
|
18
|
-
You are eligible to use Remotion for free if you are:
|
|
19
|
-
|
|
20
|
-
- an individual
|
|
21
|
-
- a for-profit organization with up to 3 employees
|
|
22
|
-
- a non-profit or not-for-profit organization
|
|
23
|
-
- evaluating whether Remotion is a good fit, and are not yet using it in a commercial way
|
|
24
|
-
|
|
25
|
-
### Allowed use cases
|
|
26
|
-
|
|
27
|
-
Permission is hereby granted, free of charge, to any person eligible for the "Free License", to use the software non-commercially or commercially for the purpose of creating videos and images and to modify the software to their own liking, for the purpose of fulfilling their custom use case or to contribute bug fixes or improvements back to Remotion.
|
|
28
|
-
|
|
29
|
-
### Disallowed use cases
|
|
30
|
-
|
|
31
|
-
It is not allowed to copy or modify Remotion code for the purpose of selling, renting, licensing, relicensing, or sublicensing your own derivate of Remotion.
|
|
32
|
-
|
|
33
|
-
### Warranty notice
|
|
34
|
-
|
|
35
|
-
The software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose, and non-infringement. In no event shall the author or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.
|
|
36
|
-
|
|
37
|
-
### Support
|
|
38
|
-
|
|
39
|
-
Support is provided on a best-we-can-do basis via GitHub Issues and Discord.
|
|
40
|
-
|
|
41
|
-
## Company License
|
|
42
|
-
|
|
43
|
-
You are required to obtain a Company License to use Remotion if you are not within the group of entities eligible for a Free License. This license will enable you to use Remotion for the allowed use cases specified in the Free License, and give you access to prioritized support (read the [Support Policy](https://www.remotion.dev/docs/support)).
|
|
44
|
-
|
|
45
|
-
Visit [remotion.pro](https://www.remotion.pro/license) for pricing and to buy a license.
|
|
46
|
-
|
|
47
|
-
### FAQs
|
|
48
|
-
|
|
49
|
-
Are you not sure whether you need a Company License because of an edge case? Here are some [frequently asked questions](https://www.remotion.pro/faq).
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
import { FORMAT } from './convert-audiodata';
|
|
2
|
-
import { resampleAudioData, TARGET_SAMPLE_RATE } from './resample-audiodata';
|
|
3
|
-
export const applyToneFrequency = (audioData, toneFrequency) => {
|
|
4
|
-
// In FFmpeg, we apply toneFrequency as follows:
|
|
5
|
-
// `asetrate=${DEFAULT_SAMPLE_RATE}*${toneFrequency},aresample=${DEFAULT_SAMPLE_RATE},atempo=1/${toneFrequency}`
|
|
6
|
-
// So there are 2 steps:
|
|
7
|
-
// 1. Change the assumed sample rate
|
|
8
|
-
// 2. Resample to 48Khz
|
|
9
|
-
// 3. Apply playback rate
|
|
10
|
-
const step1 = {
|
|
11
|
-
...audioData,
|
|
12
|
-
sampleRate: audioData.sampleRate * toneFrequency,
|
|
13
|
-
};
|
|
14
|
-
const newNumberOfFrames = Math.round(audioData.numberOfFrames * (TARGET_SAMPLE_RATE / step1.sampleRate));
|
|
15
|
-
const step2Data = new Int16Array(newNumberOfFrames * audioData.numberOfChannels);
|
|
16
|
-
const chunkSize = audioData.numberOfFrames / newNumberOfFrames;
|
|
17
|
-
resampleAudioData({
|
|
18
|
-
srcNumberOfChannels: step1.numberOfChannels,
|
|
19
|
-
sourceChannels: step1.data,
|
|
20
|
-
destination: step2Data,
|
|
21
|
-
targetFrames: newNumberOfFrames,
|
|
22
|
-
chunkSize,
|
|
23
|
-
});
|
|
24
|
-
const step2AudioData = {
|
|
25
|
-
data: step2Data,
|
|
26
|
-
format: FORMAT,
|
|
27
|
-
numberOfChannels: step1.numberOfChannels,
|
|
28
|
-
numberOfFrames: newNumberOfFrames,
|
|
29
|
-
sampleRate: TARGET_SAMPLE_RATE,
|
|
30
|
-
timestamp: audioData.timestamp,
|
|
31
|
-
};
|
|
32
|
-
const step3Data = wsolaInt16Interleaved(step2AudioData.data, step2AudioData.numberOfChannels, toneFrequency);
|
|
33
|
-
// Target per-channel length and interleave
|
|
34
|
-
const targetPerChan = Math.max(1, Math.round(step2AudioData.numberOfFrames * toneFrequency));
|
|
35
|
-
const targetTotal = targetPerChan * step2AudioData.numberOfChannels;
|
|
36
|
-
return {
|
|
37
|
-
data: step3Data,
|
|
38
|
-
numberOfChannels: step2AudioData.numberOfChannels,
|
|
39
|
-
numberOfFrames: targetTotal,
|
|
40
|
-
sampleRate: TARGET_SAMPLE_RATE,
|
|
41
|
-
timestamp: audioData.timestamp,
|
|
42
|
-
};
|
|
43
|
-
};
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* WSOLA time-scale modification for interleaved Int16 PCM (multi-channel).
|
|
3
|
-
* - Preserves pitch approximately while changing tempo by factor f.
|
|
4
|
-
* - Works for N interleaved channels.
|
|
5
|
-
* - Mitigates head/tail fade-out via overlap-weight normalization and boundary reinforcement.
|
|
6
|
-
*
|
|
7
|
-
* @param input Interleaved Int16 PCM (e.g., LRLRLR... for stereo)
|
|
8
|
-
* @param channels Number of channels (>=1)
|
|
9
|
-
* @param f Tempo factor: >1 = faster/shorter, <1 = slower/longer
|
|
10
|
-
* @param opts Optional tuning parameters
|
|
11
|
-
* @returns Interleaved Int16Array with length ≈ round(input.length * f)
|
|
12
|
-
*/
|
|
13
|
-
export declare function wsolaInt16Interleaved(input: Int16Array, channels: number, f: number): Int16Array;
|