Remotion Best Practices Skill 安全审计

8283const loadCesium = () =>84	new Promise<any>((resolve, reject) => {85		if ((window as any).Cesium) return resolve((window as any).Cesium);86		(window as any).CESIUM_BASE_URL = CDN;87		const css = document.createElement('link');88		css.rel = 'stylesheet';89		css.href = `${CDN}Widgets/widgets.css`;90		document.head.appendChild(css);91		const script = document.createElement('script');92		script.src = `${CDN}Cesium.js`;93		script.onload = () => resolve((window as any).Cesium);94		script.onerror = () =>95			reject(new Error(`Failed to load CesiumJS ${CESIUM_VER}`));96		document.head.appendChild(script);97	});

37381. Copy `assets/CesiumFlythrough.tsx`, a path JSON and `assets/example-Root.tsx` into the Remotion39   project, or import the component directly.402. Supply the camera route as `[longitude, latitude][]`. Use only meaningful control points; do not hand-author dozens of tiny corrections.

1314By default this guide uses **ElevenLabs** as the TTS provider (`ELEVENLABS_API_KEY` environment variable). Users may substitute any TTS service that can produce an audio file.1516If the user has not specified a TTS provider, recommend ElevenLabs and ask for their API key.1718Ensure the environment variable is available when running the generation script:19

30```ts title="generate-voiceover.ts"31const response = await fetch(32  `https://api.elevenlabs.io/v1/text-to-speech/${voiceId}`,33  {34    method: "POST",35    headers: {36      "xi-api-key": process.env.ELEVENLABS_API_KEY!,37      "Content-Type": "application/json",38      Accept: "audio/mpeg",39    },

402. Install `@remotion/lambda` using `npx remotion add @remotion/lambda`.413. Create the Lambda role policy, Lambda role, IAM user, user access key, and user policy from the generated Remotion policy commands.424. Store credentials in `.env` using `REMOTION_AWS_ACCESS_KEY_ID` and `REMOTION_AWS_SECRET_ACCESS_KEY`; never ask the user to paste secrets into chat.435. Run the Lambda policy validator if the user wants to verify permissions before deploying; use the user's package manager or the command shown in the docs (`npx remotion lambda policies validate`).446. Deploy the Lambda function. Mention that functions are bound to the Remotion version and must be redeployed after Remotion upgrades.

107```tsx108const calculateMetadata: CalculateMetadataFunction<Props> = async ({109  props,110  abortSignal,111}) => {112  const response = await fetch(props.dataUrl, { signal: abortSignal });113  const data = await response.json();114

123124The `abortSignal` cancels stale requests when props change in the Studio.125

37| 403 on tiles in headless                                  | Domain-locked MapTiler key                                                                                    | Use an **unrestricted** key.                                                                        |38| Google root tileset returns 403                           | Map Tiles API disabled, billing absent, wrong key, or application restriction blocks local headless rendering | Enable Map Tiles API and billing; restrict the key to that API while allowing the Remotion request. |39| Google scene shows a duplicate/competing surface          | MapTiler or the Cesium globe is still enabled                                                                 | Do not add MapTiler; set `viewer.scene.globe.show=false`.                                           |

2829const MAPTILER_KEY = process.env.REMOTION_MAPTILER_KEY;30const GOOGLE_MAPS_API_KEY = process.env.REMOTION_GOOGLE_MAPS_API_KEY;31const CESIUM_VER = '1.143';

210					new C.UrlTemplateImageryProvider({211						url: `https://api.maptiler.com/tiles/satellite-v2/{z}/{x}/{y}.jpg?key=${MAPTILER_KEY}`,212						maximumLevel: 20,213					}),214				);215				viewer.terrainProvider = await C.CesiumTerrainProvider.fromUrl(216					`https://api.maptiler.com/tiles/terrain-quantized-mesh-v2/?key=${MAPTILER_KEY}`,217					{requestVertexNormals: true},

227				viewer.scene.globe.show = false;228				const tileset = await C.Cesium3DTileset.fromUrl(229					`https://tile.googleapis.com/v1/3dtiles/root.json?key=${GOOGLE_MAPS_API_KEY}`,230					{

1819// Sample route reveal. Replace the imported sample geometry, names, timing, and visual tokens in the20// consuming production. The renderer stays static; approved centre/zoom motion is a CSS plate transform.2122maptilersdk.config.apiKey = process.env.REMOTION_MAPTILER_KEY as string;23

208			if (mode === 'landscape') {209				viewer.imageryLayers.addImageryProvider(210					new C.UrlTemplateImageryProvider({211						url: `https://api.maptiler.com/tiles/satellite-v2/{z}/{x}/{y}.jpg?key=${MAPTILER_KEY}`,212						maximumLevel: 20,213					}),214				);215				viewer.terrainProvider = await C.CesiumTerrainProvider.fromUrl(216					`https://api.maptiler.com/tiles/terrain-quantized-mesh-v2/?key=${MAPTILER_KEY}`,217					{requestVertexNormals: true},218				);

3031Create a billing-enabled Google Map Tiles API key by following32https://developers.google.com/maps/documentation/tile/get-api-key. Enable the **Map Tiles API** and33restrict the key to that API. Ensure its application restriction permits local headless Remotion34requests.35

1112If a project already exists, skip this.13Ensure Node.js and Git is installed, and the current folder is appropriate for starting a new project.14

1415Scaffold one using:1617```bash18npx create-video@latest --yes --blank --no-tailwind my-video19cd my-video20npm i21```22

25- Do not install `@types/mapbox-gl`; Mapbox GL JS ships its own types.26- Keep required provider attribution visible and verify current provider terms before rendering.27- Record the source and effective date of custom or disputed geography.28- Inspect rendered pixels, not only Studio playback, at every required aspect ratio.

78Create the Viewer with `baseLayer: false`, UI widgets disabled, and9`contextOptions.webgl.preserveDrawingBuffer: true`. Never hide the credit display.10

139			bearing: END.bearing,140			interactive: false,141			attributionControl: true,142			navigationControl: false,143			geolocateControl: false,144			maptilerLogo: true,145			fadeDuration: 0,146			canvasContextAttributes: {preserveDrawingBuffer: true},

23- Do not add a `mapInstance.remove()` cleanup function; it can interfere with Remotion's render lifecycle.24- Use Mapbox style URLs such as `mapbox://styles/mapbox/standard` or a user-provided custom style.25- Do not install `@types/mapbox-gl`; Mapbox GL JS ships its own types.26- Keep required provider attribution visible and verify current provider terms before rendering.27- Record the source and effective date of custom or disputed geography.28- Inspect rendered pixels, not only Studio playback, at every required aspect ratio.

8182		const mapInstance = new maplibregl.Map({83			container: containerRef.current,84			style: 'https://demotiles.maplibre.org/style.json',85			center: zurich,86			zoom: 7,87			interactive: false,88			attributionControl: false,89			fadeDuration: 0,

6364Strip clutter on `load`: remove `symbol` layers (place labels) and `/other border/i` (admin-1 inner borders); hide the logo via CSS. Keep country + disputed borders.65

75- Settle landscapes on `globe.tilesLoaded` and cities on `tileset.tilesLoaded`.76- Keep all provider attribution visible.77- Record the source and effective date of custom or disputed geography.

106			interactive: false,107			attributionControl: false,108			fadeDuration: 0,

87			interactive: false,88			attributionControl: false,89			fadeDuration: 0,