upstream-twenty/packages/twenty-apps/examples/media-notes/README.md

Media Notes

Example Twenty app demonstrating media recording with the standard web APIs: the sandbox polyfills navigator.mediaDevices.getUserMedia and MediaRecorder, so the recording code reads like it would in any web page. The only Twenty-specific call is uploadFile from twenty-sdk/front-component, which stores the recorded blob in a FILES field.

A pinned global command ("Record media note") opens a front component that records a voice or video note with its own UI, uploads it on stop, attaches it to a Media note record, then plays the stored file back from its signed URL.

Run the e2e regression test

The test drives the full flow against a local Twenty instance with Chromium's fake media devices (no real microphone or camera needed):

Cookie sessions are credentialed, so the front only authenticates from the API's own origin — workspace subdomains included, which the login flow lands on. Serve the front build from the server rather than on its own port:

# from the repo root
npx nx build twenty-sdk
NODE_ENV=production npx nx build twenty-front
npx nx build twenty-server
cp -r packages/twenty-front/build packages/twenty-server/dist/front

# start:ci, not start: the watch target would rimraf dist and delete the front
npx nx start:ci twenty-server &

node packages/twenty-sdk/dist/cli.cjs app:publish --private && node packages/twenty-sdk/dist/cli.cjs app:install

# then, from this directory
FRONT_BASE_URL=http://localhost:3000 npx playwright test --project=setup --project=chromium

It asserts the app-owned recording timer, the playback preview, the uploaded file reference received by the component, and the cancel path — screenshots of each step land in e2e/.results/screenshots/.