@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.
Files changed (38) hide show
  1. package/dist/audio/audio-for-preview.js +29 -13
  2. package/dist/audio/audio-for-rendering.js +8 -6
  3. package/dist/audio-extraction/extract-audio.js +1 -0
  4. package/dist/browser-can-use-webgl2.d.ts +1 -0
  5. package/dist/browser-can-use-webgl2.js +13 -0
  6. package/dist/caches.d.ts +1 -1
  7. package/dist/caches.js +3 -3
  8. package/dist/esm/index.mjs +568 -327
  9. package/dist/extract-frame-and-audio.js +6 -0
  10. package/dist/get-time-in-seconds.d.ts +2 -1
  11. package/dist/get-time-in-seconds.js +10 -10
  12. package/dist/show-in-timeline.d.ts +8 -0
  13. package/dist/show-in-timeline.js +31 -0
  14. package/dist/use-media-in-timeline.d.ts +19 -0
  15. package/dist/use-media-in-timeline.js +103 -0
  16. package/dist/video/media-player.d.ts +11 -5
  17. package/dist/video/media-player.js +74 -36
  18. package/dist/video/video-for-preview.d.ts +9 -9
  19. package/dist/video/video-for-preview.js +43 -20
  20. package/dist/video/video-for-rendering.js +21 -5
  21. package/dist/video-extraction/extract-frame-via-broadcast-channel.d.ts +3 -0
  22. package/dist/video-extraction/extract-frame-via-broadcast-channel.js +17 -0
  23. package/dist/video-extraction/extract-frame.d.ts +3 -0
  24. package/dist/video-extraction/extract-frame.js +7 -0
  25. package/dist/video-extraction/keyframe-manager.d.ts +1 -1
  26. package/dist/video-extraction/keyframe-manager.js +5 -0
  27. package/package.json +54 -54
  28. package/LICENSE.md +0 -49
  29. package/dist/convert-audiodata/apply-tonefrequency.d.ts +0 -2
  30. package/dist/convert-audiodata/apply-tonefrequency.js +0 -43
  31. package/dist/convert-audiodata/wsola.d.ts +0 -13
  32. package/dist/convert-audiodata/wsola.js +0 -197
  33. package/dist/get-sink-weak.d.ts +0 -13
  34. package/dist/get-sink-weak.js +0 -15
  35. package/dist/log.d.ts +0 -10
  36. package/dist/log.js +0 -33
  37. package/dist/video/resolve-playback-time.d.ts +0 -8
  38. 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, Video } from 'remotion';
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, useMediaInTimeline, SequenceContext, } = Internals;
6
- const NewVideoForPreview = ({ src, style, playbackRate, logLevel, className, muted, volume, loopVolumeCurveBehavior, onVideoFrame, showInTimeline, loop, name, trimAfter, trimBefore, stack, disallowFallbackToOffthreadVideo, fallbackOffthreadVideoProps, audioStreamIndex, }) => {
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
- useMediaInTimeline({
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
- trimAfterSeconds: trimAfter ? trimAfter / videoConfig.fps : undefined,
67
- trimBeforeSeconds: trimBefore
68
- ? trimBefore / videoConfig.fps
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, logLevel]);
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, logLevel]);
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(Video, { src: src, style: style, className: className, muted: muted, volume: volume, trimAfter: trimAfter, trimBefore: trimBefore, playbackRate: playbackRate, loopVolumeCurveBehavior: loopVolumeCurveBehavior, name: name, loop: loop, showInTimeline: showInTimeline, stack: stack ?? undefined, ...fallbackOffthreadVideoProps }));
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: style, className: classNameValue }));
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 { calculateLoopDuration } from '../../../core/src/calculate-loop';
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 ?? false, toneMapped: fallbackOffthreadVideoProps?.toneMapped ?? true, audioStreamIndex: audioStreamIndex ?? 0, name: name, className: className, onVideoFrame: onVideoFrame, volume: volumeProp, id: id, onError: fallbackOffthreadVideoProps?.onError, toneFrequency: fallbackOffthreadVideoProps?.toneFrequency ?? 1,
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: calculateLoopDuration({
221
+ return (_jsx(Loop, { layout: "none", durationInFrames: calculateMediaDuration({
206
222
  trimAfter: trimAfterValue,
207
223
  mediaDurationInFrames: replaceWithOffthreadVideo.durationInSeconds * fps,
208
224
  playbackRate,
@@ -8,6 +8,9 @@ export type ExtractFrameViaBroadcastChannelResult = {
8
8
  } | {
9
9
  type: 'cannot-decode';
10
10
  durationInSeconds: number | null;
11
+ } | {
12
+ type: 'cannot-decode-alpha';
13
+ durationInSeconds: number | null;
11
14
  } | {
12
15
  type: 'network-error';
13
16
  } | {
@@ -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);
@@ -7,6 +7,9 @@ type ExtractFrameResult = {
7
7
  } | {
8
8
  type: 'cannot-decode';
9
9
  durationInSeconds: number | null;
10
+ } | {
11
+ type: 'cannot-decode-alpha';
12
+ durationInSeconds: number | null;
10
13
  } | {
11
14
  type: 'unknown-container-format';
12
15
  };
@@ -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
- "name": "@remotion/media",
3
- "version": "4.0.357",
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
- "dependencies": {
16
- "mediabunny": "1.23.0",
17
- "webdriverio": "9.19.2",
18
- "remotion": "4.0.357"
19
- },
20
- "peerDependencies": {
21
- "react": ">=16.8.0",
22
- "react-dom": ">=16.8.0"
23
- },
24
- "devDependencies": {
25
- "@vitest/browser": "^3.2.4",
26
- "eslint": "9.19.0",
27
- "react": "19.0.0",
28
- "react-dom": "19.0.0",
29
- "vitest": "3.2.4",
30
- "@remotion/eslint-config-internal": "4.0.357"
31
- },
32
- "keywords": [],
33
- "publishConfig": {
34
- "access": "public"
35
- },
36
- "exports": {
37
- ".": {
38
- "types": "./dist/index.d.ts",
39
- "require": "./dist/index.js",
40
- "module": "./dist/esm/index.mjs",
41
- "import": "./dist/esm/index.mjs"
42
- },
43
- "./package.json": "./package.json"
44
- },
45
- "description": "Experimental WebCodecs-based media tags",
46
- "homepage": "https://remotion.dev/docs/media",
47
- "scripts": {
48
- "if-node-18+": "node -e \"const [maj]=process.versions.node.split('.').map(Number); process.exit(maj>=18?0:1)\"",
49
- "formatting": "prettier --experimental-cli src --check",
50
- "lint": "eslint src",
51
- "watch": "tsc -w",
52
- "test": "node src/test/execute.mjs",
53
- "make": "tsc -d && bun --env-file=../.env.bundle bundle.ts"
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,2 +0,0 @@
1
- import { type PcmS16AudioData } from './convert-audiodata';
2
- export declare const applyToneFrequency: (audioData: PcmS16AudioData, toneFrequency: number) => PcmS16AudioData;
@@ -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;