@imgly/codesign-mcp 0.1.0

package/assets/docs/guide/create-video/limitations.md

@@ -0,0 +1,396 @@
+> This is one page of the CE.SDK Vanilla JS/TS documentation. For a complete overview, see the [Vanilla JS/TS Documentation Index](https://img.ly/docs/cesdk/js.md). For all docs in one file, see [llms-full.txt](./llms-full.txt.md).
+
+**Navigation:** [Guides](./guides.md) > [Create and Edit Videos](./create-video.md) > [Limitations](./create-video/limitations.md)
+
+---
+
+CE.SDK performs video processing client-side, providing privacy and
+responsiveness while introducing hardware-dependent constraints. This
+reference covers resolution limits, codec support, and platform-specific
+restrictions to help you plan video workflows within platform capabilities.
+
+![Video Limitations example showing the CE.SDK video editor](https://img.ly/docs/cesdk/./assets/browser.hero.webp)
+
+> **Reading time:** 8 minutes
+>
+> **Resources:**
+>
+> - [Download examples](https://github.com/imgly/cesdk-web-examples/archive/refs/tags/release-$UBQ_VERSION$.zip)
+> - [View source on GitHub](https://github.com/imgly/cesdk-web-examples/tree/release-$UBQ_VERSION$/guides-create-video-limitations-browser)
+> - [Open in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/v$UBQ_VERSION$/guides-create-video-limitations-browser)
+> - [Live demo](https://img.ly/docs/cesdk/examples/guides-create-video-limitations-browser/)
+
+Client-side video processing provides significant advantages for privacy and user experience, but it operates within the constraints of the user's device. Understanding these limitations helps you build applications that work reliably across different hardware configurations and browsers.
+
+```typescript file=@cesdk_web_examples/guides-create-video-limitations-browser/browser.ts reference-only
+import type { EditorPlugin, EditorPluginContext } from '@cesdk/cesdk-js';
+
+import {
+  BlurAssetSource,
+  CaptionPresetsAssetSource,
+  ColorPaletteAssetSource,
+  CropPresetsAssetSource,
+  DemoAssetSources,
+  EffectsAssetSource,
+  FiltersAssetSource,
+  PagePresetsAssetSource,
+  StickerAssetSource,
+  TextAssetSource,
+  TextComponentAssetSource,
+  TypefaceAssetSource,
+  UploadAssetSources,
+  VectorShapeAssetSource
+} from '@cesdk/cesdk-js/plugins';
+import { VideoEditorConfig } from './video-editor/plugin';
+import packageJson from './package.json';
+
+/**
+ * CE.SDK Plugin: Video Limitations Guide
+ *
+ * Demonstrates how to query video processing limitations in CE.SDK:
+ * - Querying maximum export size
+ * - Monitoring memory usage and availability
+ * - Understanding resolution and duration constraints
+ */
+class Example implements EditorPlugin {
+  name = packageJson.name;
+
+  version = packageJson.version;
+
+  async initialize({ cesdk }: EditorPluginContext): Promise<void> {
+    if (!cesdk) {
+      throw new Error('CE.SDK instance is required for this plugin');
+    }
+
+    await cesdk.addPlugin(new VideoEditorConfig());
+
+    // Add asset source plugins
+    await cesdk.addPlugin(new BlurAssetSource());
+    await cesdk.addPlugin(new CaptionPresetsAssetSource());
+    await cesdk.addPlugin(new ColorPaletteAssetSource());
+    await cesdk.addPlugin(new CropPresetsAssetSource());
+    await cesdk.addPlugin(
+      new UploadAssetSources({
+        include: [
+          'ly.img.image.upload',
+          'ly.img.video.upload',
+          'ly.img.audio.upload'
+        ]
+      })
+    );
+    await cesdk.addPlugin(
+      new DemoAssetSources({
+        include: [
+          'ly.img.templates.video.*',
+          'ly.img.image.*',
+          'ly.img.audio.*',
+          'ly.img.video.*'
+        ]
+      })
+    );
+    await cesdk.addPlugin(new EffectsAssetSource());
+    await cesdk.addPlugin(new FiltersAssetSource());
+    await cesdk.addPlugin(
+      new PagePresetsAssetSource({
+        include: [
+          'ly.img.page.presets.instagram.*',
+          'ly.img.page.presets.facebook.*',
+          'ly.img.page.presets.x.*',
+          'ly.img.page.presets.linkedin.*',
+          'ly.img.page.presets.pinterest.*',
+          'ly.img.page.presets.tiktok.*',
+          'ly.img.page.presets.youtube.*',
+          'ly.img.page.presets.video.*'
+        ]
+      })
+    );
+    await cesdk.addPlugin(new StickerAssetSource());
+    await cesdk.addPlugin(new TextAssetSource());
+    await cesdk.addPlugin(new TextComponentAssetSource());
+    await cesdk.addPlugin(new TypefaceAssetSource());
+    await cesdk.addPlugin(new VectorShapeAssetSource());
+
+    await cesdk.actions.run('scene.create', {
+      layout: 'DepthStack',
+      page: {
+        sourceId: 'ly.img.page.presets',
+        assetId: 'ly.img.page.presets.instagram.story',
+        color: { r: 0, g: 0, b: 0, a: 1 }
+      }
+    });
+
+    const engine = cesdk.engine;
+
+    // Query the maximum export dimensions supported by this device
+    const maxExportSize = engine.editor.getMaxExportSize();
+    console.log('Maximum export size:', maxExportSize, 'pixels');
+    // The maximum export size depends on the GPU texture size limit
+    // Typical values: 4096, 8192, or 16384 pixels
+
+    // Query current memory consumption
+    const usedMemory = engine.editor.getUsedMemory();
+    const usedMemoryMB = (usedMemory / (1024 * 1024)).toFixed(2);
+    console.log('Memory used:', usedMemoryMB, 'MB');
+
+    // Query available memory for video processing
+    const availableMemory = engine.editor.getAvailableMemory();
+    const availableMemoryMB = (availableMemory / (1024 * 1024)).toFixed(2);
+    console.log('Memory available:', availableMemoryMB, 'MB');
+    // Browser tabs typically cap around 2GB due to WebAssembly's 32-bit address space
+
+    // Calculate memory utilization percentage
+    const totalMemory = usedMemory + availableMemory;
+    const memoryUtilization = ((usedMemory / totalMemory) * 100).toFixed(1);
+    console.log('Memory utilization:', memoryUtilization, '%');
+
+    // Check if a specific export size is feasible
+    const desiredWidth = 3840; // 4K UHD
+    const desiredHeight = 2160;
+    const canExport4K =
+      desiredWidth <= maxExportSize && desiredHeight <= maxExportSize;
+    console.log(
+      'Can export at 4K UHD (3840x2160):',
+      canExport4K ? 'Yes' : 'No'
+    );
+
+    // Add a sample video to demonstrate the editor with video content
+    const videoUri = 'https://img.ly/static/ubq_video_samples/bbb.mp4';
+    const pages = engine.block.findByType('page');
+    const page = pages.length > 0 ? pages[0] : engine.scene.get();
+
+    const pageWidth = engine.block.getWidth(page);
+    const pageHeight = engine.block.getHeight(page);
+
+    // Create a video block that fills the page
+    const videoBlock = await engine.block.addVideo(
+      videoUri,
+      pageWidth,
+      pageHeight
+    );
+
+    // Position the video at the center of the page
+    engine.block.setPositionX(videoBlock, 0);
+    engine.block.setPositionY(videoBlock, 0);
+
+    // Select the video block
+    engine.block.setSelected(videoBlock, true);
+
+    // Re-check memory after loading video content
+    const usedAfterLoad = engine.editor.getUsedMemory();
+    const availableAfterLoad = engine.editor.getAvailableMemory();
+    const usedAfterLoadMB = (usedAfterLoad / (1024 * 1024)).toFixed(2);
+    const availableAfterLoadMB = (availableAfterLoad / (1024 * 1024)).toFixed(
+      2
+    );
+    console.log('After loading video:');
+    console.log('  Memory used:', usedAfterLoadMB, 'MB');
+    console.log('  Memory available:', availableAfterLoadMB, 'MB');
+
+    // Log summary of device capabilities
+    console.log('--- Device Capabilities Summary ---');
+    console.log('Max export dimension:', maxExportSize, 'px');
+    console.log('4K UHD support:', canExport4K ? 'Supported' : 'Not supported');
+    console.log(
+      'Initial memory:',
+      usedMemoryMB,
+      'MB used /',
+      availableMemoryMB,
+      'MB available'
+    );
+    console.log(
+      'Open the browser console to view detailed limitation information.'
+    );
+  }
+}
+
+export default Example;
+```
+
+## Resolution Limits
+
+Video resolution capabilities depend on hardware resources and WebAssembly memory constraints. CE.SDK supports up to 4K UHD for playback and export on capable hardware.
+
+Import resolution is bounded by WebAssembly's 32-bit address space and browser tab memory limits, which typically cap around 2GB. This means very high resolution video files may exceed available memory during processing. Playback and export at 4K depends on available GPU resources, and higher resolutions require proportionally more memory and processing power.
+
+Query the maximum export size before initiating exports to avoid failures:
+
+```typescript highlight-query-max-export-size
+// Query the maximum export dimensions supported by this device
+const maxExportSize = engine.editor.getMaxExportSize();
+console.log('Maximum export size:', maxExportSize, 'pixels');
+// The maximum export size depends on the GPU texture size limit
+// Typical values: 4096, 8192, or 16384 pixels
+```
+
+The maximum export size varies by device GPU capabilities. Typical values range from 4096 to 16384 pixels depending on the graphics hardware. Before exporting at high resolutions, verify the target dimensions don't exceed this limit:
+
+```typescript highlight-check-export-feasibility
+// Check if a specific export size is feasible
+const desiredWidth = 3840; // 4K UHD
+const desiredHeight = 2160;
+const canExport4K =
+  desiredWidth <= maxExportSize && desiredHeight <= maxExportSize;
+console.log('Can export at 4K UHD (3840x2160):', canExport4K ? 'Yes' : 'No');
+```
+
+## Duration Limits
+
+Video duration affects editing responsiveness and export time. CE.SDK optimizes for short-form content while supporting longer videos with performance trade-offs.
+
+Stories and reels up to 2 minutes are fully supported with smooth editing performance. Videos up to 10 minutes work well on modern hardware, with export times typically around 1 minute for this length. Longer videos are technically possible but may impact editing responsiveness on less capable devices.
+
+For long-form content, consider these approaches:
+
+- Split longer videos into shorter segments for editing
+- Use lower resolution previews during editing, then export at full quality
+- Test on target devices to establish acceptable duration limits for your use case
+
+## Frame Rate Support
+
+Frame rate affects both playback smoothness and export performance. Hardware acceleration significantly impacts high frame rate capabilities.
+
+30 FPS at 1080p is broadly supported across devices and provides smooth playback on most hardware. 60 FPS and high-resolution combinations benefit from hardware acceleration. When hardware acceleration is unavailable, high frame rate video may drop frames during preview playback, though exports will maintain the correct timing.
+
+Variable frame rate sources may have timing precision limitations. For best results with variable frame rate content, consider transcoding to constant frame rate before importing into CE.SDK.
+
+## Supported Codecs
+
+CE.SDK supports widely-adopted video and audio codecs, with some platform-specific variations in availability.
+
+### Video Codecs
+
+H.264/AVC in `.mp4` containers has universal support across all browsers and platforms. This is the most reliable codec choice for broad compatibility.
+
+H.265/HEVC in `.mp4` containers has platform-dependent support. Safari on macOS and iOS supports HEVC natively, while Chrome and Firefox support varies by operating system and codec availability.
+
+### Audio Codecs
+
+MP3 works in `.mp3` files or within `.mp4` containers, with universal browser support.
+
+AAC in `.m4a`, `.mp4`, or `.mov` containers is widely supported, though some browsers may require system codecs for encoding during export.
+
+## Browser and Platform Restrictions
+
+Browser capabilities depend on the host operating system, introducing platform-specific limitations that affect video processing.
+
+### Windows Limitations
+
+H.265 transparency is not supported on Windows hosts. If your workflow requires alpha channel video with HEVC, consider processing on macOS or using H.264 which supports alpha on all platforms.
+
+### Linux Limitations
+
+Chrome on Linux typically lacks encoder support for H.264 and AAC due to licensing restrictions in the Chrome Linux build. This means video imports and playback may work correctly, but exports may fail.
+
+If you're targeting Linux users, consider:
+
+- Recommending Firefox, which may have different codec support
+- Providing fallback export options
+- Using server-side export processing for Linux users
+
+Use the `video.decode.checkSupport` and `video.encode.checkSupport` actions to detect video capabilities programmatically and display appropriate user feedback. Alternatively, use `cesdk.utils.supportsVideoDecode()` and `cesdk.utils.supportsVideoEncode()` to check support silently without showing dialogs. See the [Actions API](./actions.md) for implementation details.
+
+### Chromium Limitations
+
+Chromium-based browsers (without proprietary codecs) don't include video codecs due to licensing. They may fall back to system libraries on some platforms, such as macOS, but support is not guaranteed. Video editing functionality may not work reliably in pure Chromium builds.
+
+### Mobile Browser Limitations
+
+Video editing is not supported on mobile browsers on any platform due to technical limitations causing performance issues. For mobile video editing capabilities, use the native mobile SDKs for iOS and Android, which provide full video support.
+
+## Hardware Requirements
+
+Device capabilities directly affect video processing performance. CE.SDK scales with available hardware resources.
+
+### Recommended Hardware
+
+| Platform         | Minimum Hardware                                                          |
+| ---------------- | ------------------------------------------------------------------------- |
+| Desktop          | Notebook or desktop released in the last 7 years with at least 4GB memory |
+| Mobile (Apple)   | iPhone 8, iPad (6th gen) or newer                                         |
+| Mobile (Android) | Phones and tablets released in the last 4 years                           |
+
+### GPU Considerations
+
+Hardware acceleration improves encoding and decoding performance significantly. High-resolution and high-frame-rate exports benefit most from GPU support. The maximum export size depends on the maximum texture size the device's GPU can allocate.
+
+Integrated graphics can handle most common video editing tasks. Discrete GPUs provide better performance for 4K content and complex compositions with multiple video layers.
+
+## Memory Constraints
+
+Client-side video processing operates within browser memory limits. Use the memory APIs to monitor consumption and make informed decisions about resource loading.
+
+Query current memory usage to understand how much has been consumed:
+
+```typescript highlight-query-memory-usage
+// Query current memory consumption
+const usedMemory = engine.editor.getUsedMemory();
+const usedMemoryMB = (usedMemory / (1024 * 1024)).toFixed(2);
+console.log('Memory used:', usedMemoryMB, 'MB');
+```
+
+Check how much memory remains available for additional resources:
+
+```typescript highlight-query-available-memory
+// Query available memory for video processing
+const availableMemory = engine.editor.getAvailableMemory();
+const availableMemoryMB = (availableMemory / (1024 * 1024)).toFixed(2);
+console.log('Memory available:', availableMemoryMB, 'MB');
+// Browser tabs typically cap around 2GB due to WebAssembly's 32-bit address space
+```
+
+WebAssembly uses a 32-bit address space, limiting the maximum addressable memory. Browser tabs typically cap around 2GB of memory, though this varies by browser and system configuration. Multiple video tracks and effects increase memory usage proportionally.
+
+Query memory APIs before loading additional video files to avoid out-of-memory conditions:
+
+```typescript highlight-monitor-memory-after-load
+// Re-check memory after loading video content
+const usedAfterLoad = engine.editor.getUsedMemory();
+const availableAfterLoad = engine.editor.getAvailableMemory();
+const usedAfterLoadMB = (usedAfterLoad / (1024 * 1024)).toFixed(2);
+const availableAfterLoadMB = (availableAfterLoad / (1024 * 1024)).toFixed(2);
+console.log('After loading video:');
+console.log('  Memory used:', usedAfterLoadMB, 'MB');
+console.log('  Memory available:', availableAfterLoadMB, 'MB');
+```
+
+## Export Size Limitations
+
+Export dimensions are bounded by GPU texture size limits. Always query `getMaxExportSize()` before initiating exports to ensure the requested dimensions are supported.
+
+The maximum export size varies by device GPU capabilities. Common limits include:
+
+- **4096 pixels**: Older integrated graphics
+- **8192 pixels**: Most modern integrated and discrete GPUs
+- **16384 pixels**: High-end discrete GPUs
+
+Consider target platform requirements when planning export dimensions. Mobile devices and web playback rarely benefit from resolutions above 1080p or 4K, so exporting at extreme resolutions may not provide practical value.
+
+## Troubleshooting
+
+Common issues developers encounter related to video limitations:
+
+| Issue                            | Cause                                       | Solution                                         |
+| -------------------------------- | ------------------------------------------- | ------------------------------------------------ |
+| Video export fails on Linux      | Chrome lacks H.264/AAC encoder support      | Use Firefox or implement server-side export      |
+| Slow playback at high resolution | Hardware cannot keep up with decoding       | Reduce preview resolution or use proxy editing   |
+| Export fails with large video    | Memory limits exceeded                      | Reduce resolution or split into shorter segments |
+| H.265 transparency not working   | Windows platform limitation                 | Use H.264 or process on macOS                    |
+| Mobile browser video not working | Mobile browsers don't support video editing | Use native mobile SDK instead                    |
+| Export size rejected             | Exceeds device GPU texture limits           | Query `getMaxExportSize()` and reduce dimensions |
+
+## API Reference
+
+| Method                               | Description                                                 |
+| ------------------------------------ | ----------------------------------------------------------- |
+| `engine.editor.getMaxExportSize()`   | Query the maximum export dimensions supported by the device |
+| `engine.editor.getAvailableMemory()` | Get available memory in bytes for video processing          |
+| `engine.editor.getUsedMemory()`      | Get current memory usage in bytes                           |
+
+---
+
+## More Resources
+
+- **[Vanilla JS/TS Documentation Index](https://img.ly/docs/cesdk/js.md)** - Browse all Vanilla JS/TS documentation
+- **[Complete Documentation](./llms-full.txt.md)** - Full documentation in one file (for LLMs)
+- **[Web Documentation](./js.md)** - Interactive documentation with examples
+- **[Support](mailto:support@img.ly)** - Contact IMG.LY support

package/assets/docs/guide/create-video/overview.md

@@ -0,0 +1,224 @@
+> This is one page of the CE.SDK Vanilla JS/TS documentation. For a complete overview, see the [Vanilla JS/TS Documentation Index](https://img.ly/docs/cesdk/js.md). For all docs in one file, see [llms-full.txt](./llms-full.txt.md).
+
+**Navigation:** [Guides](./guides.md) > [Create and Edit Videos](./create-video.md) > [Overview](./create-video/overview.md)
+
+---
+
+In addition to static designs, CE.SDK also allows you to create and edit videos. Working with videos introduces the concept of time into the scene.
+
+Each page in the scene has its own time axis within which its children can be placed. The `"playback/time"` property of each page controls the progress of time through the page.
+
+In order to add videos to your pages, you can add a block with a `"//ly.img.ubq/fill/video"` fill. As the playback time of the page progresses, the corresponding point in time of the video fill is rendered by the block.
+
+You can also customize the video fill's trim in order to control the portion of the video that should be looped while the block is visible.
+
+`//ly.img.ubq/audio` blocks can be added to the page in order to play an audio file during playback.
+
+The `playback/timeOffset` property controls after how many seconds the audio should begin to play, while the duration property defines how long the audio should play. The same APIs can be used for other design blocks as well, such as text or graphic blocks.
+
+Finally, the whole page can be exported as a video file using the `block.exportVideo` function.
+
+## A Note on Browser Support
+
+Video editing heavily relies on modern features like web codecs.
+A detailed list of supported browser versions can be found in our [Supported Browsers](./browser-support.md).
+Please also take note of [possible restrictions based on the host platform](./file-format-support.md) browsers are running on.
+
+## Creating the Scene
+
+First, we create a scene by calling the `scene.create()` API. Then we create a page, add it to the scene and define its dimensions. This page will hold our composition.
+
+```javascript
+const scene = engine.scene.create();
+
+const page = engine.block.create('page');
+engine.block.appendChild(scene, page);
+
+engine.block.setWidth(page, 1280);
+engine.block.setHeight(page, 720);
+```
+
+## Setting Page Durations
+
+Next, we define the duration of the page using the `setDuration(block: number, duration: number): void` API to be 20 seconds long. This will be the total duration of our exported video in the end.
+
+```javascript
+engine.block.setDuration(page, 20);
+```
+
+## Adding Videos
+
+In this example, we want to show two videos, one after the other. For this, we first create two graphic blocks and assign two `'video'` fills to them.
+
+```javascript
+const video1 = engine.block.create('graphic');
+engine.block.setShape(video1, engine.block.createShape('rect'));
+const videoFill = engine.block.createFill('video');
+engine.block.setString(
+  videoFill,
+  'fill/video/fileURI',
+  'https://cdn.img.ly/assets/demo/v4/ly.img.video/videos/pexels-drone-footage-of-a-surfer-barrelling-a-wave-12715991.mp4'
+);
+engine.block.setFill(video1, videoFill);
+
+const video2 = engine.block.create('graphic');
+engine.block.setShape(video2, engine.block.createShape('rect'));
+const videoFill2 = engine.block.createFill('video');
+engine.block.setString(
+  videoFill2,
+  'fill/video/fileURI',
+  'https://cdn.img.ly/assets/demo/v4/ly.img.video/videos/pexels-kampus-production-8154913.mp4'
+);
+engine.block.setFill(video2, videoFill2);
+```
+
+## Creating a Track
+
+While we could add the two blocks directly to the page and and manually set their sizes and time offsets, we can alternatively also use the `track` block to simplify this work. A `track` automatically adjusts the time offsets of its children to make sure that they play one after another without any gaps, based on each child's duration.
+
+Tracks themselves cannot be selected directly by clicking on the canvas, nor do they have any visual representation.
+
+We create a `track` block, add it to the page and add both videos in the order in which they should play as the track's children. Next, we use the `fillParent` API, which will resize all children of the track to the same dimensions as the page.
+
+The dimensions of a `track` are always derived from the dimensions of its children, so you should not call the `setWidth` or `setHeight` APIs on a track, but on its children instead if you can't use the `fillParent` API.
+
+```javascript
+const track = engine.block.create('track');
+engine.block.appendChild(page, track);
+engine.block.appendChild(track, video1);
+engine.block.appendChild(track, video2);
+engine.block.fillParent(track);
+```
+
+By default, each block has a duration of 5 seconds after it is created. If we want to show it on the page for a different amount of time, we can use the `setDuration` API.
+
+Note that we can just increase the duration of the first video block to 15 seconds without having to adjust anything about the second video. The `track` takes care of that for us automatically so that the second video starts playing after 15 seconds.
+
+```javascript
+engine.block.setDuration(video1, 15);
+```
+
+If the video is longer than the duration of the graphic block that it's attached to, it will cut off once the duration of the graphic is reached. If it is too short, the video will automatically loop for as long as its graphic block is visible.
+
+We can also manually define the portion of our video that should loop within the graphic using the `setTrimOffset(block: number, offset: number): void` and `setTrimLength(block: number, length: number): void` APIs. We use the trim offset to cut away the first second of the video and the trim length to only play 10 seconds of the video. Since our graphic is 15 seconds long, the trimmed video will be played fully once and then start looping for the remaining 5 seconds.
+
+```javascript
+/* Make sure that the video is loaded before calling the trim APIs. */
+await engine.block.forceLoadAVResource(videoFill);
+engine.block.setTrimOffset(videoFill, 1);
+engine.block.setTrimLength(videoFill, 10);
+```
+
+We can control if a video will loop back to its beginning by calling `setLooping(block: number, looping: boolean): void`. Otherwise, the video will simply hold its last frame instead and audio will stop playing. Looping behavior is activated for all blocks by default.
+
+```javascript
+engine.block.setLooping(videoFill, true);
+```
+
+## Audio
+
+If the video of a video fill contains an audio track, that audio will play automatically by default when the video is playing. We can mute it by calling `setMuted(block: number, muted: boolean): void`.
+
+```javascript
+engine.block.setMuted(videoFill, true);
+```
+
+We can also add audio-only files to play together with the contents of the page by adding an `'audio'` block to the page and assigning it the URL of the audio file.
+
+```javascript
+const audio = engine.block.create('audio');
+engine.block.appendChild(page, audio);
+engine.block.setString(
+  audio,
+  'audio/fileURI',
+  'https://cdn.img.ly/assets/demo/v3/ly.img.audio/audios/far_from_home.m4a'
+);
+```
+
+We can adjust the volume level of any audio block or video fill by calling `setVolume(block: number, volume: number): void`. The volume is given as a fraction in the range of 0 to 1.
+
+```javascript
+/* Set the volume level to 70%. */
+engine.block.setVolume(audio, 0.7);
+```
+
+By default, our audio block will start playing at the very beginning of the page. We can change this by specifying how many seconds into the scene it should begin to play using the `setTimeOffset(block: number, offset: number): void` API.
+
+```javascript
+/* Start the audio after two seconds of playback. */
+engine.block.setTimeOffset(audio, 2);
+```
+
+By default, our audio block will have a duration of 5 seconds. We can change this by specifying its duration in seconds by using the `setDuration(block: number, duration: number): void` API.
+
+```javascript
+/* Give the Audio block a duration of 7 seconds. */
+engine.block.setDuration(audio, 7);
+```
+
+## Exporting Video
+
+You can start exporting the entire page as a video file by calling `exportVideo()`. The encoding process will run in the background. You can get notified about the progress of the encoding process by the `progressCallback`. It will be called whenever another frame has been encoded.
+
+Since the encoding process runs in the background the engine will stay interactive. So, you can continue to use the engine to manipulate the scene. Please note that these changes won't be visible in the exported video file because the scene's state has been frozen at the start of the export.
+
+```javascript
+/* Export page as mp4 video. */
+const videoBlob = await engine.block.exportVideo(page, {
+  mimeType: 'video/mp4',
+  onProgress: (renderedFrames, encodedFrames, totalFrames) => {
+    console.log(
+      'Rendered',
+      renderedFrames,
+      'frames and encoded',
+      encodedFrames,
+      'frames out of',
+      totalFrames
+    );
+  }
+});
+
+/* Download video blob. */
+let anchor = document.createElement('a');
+anchor.href = URL.createObjectURL(videoBlob);
+anchor.download = 'exported-video.mp4';
+anchor.click();
+```
+
+## Exporting Audio
+
+You can export just the audio from your video scene by calling `exportAudio()`. This allows you to extract the audio track separately, whether from an entire page, a single audio block, a video block with audio, or a track containing multiple audio sources.
+
+The audio export process runs in a background worker, similar to video export, keeping the main engine responsive. You can monitor the progress through the `onProgress` callback.
+
+```javascript
+/* Export page audio as an WAV audio. */
+const audioBlob = await engine.block.exportAudio(page, {
+  mimeType: 'audio/wav',
+  onProgress: (renderedFrames, encodedFrames, totalFrames) => {
+    console.log(
+      'Rendered',
+      renderedFrames,
+      'frames and encoded',
+      encodedFrames,
+      'frames out of',
+      totalFrames
+    );
+  }
+});
+
+/* Download audio blob. */
+anchor = document.createElement('a');
+anchor.href = URL.createObjectURL(audioBlob);
+anchor.download = 'exported-audio.wav';
+anchor.click();
+```
+
+---
+
+## More Resources
+
+- **[Vanilla JS/TS Documentation Index](https://img.ly/docs/cesdk/js.md)** - Browse all Vanilla JS/TS documentation
+- **[Complete Documentation](./llms-full.txt.md)** - Full documentation in one file (for LLMs)
+- **[Web Documentation](./js.md)** - Interactive documentation with examples
+- **[Support](mailto:support@img.ly)** - Contact IMG.LY support