search

remotion-dev / remotion

🎥 Make videos programmatically with React
https://remotion.dev
Other
20.94k stars 1.06k forks source link

Export `BufferingProvider`? #4367

Closed bennobuilder closed 1 month ago

bennobuilder commented 1 month ago

Feature Request 🛍️

The BufferingContextReact required by useMediaPlayback is currently not provided by Vidstack (Player), causing the following error:

Uncaught Error: useMediaPlayback must be used inside a <BufferingContext>

Use Case

Make Remotion work with Vidstack (Remotion Provider) by ensuring the BufferingContextReact is available for useMediaPlayback.

Possible Solution

  1. [TEMP] Manually export BufferingProvider in node_modules or automate this via a script.
  2. Provide an official export of BufferingProvider from the Remotion core package to ensure BufferingContextReact is accessible in useMediaPlayback.
<BufferingProvider>
    <MediaPlayer
        src={src}
        ref={mediaPlayerRef}
    >
        <MediaProvider loaders={[RemotionProviderLoader]} />
    </MediaPlayer>
</BufferingProvider>
JonnyBurger commented 1 month ago

This does not seem the right way to fix it. Both useMediaPlayback and BufferingProvider is internal API from Remotion.

It seems like Vidstack does not use it either, so I think the actual problem here is a version mismatch! If multiple versions of Remotion are in a project, then the React contexts don't work anymore.

Can you check your lockfile if this is the case?

bennobuilder commented 1 month ago

@JonnyBurger Good point 👍

But although I use the same Remotion Version across the packages, it still can't identify the BufferingContextReact 🤷

Image

Remotion Versions in use (Verified via Dependency Tree)

Dependency Tree (PNPM, Depth: 2) ``` dependencies: @blgc/utils 0.0.20 @radix-ui/react-icons 1.3.0 └─┬ react 18.3.1 peer └── loose-envify 1.4.0 @radix-ui/react-scroll-area 1.2.0 ├── @radix-ui/number 1.1.0 ├── @radix-ui/primitive 1.1.0 ├─┬ @radix-ui/react-compose-refs 1.1.0 │ ├── @types/react 18.3.11 peer │ └── react 18.3.1 peer ├─┬ @radix-ui/react-context 1.1.1 │ ├── @types/react 18.3.11 peer │ └── react 18.3.1 peer ├─┬ @radix-ui/react-direction 1.1.0 │ ├── @types/react 18.3.11 peer │ └── react 18.3.1 peer ├─┬ @radix-ui/react-presence 1.1.1 │ ├── @radix-ui/react-compose-refs 1.1.0 │ ├── @radix-ui/react-use-layout-effect 1.1.0 │ ├── @types/react 18.3.11 peer │ ├── @types/react-dom 18.3.0 peer │ ├── react 18.3.1 peer │ └── react-dom 18.3.1 peer ├─┬ @radix-ui/react-primitive 2.0.0 │ ├── @radix-ui/react-slot 1.1.0 │ ├── @types/react 18.3.11 peer │ ├── @types/react-dom 18.3.0 peer │ ├── react 18.3.1 peer │ └── react-dom 18.3.1 peer ├─┬ @radix-ui/react-use-callback-ref 1.1.0 │ ├── @types/react 18.3.11 peer │ └── react 18.3.1 peer ├─┬ @radix-ui/react-use-layout-effect 1.1.0 │ ├── @types/react 18.3.11 peer │ └── react 18.3.1 peer ├─┬ @types/react 18.3.11 peer │ ├── @types/prop-types 15.7.13 │ └── csstype 3.1.3 ├─┬ @types/react-dom 18.3.0 peer │ └── @types/react 18.3.11 ├─┬ react 18.3.1 peer │ └── loose-envify 1.4.0 └─┬ react-dom 18.3.1 peer ├── loose-envify 1.4.0 ├── react 18.3.1 peer └── scheduler 0.23.2 @radix-ui/react-select 2.1.2 ├── @radix-ui/number 1.1.0 ├── @radix-ui/primitive 1.1.0 ├─┬ @radix-ui/react-collection 1.1.0 │ ├── @radix-ui/react-compose-refs 1.1.0 │ ├── @radix-ui/react-context 1.1.0 │ ├── @radix-ui/react-primitive 2.0.0 │ ├── @radix-ui/react-slot 1.1.0 │ ├── @types/react 18.3.11 peer │ ├── @types/react-dom 18.3.0 peer │ ├── react 18.3.1 peer │ └── react-dom 18.3.1 peer ├─┬ @radix-ui/react-compose-refs 1.1.0 │ ├── @types/react 18.3.11 peer │ └── react 18.3.1 peer ├─┬ @radix-ui/react-context 1.1.1 │ ├── @types/react 18.3.11 peer │ └── react 18.3.1 peer ├─┬ @radix-ui/react-direction 1.1.0 │ ├── @types/react 18.3.11 peer │ └── react 18.3.1 peer ├─┬ @radix-ui/react-dismissable-layer 1.1.1 │ ├── @radix-ui/primitive 1.1.0 │ ├── @radix-ui/react-compose-refs 1.1.0 │ ├── @radix-ui/react-primitive 2.0.0 │ ├── @radix-ui/react-use-callback-ref 1.1.0 │ ├── @radix-ui/react-use-escape-keydown 1.1.0 │ ├── @types/react 18.3.11 peer │ ├── @types/react-dom 18.3.0 peer │ ├── react 18.3.1 peer │ └── react-dom 18.3.1 peer ├─┬ @radix-ui/react-focus-guards 1.1.1 │ ├── @types/react 18.3.11 peer │ └── react 18.3.1 peer ├─┬ @radix-ui/react-focus-scope 1.1.0 │ ├── @radix-ui/react-compose-refs 1.1.0 │ ├── @radix-ui/react-primitive 2.0.0 │ ├── @radix-ui/react-use-callback-ref 1.1.0 │ ├── @types/react 18.3.11 peer │ ├── @types/react-dom 18.3.0 peer │ ├── react 18.3.1 peer │ └── react-dom 18.3.1 peer ├─┬ @radix-ui/react-id 1.1.0 │ ├── @radix-ui/react-use-layout-effect 1.1.0 │ ├── @types/react 18.3.11 peer │ └── react 18.3.1 peer ├─┬ @radix-ui/react-popper 1.2.0 │ ├── @floating-ui/react-dom 2.1.2 │ ├── @radix-ui/react-arrow 1.1.0 │ ├── @radix-ui/react-compose-refs 1.1.0 │ ├── @radix-ui/react-context 1.1.0 │ ├── @radix-ui/react-primitive 2.0.0 │ ├── @radix-ui/react-use-callback-ref 1.1.0 │ ├── @radix-ui/react-use-layout-effect 1.1.0 │ ├── @radix-ui/react-use-rect 1.1.0 │ ├── @radix-ui/react-use-size 1.1.0 │ ├── @radix-ui/rect 1.1.0 │ ├── @types/react 18.3.11 peer │ ├── @types/react-dom 18.3.0 peer │ ├── react 18.3.1 peer │ └── react-dom 18.3.1 peer ├─┬ @radix-ui/react-portal 1.1.2 │ ├── @radix-ui/react-primitive 2.0.0 │ ├── @radix-ui/react-use-layout-effect 1.1.0 │ ├── @types/react 18.3.11 peer │ ├── @types/react-dom 18.3.0 peer │ ├── react 18.3.1 peer │ └── react-dom 18.3.1 peer ├─┬ @radix-ui/react-primitive 2.0.0 │ ├── @radix-ui/react-slot 1.1.0 │ ├── @types/react 18.3.11 peer │ ├── @types/react-dom 18.3.0 peer │ ├── react 18.3.1 peer │ └── react-dom 18.3.1 peer ├─┬ @radix-ui/react-slot 1.1.0 │ ├── @radix-ui/react-compose-refs 1.1.0 │ ├── @types/react 18.3.11 peer │ └── react 18.3.1 peer ├─┬ @radix-ui/react-use-callback-ref 1.1.0 │ ├── @types/react 18.3.11 peer │ └── react 18.3.1 peer ├─┬ @radix-ui/react-use-controllable-state 1.1.0 │ ├── @radix-ui/react-use-callback-ref 1.1.0 │ ├── @types/react 18.3.11 peer │ └── react 18.3.1 peer ├─┬ @radix-ui/react-use-layout-effect 1.1.0 │ ├── @types/react 18.3.11 peer │ └── react 18.3.1 peer ├─┬ @radix-ui/react-use-previous 1.1.0 │ ├── @types/react 18.3.11 peer │ └── react 18.3.1 peer ├─┬ @radix-ui/react-visually-hidden 1.1.0 │ ├── @radix-ui/react-primitive 2.0.0 │ ├── @types/react 18.3.11 peer │ ├── @types/react-dom 18.3.0 peer │ ├── react 18.3.1 peer │ └── react-dom 18.3.1 peer ├─┬ @types/react 18.3.11 peer │ ├── @types/prop-types 15.7.13 │ └── csstype 3.1.3 ├─┬ @types/react-dom 18.3.0 peer │ └── @types/react 18.3.11 ├─┬ aria-hidden 1.2.4 │ └── tslib 2.7.0 ├─┬ react 18.3.1 peer │ └── loose-envify 1.4.0 ├─┬ react-dom 18.3.1 peer │ ├── loose-envify 1.4.0 │ ├── react 18.3.1 peer │ └── scheduler 0.23.2 └─┬ react-remove-scroll 2.6.0 ├── @types/react 18.3.11 peer ├── react 18.3.1 peer ├── react-remove-scroll-bar 2.3.6 ├── react-style-singleton 2.2.1 ├── tslib 2.7.0 ├── use-callback-ref 1.3.2 └── use-sidecar 1.1.2 @radix-ui/react-slot 1.1.0 ├─┬ @radix-ui/react-compose-refs 1.1.0 │ ├── @types/react 18.3.11 peer │ └── react 18.3.1 peer ├─┬ @types/react 18.3.11 peer │ ├── @types/prop-types 15.7.13 │ └── csstype 3.1.3 └─┬ react 18.3.1 peer └── loose-envify 1.4.0 @repo/video link:../../packages/video ├── @blgc/utils 0.0.20 ├─┬ @radix-ui/react-icons 1.3.0 │ └── react 18.3.1 peer ├─┬ @remotion/zod-types 4.0.193 │ ├── remotion 4.0.193 │ └── zod 3.23.8 peer ├── clsx 2.1.1 ├─┬ lucide-react 0.447.0 │ └── react 18.3.1 peer ├─┬ react 18.3.1 │ └── loose-envify 1.4.0 ├─┬ react-dom 18.3.1 │ ├── loose-envify 1.4.0 │ ├── react 18.3.1 peer │ └── scheduler 0.23.2 ├─┬ remotion 4.0.193 │ ├── react 18.3.1 peer │ └── react-dom 18.3.1 peer ├── tailwind-merge 2.5.3 └── zod 3.23.8 @tanstack/react-virtual 3.10.8 ├── @tanstack/virtual-core 3.10.8 ├─┬ react 18.3.1 peer │ └── loose-envify 1.4.0 └─┬ react-dom 18.3.1 peer ├── loose-envify 1.4.0 ├── react 18.3.1 peer └── scheduler 0.23.2 @vidstack/react 1.12.11 ├─┬ @floating-ui/dom 1.6.11 │ ├── @floating-ui/core 1.6.8 │ └── @floating-ui/utils 0.2.8 ├─┬ @types/react 18.3.11 peer │ ├── @types/prop-types 15.7.13 │ └── csstype 3.1.3 ├── media-captions 1.0.4 └─┬ react 18.3.1 peer └── loose-envify 1.4.0 class-variance-authority 0.7.0 └── clsx 2.0.0 clsx 2.1.1 feature-logger 0.0.23 ├── @blgc/types 0.0.7 └── @blgc/utils 0.0.19 feature-react 0.0.26 └─┬ react 18.3.1 peer └── loose-envify 1.4.0 feature-state 0.0.29 ├── @blgc/types 0.0.7 └── @blgc/utils 0.0.19 lucide-react 0.447.0 └─┬ react 18.3.1 peer └── loose-envify 1.4.0 next 14.2.14 ├── @next/env 14.2.14 ├── @next/swc-darwin-arm64 14.2.14 ├── @next/swc-darwin-x64 14.2.14 ├── @next/swc-linux-arm64-gnu 14.2.14 ├── @next/swc-linux-arm64-musl 14.2.14 ├── @next/swc-linux-x64-gnu 14.2.14 ├── @next/swc-linux-x64-musl 14.2.14 ├── @next/swc-win32-arm64-msvc 14.2.14 ├── @next/swc-win32-ia32-msvc 14.2.14 ├── @next/swc-win32-x64-msvc 14.2.14 ├─┬ @swc/helpers 0.5.5 │ ├── @swc/counter 0.1.3 │ └── tslib 2.7.0 ├─┬ busboy 1.6.0 │ └── streamsearch 1.1.0 ├── caniuse-lite 1.0.30001667 ├── graceful-fs 4.2.11 ├─┬ postcss 8.4.31 │ ├── nanoid 3.3.7 │ ├── picocolors 1.1.0 │ └── source-map-js 1.2.1 ├─┬ react 18.3.1 peer │ └── loose-envify 1.4.0 ├─┬ react-dom 18.3.1 peer │ ├── loose-envify 1.4.0 │ ├── react 18.3.1 peer │ └── scheduler 0.23.2 ├─┬ sass 1.79.4 peer │ ├── chokidar 4.0.1 │ ├── immutable 4.3.7 │ └── source-map-js 1.2.1 └─┬ styled-jsx 5.1.1 ├── @babel/core 7.25.7 peer ├── client-only 0.0.1 └── react 18.3.1 peer react 18.3.1 └─┬ loose-envify 1.4.0 └── js-tokens 4.0.0 react-dom 18.3.1 ├─┬ loose-envify 1.4.0 │ └── js-tokens 4.0.0 ├─┬ react 18.3.1 peer │ └── loose-envify 1.4.0 └─┬ scheduler 0.23.2 └── loose-envify 1.4.0 remotion 4.0.193 ├─┬ react 18.3.1 peer │ └── loose-envify 1.4.0 └─┬ react-dom 18.3.1 peer ├── loose-envify 1.4.0 ├── react 18.3.1 peer └── scheduler 0.23.2 tailwind-merge 2.5.3 tailwindcss-animate 1.0.7 └─┬ tailwindcss 3.4.13 peer ├── @alloc/quick-lru 5.2.0 ├── arg 5.0.2 ├── chokidar 3.6.0 ├── didyoumean 1.2.2 ├── dlv 1.1.3 ├── fast-glob 3.3.2 ├── glob-parent 6.0.2 ├── is-glob 4.0.3 ├── jiti 1.21.6 ├── lilconfig 2.1.0 ├── micromatch 4.0.8 ├── normalize-path 3.0.0 ├── object-hash 3.0.0 ├── picocolors 1.1.0 ├── postcss 8.4.47 ├── postcss-import 15.1.0 ├── postcss-js 4.0.1 ├── postcss-load-config 4.0.2 ├── postcss-nested 6.2.0 ├── postcss-selector-parser 6.1.2 ├── resolve 1.22.8 └── sucrase 3.35.0 devDependencies: @blgc/config 0.0.24 ├─┬ @next/eslint-plugin-next 14.2.14 peer │ └── glob 10.3.10 ├─┬ @vercel/style-guide 6.0.0 │ ├── @babel/core 7.25.7 │ ├── @babel/eslint-parser 7.25.7 │ ├── @next/eslint-plugin-next 14.2.14 peer │ ├── @rushstack/eslint-patch 1.10.4 │ ├── @typescript-eslint/eslint-plugin 7.18.0 │ ├── @typescript-eslint/parser 7.18.0 │ ├── eslint 8.57.1 peer │ ├── eslint-config-prettier 9.1.0 │ ├── eslint-import-resolver-alias 1.1.2 │ ├── eslint-import-resolver-typescript 3.6.3 │ ├── eslint-plugin-eslint-comments 3.2.0 │ ├── eslint-plugin-import 2.31.0 │ ├── eslint-plugin-jest 27.9.0 │ ├── eslint-plugin-jsx-a11y 6.10.0 │ ├── eslint-plugin-playwright 1.6.2 │ ├── eslint-plugin-react 7.37.1 │ ├── eslint-plugin-react-hooks 4.6.2 │ ├── eslint-plugin-testing-library 6.3.0 │ ├── eslint-plugin-tsdoc 0.2.17 │ ├── eslint-plugin-unicorn 51.0.1 │ ├── eslint-plugin-vitest 0.3.26 │ ├── prettier 3.3.3 peer │ ├── prettier-plugin-packagejson 2.5.2 │ └── typescript 5.6.2 peer ├─┬ eslint 8.57.1 peer │ ├── @eslint-community/eslint-utils 4.4.0 │ ├── @eslint-community/regexpp 4.11.1 │ ├── @eslint/eslintrc 2.1.4 │ ├── @eslint/js 8.57.1 │ ├── @humanwhocodes/config-array 0.13.0 │ ├── @humanwhocodes/module-importer 1.0.1 │ ├── @nodelib/fs.walk 1.2.8 │ ├── @ungap/structured-clone 1.2.0 │ ├── ajv 6.12.6 │ ├── chalk 4.1.2 │ ├── cross-spawn 7.0.3 │ ├── debug 4.3.7 │ ├── doctrine 3.0.0 │ ├── escape-string-regexp 4.0.0 │ ├── eslint-scope 7.2.2 │ ├── eslint-visitor-keys 3.4.3 │ ├── espree 9.6.1 │ ├── esquery 1.6.0 │ ├── esutils 2.0.3 │ ├── fast-deep-equal 3.1.3 │ ├── file-entry-cache 6.0.1 │ ├── find-up 5.0.0 │ ├── glob-parent 6.0.2 │ ├── globals 13.24.0 │ ├── graphemer 1.4.0 │ ├── ignore 5.3.2 │ ├── imurmurhash 0.1.4 │ ├── is-glob 4.0.3 │ ├── is-path-inside 3.0.3 │ ├── js-yaml 4.1.0 │ ├── json-stable-stringify-without-jsonify 1.0.1 │ ├── levn 0.4.1 │ ├── lodash.merge 4.6.2 │ ├── minimatch 3.1.2 │ ├── natural-compare 1.4.0 │ ├── optionator 0.9.4 │ ├── strip-ansi 6.0.1 │ └── text-table 0.2.0 ├─┬ eslint-config-turbo 2.1.3 │ ├── eslint 8.57.1 peer │ └── eslint-plugin-turbo 2.1.3 └─┬ vite-tsconfig-paths 5.0.1 ├── debug 4.3.7 ├── globrex 0.1.2 ├── tsconfck 3.1.3 └── vite 5.4.8 peer @types/node 22.7.5 └── undici-types 6.19.8 @types/react 18.3.11 ├── @types/prop-types 15.7.13 └── csstype 3.1.3 @types/react-dom 18.3.0 └─┬ @types/react 18.3.11 ├── @types/prop-types 15.7.13 └── csstype 3.1.3 postcss 8.4.47 ├── nanoid 3.3.7 ├── picocolors 1.1.0 └── source-map-js 1.2.1 tailwindcss 3.4.13 ├── @alloc/quick-lru 5.2.0 ├── arg 5.0.2 ├─┬ chokidar 3.6.0 │ ├── anymatch 3.1.3 │ ├── braces 3.0.3 │ ├── fsevents 2.3.3 │ ├── glob-parent 5.1.2 │ ├── is-binary-path 2.1.0 │ ├── is-glob 4.0.3 │ ├── normalize-path 3.0.0 │ └── readdirp 3.6.0 ├── didyoumean 1.2.2 ├── dlv 1.1.3 ├─┬ fast-glob 3.3.2 │ ├── @nodelib/fs.stat 2.0.5 │ ├── @nodelib/fs.walk 1.2.8 │ ├── glob-parent 5.1.2 │ ├── merge2 1.4.1 │ └── micromatch 4.0.8 ├─┬ glob-parent 6.0.2 │ └── is-glob 4.0.3 ├─┬ is-glob 4.0.3 │ └── is-extglob 2.1.1 ├── jiti 1.21.6 ├── lilconfig 2.1.0 ├─┬ micromatch 4.0.8 │ ├── braces 3.0.3 │ └── picomatch 2.3.1 ├── normalize-path 3.0.0 ├── object-hash 3.0.0 ├── picocolors 1.1.0 ├─┬ postcss 8.4.47 │ ├── nanoid 3.3.7 │ ├── picocolors 1.1.0 │ └── source-map-js 1.2.1 ├─┬ postcss-import 15.1.0 │ ├── postcss 8.4.47 peer │ ├── postcss-value-parser 4.2.0 │ ├── read-cache 1.0.0 │ └── resolve 1.22.8 ├─┬ postcss-js 4.0.1 │ ├── camelcase-css 2.0.1 │ └── postcss 8.4.47 peer ├─┬ postcss-load-config 4.0.2 │ ├── lilconfig 3.1.2 │ ├── postcss 8.4.47 peer │ └── yaml 2.5.1 ├─┬ postcss-nested 6.2.0 │ ├── postcss 8.4.47 peer │ └── postcss-selector-parser 6.1.2 ├─┬ postcss-selector-parser 6.1.2 │ ├── cssesc 3.0.0 │ └── util-deprecate 1.0.2 ├─┬ resolve 1.22.8 │ ├── is-core-module 2.15.1 │ ├── path-parse 1.0.7 │ └── supports-preserve-symlinks-flag 1.0.0 └─┬ sucrase 3.35.0 ├── @jridgewell/gen-mapping 0.3.5 ├── commander 4.1.1 ├── glob 10.4.5 ├── lines-and-columns 1.2.4 ├── mz 2.7.0 ├── pirates 4.0.6 └── ts-interface-checker 0.1.13 ```
JonnyBurger commented 1 month ago

Hmm yes that looks right.

I tried it myself and actually it worked! https://www.vidstack.io/docs/player/getting-started/installation/react?provider=remotion&styling=default-layout

Can you compare what's different between the Vidstack Example and yours?

(Although the scaling and positioning of the Remotion Player doesn't seem correct cc @mihar-22) Image

mihar-22 commented 1 month ago

I’ll look into it as soon as I can! Sorry for this issue landing here, prefer it be raised in our repo first. Feel free to close and I’ll address any sizing issues from our end :)

bennobuilder commented 1 month ago

I’ll look into it as soon as I can! Sorry for this issue landing here, prefer it be raised in our repo first. Feel free to close and I’ll address any sizing issues from our end :)

The sizing issue can be fixed with:

[data-remotion-container='true'] {
    transform-origin: top left;
}
bennobuilder commented 1 month ago

@JonnyBurger You're right a basic example setup with Vite also works for me 🚀

then I've to figure out why it doesn't work in my other project. The only difference is that the Remotion composition is a separate package so that I can import it into my backend and frontend. But this has nothing to do with this "Feature Request" anymore so I'll close the issue.

cheers and thanks for the help :)

Image

bennobuilder commented 1 month ago

@JonnyBurger @mihar-22 It looks like the issue is related to the Audio component. Adding the Remotion Audio component causes the same error I encountered in the other project.

"useMediaPlayback must be used inside a <BufferingContext>"

But I think this is an issue for the vidstack/player repo?

Image

Project setup

`RemotionVideo.tsx` ```tsx import { AbsoluteFill, Audio, useCurrentFrame } from "remotion"; export const RemotionVideo: React.FC = () => { const frame = useCurrentFrame(); return The current frame is {frame}. }; ```
`App.tsx` ```tsx import { useState } from 'react'; import './App.css'; import reactLogo from './assets/react.svg'; import viteLogo from '/vite.svg'; import '@vidstack/react/player/styles/default/layouts/video.css'; import '@vidstack/react/player/styles/default/theme.css'; import { MediaPlayer, MediaProvider } from '@vidstack/react'; import { defaultLayoutIcons, DefaultVideoLayout } from '@vidstack/react/player/layouts/default'; import { RemotionProviderLoader } from '@vidstack/react/player/remotion'; import { RemotionVideo } from './RemotionVideo'; function App() { const [count, setCount] = useState(0) return ( <>
Vite logo React logo

Vite + React

Edit src/App.tsx and save to test HMR

Click on the Vite and React logos to learn more

null, errorFallback: () => null, onError(e) { console.log({e}) }, }} > ) } export default App ```