Zvid

https://docs.zvid.io/docs/
Admin
Zvid is a platform for building and generating videos programmatically from JSON using FFmpeg, with...
Tokens:86,566
Snippets:567
Trust Score:4.5
Update:8 months ago
Show doc for...
Tokens:
Raw
### Initialize Zvid Project and Install Dependencies

Source: https://docs.zvid.io/docs/quick-start

This snippet demonstrates how to create a new project directory, navigate into it, initialize a Node.js project using npm, and install the 'zvid' package. These are the foundational steps before creating any video scripts.

```bash
mkdir my-video-project
cd my-video-project
npm init -y
npm install zvid
```

--------------------------------

### Verify Authentication

Source: https://docs.zvid.io/docs/api/getting-started

Verify your API key by fetching your user profile and credit balance.

```APIDOC
## GET /api/user/profile

### Description
Fetches the current user's profile information and credit balance.

### Method
GET

### Endpoint
/api/user/profile

### Parameters
#### Headers
- **x-api-key** (string) - Required - Your Zvid API key.

### Request Example
```bash
curl -X GET https://api.zvid.io/api/user/profile \
  -H "x-api-key: YOUR_API_KEY"
```

### Response
#### Success Response (200)
- **user** (object) - User profile details.
  - **id** (integer) - User ID.
  - **email** (string) - User's email address.
  - **first_name** (string) - User's first name.
  - **last_name** (string) - User's last name.
  - **email_verified** (boolean) - Indicates if the email has been verified.
  - **created_at** (string) - Timestamp of account creation (ISO 8601 format).
- **credits** (object) - Credit balance information.
  - **balance** (integer) - Total available credits.
  - **reserved** (integer) - Credits reserved for ongoing or pending jobs.
  - **available** (integer) - Credits that can be used for new renders.

#### Response Example
```json
{
  "user": {
    "id": 123,
    "email": "user@example.com",
    "first_name": "John",
    "last_name": "Doe",
    "email_verified": true,
    "created_at": "2025-09-01T00:00:00.000Z"
  },
  "credits": {
    "balance": 1800,
    "reserved": 0,
    "available": 1800
  }
}
```
```

--------------------------------

### Submit Render Job

Source: https://docs.zvid.io/docs/api/getting-started

Submit a request to render a video with specified parameters.

```APIDOC
## POST /api/render/api-key

### Description
Submits a new video rendering job to the Zvid API.

### Method
POST

### Endpoint
/api/render/api-key

### Parameters
#### Headers
- **x-api-key** (string) - Required - Your Zvid API key.
- **Content-Type** (string) - Required - Must be `application/json`.

#### Request Body
- **payload** (object) - Required - Contains the video rendering specifications.
  - **width** (integer) - Required - The width of the video in pixels.
  - **height** (integer) - Required - The height of the video in pixels.
  - **duration** (number) - Required - The duration of the video in seconds (minimum 0.1).
  - **frameRate** (integer) - Required - The frame rate of the video.
  - **backgroundColor** (string) - Optional - Background color in hexadecimal format (e.g., `#000000`).
  - **visuals** (array) - Required - An array of visual elements to include in the video.
    - **type** (string) - Required - Type of visual element (e.g., `TEXT`).
    - **text** (string) - Required if type is `TEXT` - The text content.
    - **x** (integer) - Required - The X-coordinate for positioning.
    - **y** (integer) - Required - The Y-coordinate for positioning.
    - **style** (object) - Optional - Styling for the visual element.
      - **fontSize** (integer) - Font size for text.
      - **color** (string) - Text color in hexadecimal format.
      - **fontFamily** (string) - Font family for text.

### Request Example
```json
{
  "payload": {
    "width": 1920,
    "height": 1080,
    "duration": 10,
    "frameRate": 30,
    "backgroundColor": "#000000",
    "visuals": [
      {
        "type": "TEXT",
        "text": "Hello, Zvid!",
        "x": 960,
        "y": 540,
        "style": {
          "fontSize": 72,
          "color": "#ffffff",
          "fontFamily": "Arial"
        }
      }
    ]
  }
}
```

### Response
#### Success Response (200)
- **jobId** (string) - Unique identifier for the render job.
- **status** (string) - Current status of the job (e.g., `queued`, `active`, `completed`, `failed`).
- **queuePosition** (integer) - The job's position in the rendering queue.
- **creditsReserved** (integer) - The number of credits reserved for this job.

#### Response Example
```json
{
  "jobId": "550e8400-e29b-41d4-a716-446655440000",
  "status": "queued",
  "queuePosition": 2,
  "creditsReserved": 15
}
```
```

--------------------------------

### Zvid Resolution Presets for Social Media and Video

Source: https://docs.zvid.io/docs/quick-start

This JavaScript code demonstrates how to configure video projects for various social media platforms and traditional video formats using Zvid's preset resolutions. It shows examples for Instagram, YouTube Shorts, TikTok, HD, Full HD, and custom dimensions.

```javascript
// Social Media Examples
const instagramPost = {
  name: "insta-post",
  resolution: "instagram-post", // 1080×1080 square
  duration: 15,
  visuals: [
    /* ... */
  ],
};

const youtubeShort = {
  name: "yt-short",
  resolution: "youtube-short", // 1080×1920 vertical
  duration: 60,
  visuals: [
    /* ... */
  ],
};

const tiktokVideo = {
  name: "tiktok-vid",
  resolution: "tiktok", // 1080×1920 vertical
  duration: 30,
  visuals: [
    /* ... */
  ],
};

// Traditional Video Formats
const hdVideo = {
  name: "hd-content",
  resolution: "hd", // 1280×720
  duration: 120,
  visuals: [
    /* ... */
  ],
};

const fullHdVideo = {
  name: "fullhd-content",
  resolution: "full-hd", // 1920×1080
  duration: 180,
  visuals: [
    /* ... */
  ],
};

// Custom dimensions (when you need specific sizes)
const customVideo = {
  name: "custom-content",
  resolution: "custom", // or omit resolution property
  width: 1600,
  height: 900,
  duration: 90,
  visuals: [
    /* ... */
  ],
};
```

--------------------------------

### Error Handling

Source: https://docs.zvid.io/docs/api/getting-started

Information on how the API handles errors, including common error responses.

```APIDOC
## Error Responses

### Validation Error (400)

#### Description
This error occurs when the request payload fails validation checks.

#### Response Body Example
```json
{
  "error": "Validation failed",
  "message": "Please check your input and try again",
  "details": [
    {
      "field": "payload.duration",
      "message": "Duration must be at least 0.1 seconds"
    }
  ]
}
```

#### Solution
Review the `details` array in the response to identify the specific fields that caused the validation failure and correct your request accordingly.
```

--------------------------------

### Get Credit Balance API Request Examples

Source: https://docs.zvid.io/docs/api/endpoints/get-credit-balance

Provides example code snippets in various programming languages to fetch the credit balance from the Zvid.io API. These examples show how to set up the HTTP request, include the necessary API key for authentication, and handle the response.

```csharp
var client = new HttpClient();
var request = new HttpRequestMessage(HttpMethod.Get, "https://docs.zvid.io/api/credits/balance");
request.Headers.Add("Accept", "application/json");
request.Headers.Add("x-api-key", "<x-api-key>");
var response = await client.SendAsync(request);
response.EnsureSuccessStatusCode();
Console.WriteLine(await response.Content.ReadAsStringAsync());
```

--------------------------------

### Making API Requests with JavaScript/Node.js

Source: https://docs.zvid.io/docs/api/authentication

Example of how to authenticate and make a GET request to the Zvid API using JavaScript's fetch API. It shows how to include the API key in the request headers.

```javascript
const response = await fetch("https://api.zvid.io/api/user/profile", {
  headers: {
    "x-api-key":
      "zvid_1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef",
  },
});

const data = await response.json();
console.log(data);
```

--------------------------------

### Check Credit Balance

Source: https://docs.zvid.io/docs/api/getting-started

Check your current available credit balance before submitting a render job.

```APIDOC
## GET /api/credits/balance

### Description
Retrieves the current credit balance of the authenticated user.

### Method
GET

### Endpoint
/api/credits/balance

### Parameters
#### Headers
- **x-api-key** (string) - Required - Your Zvid API key.

### Request Example
```bash
curl -X GET https://api.zvid.io/api/credits/balance \
  -H "x-api-key: YOUR_API_KEY"
```

### Response
#### Success Response (200)
- **balance** (integer) - Total available credits.
- **reserved** (integer) - Credits reserved for ongoing or pending jobs.
- **available** (integer) - Credits that can be used for new renders.

#### Response Example
```json
{
  "balance": 1000,
  "reserved": 0,
  "available": 1000
}
```
```

--------------------------------

### Install FFmpeg on Windows using Chocolatey

Source: https://docs.zvid.io/docs/installation

Installs FFmpeg on Windows using the Chocolatey package manager. This is the recommended method for Windows users. Ensure Chocolatey is installed before running this command.

```bash
# Install Chocolatey if you haven't already  
# Then install FFmpeg  
choco install ffmpeg
```

--------------------------------

### Project Timeline Timing Configuration

Source: https://docs.zvid.io/docs/api-reference/audio-elements

Example showing how to define when an audio element should start and end within the project's timeline using `enter` and `exit` properties. This controls the audio's presence in the video sequence.

```javascript
// Audio plays from 5s to 25s in the project
{
  enter: 5,
  exit: 25
}
```

--------------------------------

### Install FFmpeg on Ubuntu/Debian Linux

Source: https://docs.zvid.io/docs/installation

Installs FFmpeg on Ubuntu or Debian-based Linux distributions using the apt package manager. This command updates the package list and then installs FFmpeg.

```bash
sudo apt update  
sudo apt install ffmpeg
```

--------------------------------

### Quick SVG Animation Example

Source: https://docs.zvid.io/docs/api-reference/animations

Shows a quick entrance and exit animation for an SVG element. Highlights short durations for enterEnd and exitEnd properties.

```json
{
  type: "SVG",
  svg: "<svg width=\"200\" height=\"150\" viewBox=\"0 0 200 150\" xmlns=\"http://www.w3.org/2000/svg\"><rect x=\"0\" y=\"0\" width=\"200\" height=\"150\" fill=\"#ff6b35\" /></svg>",
  x: 500, y: 200,
  enterBegin: 5,
  enterEnd: 5.5,      // 0.5-second quick entrance
  exitBegin: 7,
  exitEnd: 7.3,       // 0.3-second quick exit
  enterAnimation: "dissolve",
  exitAnimation: "dissolve"
}
```

--------------------------------

### Clone Zvid Repository and Install Dependencies

Source: https://docs.zvid.io/docs/installation

Clones the Zvid project repository from GitHub and installs its development dependencies using yarn. This is the first step for setting up the Zvid project for development.

```bash
git clone https://github.com/Zvid-io/zvid.git  
cd zvid  

yarn install
```

--------------------------------

### Run Zvid Package Test

Source: https://docs.zvid.io/docs/installation

Executes the `test.js` file using Node.js to verify the Zvid package installation. Ensure you have created the `test.js` file with the provided content before running this command.

```bash
node test.js
```

--------------------------------

### Submit First Zvid API Render Job

Source: https://docs.zvid.io/docs/api/getting-started

This snippet demonstrates submitting a POST request to the Zvid API to create a simple 10-second video with text. It includes the API key, content type, and a JSON payload specifying video dimensions, duration, and visual elements.

```curl
curl -X POST https://api.zvid.io/api/render/api-key \
  -H "x-api-key: YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "payload": {
      "width": 1920,
      "height": 1080,
      "duration": 10,
      "frameRate": 30,
      "backgroundColor": "#000000",
      "visuals": [
        {
          "type": "TEXT",
          "text": "Hello, Zvid!",
          "x": 960,
          "y": 540,
          "style": {
            "fontSize": 72,
            "color": "#ffffff",
            "fontFamily": "Arial"
          }
        }
      ]
    }
  }'
```

--------------------------------

### Verify Node.js and FFmpeg Installation

Source: https://docs.zvid.io/docs/installation

Checks if Node.js and FFmpeg are installed and accessible in your system's PATH. The Node.js command should output v18.0.0 or higher, and the FFmpeg command should display version information.

```bash
node --version
# Should output v18.0.0 or higher  

ffmpeg -version
# Should output FFmpeg version information
```

--------------------------------

### Run Zvid Video Creation Script

Source: https://docs.zvid.io/docs/quick-start

This command executes the JavaScript file created in the previous step using Node.js. It will process the video project configuration and generate the video file.

```bash
node create-video.js
```

--------------------------------

### Source Audio Timing Configuration

Source: https://docs.zvid.io/docs/api-reference/audio-elements

Example demonstrating how to specify the start and end points within the source audio file using `audioBegin`, `audioEnd`, and `audioDuration`. This is useful for extracting specific parts of a longer audio track.

```javascript
// Play seconds 30-90 from a 3-minute audio file
{
  audioBegin: 30,
  audioEnd: 90,
  audioDuration: 180
}
```

--------------------------------

### Install FFmpeg on CentOS/RHEL/Fedora Linux

Source: https://docs.zvid.io/docs/installation

Installs FFmpeg on CentOS, RHEL, or Fedora Linux distributions using either yum or dnf package managers. Use `yum` for older systems and `dnf` for newer ones.

```bash
# CentOS/RHEL  
sudo yum install ffmpeg  

# Fedora  
sudo dnf install ffmpeg
```

--------------------------------

### Simple Fade Animation Example

Source: https://docs.zvid.io/docs/api-reference/animations

Demonstrates a simple fade-in and fade-out animation for text content. Specifies timing for both entrance and exit.

```json
{
  type: "TEXT",
  text: "Hello World",
  x: 640, y: 360,
  enterBegin: 0,
  enterEnd: 1,        // 1-second fade in
  exitBegin: 9,
  exitEnd: 10,        // 1-second fade out
  enterAnimation: "fade",
  exitAnimation: "fade"
}
```

--------------------------------

### Build Zvid Package

Source: https://docs.zvid.io/docs/installation

Builds the Zvid package after cloning the repository and installing dependencies. This command compiles the source code into a distributable format.

```bash
yarn build
```

--------------------------------

### Quick Examples

Source: https://docs.zvid.io/docs/api-reference

Provides code examples for creating basic text, image, video, and audio elements.

```APIDOC
## Quick Examples

### Basic Text Element
```json
{
  "type": "TEXT",
  "text": "Hello World",
  "x": 640, "y": 360,
  "style": {
    "fontSize": "48px",
    "color": "#000000",
    "textAlign": "center"
  }
}
```

### Basic Image Element
```json
{
  "type": "IMAGE",
  "src": "https://images.pexels.com/photos/32972375/pexels-photo-32972375.jpeg",
  "x": 100, "y": 100,
  "width": 607, "height": 910
}
```

### Basic Video Element
```json
{
  "type": "VIDEO",
  "src": "https://videos.pexels.com/video-files/1409899/1409899-sd_640_360_25fps.mp4",
  "videoEnd": 10 // just take the first 10 seconds of the video.
}
```

### Basic Audio Element
```json
{
  "src": "https://cdn.pixabay.com/audio/2025/04/21/audio_ed6f0ed574.mp3",
  "volume": 0.5
}
```
```

--------------------------------

### Timing Coordination Example

Source: https://docs.zvid.io/docs/api-reference/audio-elements

Demonstrates synchronizing source audio timing (`audioBegin`, `audioEnd`) with project timeline timing (`enter`, `exit`). This example shows how to use a specific segment of audio and control its playback duration in the video.

```javascript
// Use 20 seconds of audio (from 10s-30s in source)
// playing from 5s-25s in project timeline
{
  src: "audio.mp3",
  audioBegin: 10,
  audioEnd: 30,
  audioDuration: 60,
  enter: 5,
  exit: 25
}
```

--------------------------------

### Example Project Configuration Object (JavaScript)

Source: https://docs.zvid.io/docs/api-reference

An example of how to define a project configuration object for video rendering. This object specifies basic properties like name, duration, and placeholders for visual and audio elements.

```javascript
const project = {
  name: "my-video",
  duration: 30,
  visuals: [
    // ... visual elements
  ],
  audios: [
    // ... audio elements
  ],
};
```

--------------------------------

### Check Zvid API Credit Balance

Source: https://docs.zvid.io/docs/api/getting-started

This snippet shows how to check your available Zvid API credits. It requires your API key in the 'x-api-key' header.

```curl
curl -X GET https://api.zvid.io/api/credits/balance \
  -H "x-api-key: YOUR_API_KEY"
```

--------------------------------

### Simple Captions Example

Source: https://docs.zvid.io/docs/api-reference/subtitle

An example demonstrating how to structure basic captions with word-level timing.

```APIDOC
## Basic Examples

### Simple Captions

This example shows a subtitle object with a single caption segment, including start and end times, and an array of words with their respective timings.

```json
{
  "subtitle": {
    "captions": [
      {
        "start": 0.5,
        "end": 2.0,
        "text": "Welcome to our video",
        "words": [
          { "start": 0.5, "end": 0.9, "text": "Welcome" },
          { "start": 0.9, "end": 1.1, "text": "to" },
          { "start": 1.1, "end": 1.4, "text": "our" },
          { "start": 1.4, "end": 2.0, "text": "video" }
        ]
      }
    ]
  }
}
```

```

--------------------------------

### Making API Requests with cURL

Source: https://docs.zvid.io/docs/api/authentication

Example of how to authenticate and make a GET request to the Zvid API using cURL. It demonstrates including the API key in the 'x-api-key' header.

```shell
curl -X GET https://api.zvid.io/api/user/profile \
  -H "x-api-key: zvid_1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef"
```

--------------------------------

### Configure Project with Presets and Custom Dimensions (JavaScript)

Source: https://docs.zvid.io/docs/faq

Demonstrates configuring a video project using both resolution presets and custom dimensions in JavaScript, highlighting recommended practices for different use cases.

```javascript
// Platform-optimized (recommended)  
const socialVideo = {  
  resolution: "instagram-reel", // Perfect for Instagram  
  duration: 30,  
  visuals: [  
    /* ... */  
  ],  
};

// Custom requirements  
const customVideo = {  
  resolution: "custom",  
  width: 1600, // Custom width  
  height: 900, // Custom height (16:9 ratio)  
  duration: 30,  
  visuals: [  
    /* ... */  
  ],  
};  
```

--------------------------------

### Verify Zvid API Authentication

Source: https://docs.zvid.io/docs/api/getting-started

This snippet demonstrates how to verify your Zvid API key by fetching your user profile. It requires your API key to be included in the 'x-api-key' header.

```curl
curl -X GET https://api.zvid.io/api/user/profile \
  -H "x-api-key: YOUR_API_KEY"
```

--------------------------------

### Create First Video with Text Overlay using Zvid

Source: https://docs.zvid.io/docs/quick-start

This JavaScript code defines a video project with a 'Hello, World!' text overlay. It imports the 'renderVideo' function from the 'zvid' package and uses it to create a video file. The script includes basic error handling and progress logging.

```javascript
import renderVideo from "zvid";

// Define your video project
const project = {
  name: "hello-world",
  resolution: "hd", // 1280x720 - you can also use "full-hd", "squared", etc.
  duration: 5,
  visuals: [
    {
      type: "TEXT",
      text: "Hello, World!",
      position: "center-center",
      // enterStart: 0, // The default enterBegin is 0
      enterEnd: 1,
      exitBegin: 4,
      // exitEnd: 5, // The exitEnd is the project duration = 5
      style: {
        fontSize: "72px",
        fontFamily: "Roboto",
        textAlign: "center",
        fontWeight: "bold",
      },
      enterAnimation: "fade",
      exitAnimation: "fade",
    },
  ],
};

// Create the video
async function createVideo() {
  try {
    console.log("Starting video creation...");

    await renderVideo(project, "./output", (progress) => {
      console.log(`Progress: ${progress}%`);
    });

    console.log("Video created successfully! Check ./output/hello-world.mp4");
  } catch (error) {
    console.error("Error creating video:", error);
  }
}

createVideo();
```

--------------------------------

### File Path Examples

Source: https://docs.zvid.io/docs/faq

Illustrates correct and problematic ways to specify file paths for media assets. It emphasizes using URLs, absolute paths, or paths relative to the script location when using local files, and advises using forward slashes or properly escaped backslashes.

```javascript
// Good file paths
src: "./assets/image.jpg",           //  Absolute path
src: "C:\\Users\\Name\\image.jpg",   // Windows (escaped)
src: "https://cdn.pixabay.com/photo/2022/11/05/22/11/channel-7572879_1280.jpg", // URL

// Problematic paths
src: "C:\Users\Name\image.jpg",      // Unescaped backslashes
src: "../../../image.jpg",           // Too many levels up
```

--------------------------------

### Create Multi-Element Video with Zvid

Source: https://docs.zvid.io/docs/examples/basic-video

Constructs a 10-second video featuring multiple text elements with distinct styles, animations, and timings. This example demonstrates advanced customization using the 'zvid' package.

```javascript
import renderVideo from "zvid";  
  
const project = {  
  name: "multi-element-video",  
  duration: 10,  
  backgroundColor: "#0f0f23",  
  visuals: [  
    // Title text  
    {  
      type: "TEXT",  
      text: "Zvid Package",  
      html: "<span>Zvid Package</span>",  
      x: 0,  
      y: 197,  
      enterEnd: 1,  
      exitBegin: 9,  
      track: 2,  
      style: {  
        width: "100%",  
        fontSize: "72px",  
        lineHeight: 1.2,  
        color: "#64ffda",  
        fontFamily: "Lato",  
        textAlign: "center",  
        fontWeight: "bold",  
        letterSpacing: "3px",  
      },  
      enterAnimation: "slideleft",  
      exitAnimation: "slideright",  
    },  

    // Subtitle  
    {  
      type: "TEXT",  
      text: "Create videos programmatically",  
      x: 0,  
      y: 355,  
      enterBegin: 1.5,  
      enterEnd: 2.5,  
      exitBegin: 8.5,  
      exitEnd: 9.5,  
      track: 2,  
      style: {  
        width: "100%",  
        fontSize: "42px",  
        lineHeight: 1.2,  
        color: "#ffffff",  
        textAlign: "center",  
        isItalic: true,  
        letterSpacing: "1px",  
      },  
      enterAnimation: "fade",  
      exitAnimation: "fade",  
    },  

    // Feature list  
    {  
      type: "TEXT",  
      html: "<span>✓ Easy to use<br/>✓ Powerful features<br/>✓ TypeScript support</span>",  
      x: 0,  
      y: 480,  
      enterBegin: 3,  
      enterEnd: 4,  
      exitBegin: 8,  
      exitEnd: 9,  
      track: 2,  
      style: {  
        width: "100%",  
        fontSize: "36px",  
        lineHeight: 1.5,  
        color: "#b39ddb",  
        fontFamily: "Lato",  
        textAlign: "center",  
      },  
      enterAnimation: "diagbl",  
      exitAnimation: "diagbr",  
    },  
  ],  
};  
  
async function createMultiElementVideo() {  
  try {  
    await renderVideo(project, "./output", (progress) => {  
      console.log(`Rendering: ${progress}%`);  
    });  
    console.log("Multi-element video created!");  
  } catch (error) {  
    console.error("Error:", error.message);  
  }  
}  
  
createMultiElementVideo();  

```

--------------------------------

### Fade Animation Example (Zvid)

Source: https://docs.zvid.io/docs/api-reference/animations

Demonstrates a standard fade-in and fade-out animation for an element using the 'fade' effect. It specifies the timing for the entrance and exit animations, controlling when the element starts appearing and disappearing.

```javascript
{
  enterAnimation: "fade",
  exitAnimation: "fade",
  enterBegin: 0,
  enterEnd: 1,
  exitBegin: 9,
  exitEnd: 10
}
```

--------------------------------

### Install FFmpeg on Arch Linux

Source: https://docs.zvid.io/docs/installation

Installs FFmpeg on Arch Linux using the pacman package manager. This command updates the package database and installs FFmpeg.

```bash
sudo pacman -S ffmpeg
```

--------------------------------

### Install FFmpeg on Windows

Source: https://docs.zvid.io/docs/faq

Instructions for installing FFmpeg on Windows using Chocolatey or manual download and PATH configuration.

```shell
# Using Chocolatey  
choco install ffmpeg  

# Or download and add to PATH manually  
```

--------------------------------

### Install FFmpeg on macOS using Homebrew

Source: https://docs.zvid.io/docs/installation

Installs FFmpeg on macOS using the Homebrew package manager. This is the recommended method for macOS users. Ensure Homebrew is installed before running the FFmpeg installation command.

```bash
# Install Homebrew if you haven't already  
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"  

# Install FFmpeg  
brew install ffmpeg
```

--------------------------------

### Configure Output Format (JavaScript)

Source: https://docs.zvid.io/docs/faq

Example of setting the output format for video projects in JavaScript, with recommendations for MP4, WebM, AVI, and MOV.

```javascript
const project = {  
  outputFormat: "mp4", // Recommended  
  // outputFormat: "webm", // For web  
  // outputFormat: "mov", // For Apple  
};  
```

--------------------------------

### Install FFmpeg on macOS using MacPorts

Source: https://docs.zvid.io/docs/installation

Installs FFmpeg on macOS using the MacPorts package manager. This is an alternative method for macOS users. Ensure MacPorts is installed before running this command.

```bash
sudo port install ffmpeg
```

--------------------------------

### Create Multi-Video Sequence with Transitions

Source: https://docs.zvid.io/docs/api-reference/video-elements

This example demonstrates how to sequence multiple videos with transitions. It defines the entry and exit points for each video and specifies the transition type and duration, linking videos by their IDs.

```json
// First video
{
    "type": "VIDEO",
    "src": "https://cdn.pixabay.com/video/2025/03/12/264272_large.mp4",
    "resize": "cover",
    "enterBegin": 0,
    "exitEnd": 5, // `exitEnd` should be equal to the `enterBegin` of the next video in transition.
    "id": "intro",
    "transition": "slideleft", // type of  transition
    "transitionDuration": 2,
    "transitionId": "main" // the `id` of the next video to transition
},
{
    "type": "VIDEO",
    "src": "https://cdn.pixabay.com/video/2025/05/01/275983_large.mp4",
    "resize": "cover",
    "enterBegin": 5, // `enterBegin` should be equal to the `exitEnd` of the previous video in transition
    "exitEnd": 10,
    "id": "main" // In transition `id` is required to identify
}
```

--------------------------------

### Create Simple Text Video with Zvid

Source: https://docs.zvid.io/docs/examples/basic-video

Generates a 5-second video with a dark blue background and animated white text that fades in and out. This example utilizes the 'zvid' package for rendering.

```javascript
import renderVideo from "zvid";  
  
const project = {  
  name: "basic-text-video",  
  duration: 5,  
  backgroundColor: "#1a1a2e",  
  visuals: [  
    {  
      type: "TEXT",  
      text: "Hello, Zvid!",  
      position: "center-center",  
      enterBegin: 0,  
      enterEnd: 1,  
      exitBegin: 4,  
      exitEnd: 5,  
      style: {  
        fontSize: "64px",  
        color: "#ffffff",  
        textAlign: "center",  
        fontWeight: "bold",  
        letterSpacing: "2px",  
      },  
      enterAnimation: "fade",  
      exitAnimation: "fade",  
    },  
  ],  
};  
  
async function createBasicVideo() {  
  try {  
    console.log("Creating basic video...");  
  
    await renderVideo(project, "./output", (progress) => {  
      console.log(`Progress: ${progress}%`);  
    });  
  
    console.log("Basic video created successfully!");  
  } catch (error) {  
    console.error("Error:", error.message);  
  }  
}  
  
createBasicVideo();  

```

--------------------------------

### Install nvm and Node.js 18 on Linux/macOS

Source: https://docs.zvid.io/docs/installation

Installs Node Version Manager (nvm) and then installs and uses Node.js version 18. This is useful for resolving Node.js version-related issues with the Zvid package.

```bash
# Install nvm (Linux/macOS)  
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash  

# Install and use Node.js 18  
nvm install 18  
nvm use 18
```

--------------------------------

### List API Keys - C# Example

Source: https://docs.zvid.io/docs/api/endpoints/list-api-keys

An example in C# demonstrating how to use HttpClient to fetch active API keys from the Zvid.io API. It includes setting the request method, URL, and necessary headers like 'Accept' and 'x-api-key'.

```csharp
var client = new HttpClient();
var request = new HttpRequestMessage(HttpMethod.Get, "https://api.zvid.io/api/api-keys");
request.Headers.Add("Accept", "application/json");
request.Headers.Add("x-api-key", "<x-api-key>");
var response = await client.SendAsync(request);
response.EnsureSuccessStatusCode();
Console.WriteLine(await response.Content.ReadAsStringAsync());
```

--------------------------------

### Install Zvid Package using npm, yarn, or pnpm

Source: https://docs.zvid.io/docs/installation

Installs the Zvid package using your preferred package manager. Ensure you have Node.js and a package manager (npm, yarn, or pnpm) installed.

```bash
npm install zvid
```

```bash
yarn add zvid
```

```bash
pnpm add zvid
```

--------------------------------

### Basic Background Music Configuration

Source: https://docs.zvid.io/docs/api-reference/audio-elements

Example of setting up background music with specified volume and duration within the project timeline. This configuration ensures music plays at a lower volume and for a defined segment of the video.

```javascript
{
  src: "https://cdn.pixabay.com/audio/2025/03/19/audio_56ae1dae5f.mp3",
  volume: 0.3,
  enter: 0,
  exit: 10
}
```

--------------------------------

### Configure Video Resolution Presets (JavaScript)

Source: https://docs.zvid.io/docs/faq

Example of configuring video resolution using predefined presets for social media and standard formats in JavaScript.

```javascript
// Social media formats  
const project = {  
  resolution: "instagram-post", // 1080×1080 (Square)  
  // resolution: "youtube-short", // 1080×1920 (Vertical)  
  // resolution: "tiktok", // 1080×1920 (Vertical)  
  // resolution: "full-hd", // 1920×1080 (Landscape)  
};  
```

--------------------------------

### Get Usage Statistics (JSON Example)

Source: https://docs.zvid.io/docs/api/endpoints/get-usage-stats

Example JSON response for a successful retrieval of credit usage statistics. It includes the timeframe, total credits spent, earned, and refunded, along with a daily usage breakdown.

```json
{
  "timeframe": "30d",
  "total_spent": 500,
  "total_earned": 1000,
  "total_refunded": 50,
  "daily_usage": [
    {
      "date": "2025-01-15",
      "spent": 100,
      "earned": 0
    }
  ]
}
```

```json
{
  "timeframe": "30d",
  "total_spent": 500,
  "total_earned": 1000,
  "total_refunded": 50,
  "daily_usage": [
    {
      "date": "2025-01-15",
      "spent": 100,
      "earned": 0
    },
    {
      "date": "2025-01-14",
      "spent": 75,
      "earned": 500
    }
  ]
}
```

--------------------------------

### Wipe Transition Example (JavaScript)

Source: https://docs.zvid.io/docs/api-reference/transitions

Illustrates a wipe transition effect between two video clips using JavaScript. This configuration sets up the `wiperight` transition for the first video and ensures proper timing and ID linking for a smooth visual change.

```javascript
// First video
{
    type: "VIDEO",
    src: "https://cdn.pixabay.com/video/2025/06/03/283533_large.mp4",
    width: 1280,
    height: 720,
    exitEnd: 5,
    transition: "wiperight",
    transitionId: "main",
    transitionDuration: 2
},
{
    type: "VIDEO",
    src: "https://cdn.pixabay.com/video/2025/06/09/284566_large.mp4",
    width: 1280,
    height: 720,
    enterBegin: 5,
    enterEnd: 10,
    id: "main"
}
```

--------------------------------

### Asynchronous Video Rendering with Error Handling

Source: https://docs.zvid.io/docs/quick-start

This JavaScript function demonstrates how to render a video using the `renderVideo` function, including progress tracking and robust error handling. It utilizes a try-catch block to manage potential errors during the rendering process and provides examples of handling specific error codes.

```javascript
async function createVideo() {
  try {
    await renderVideo(project, "./output", (progress) => {
      console.log(`Progress: ${progress}%`);
    });
    console.log("Success!");
  } catch (error) {
    console.error("Error:", error.message);

    // Handle specific error types
    if (error.code === "VR_CONFIG_004") {
      console.log("Check your project configuration");
    } else if (error.code === "VR_MEDIA_100") {
      console.log("FFmpeg processing failed");
    }
  }
}

```

--------------------------------

### Test Zvid Package Installation

Source: https://docs.zvid.io/docs/installation

A simple JavaScript test to verify the Zvid package installation and functionality. This script creates a 3-second black MP4 video using the `renderVideo` function.

```javascript
// test.js  
import renderVideo from "zvid";  
  
console.log("Zvid Package installed successfully!");  
  
// Simple test project  
const testProject = {  
  name: "test-video",  
  width: 640,  
  height: 480,  
  duration: 3,  
  frameRate: 30,  
  backgroundColor: "#000000",  
  outputFormat: "mp4",  
  visuals: [],  
  audios: [],  
};
  
// This will create a 3-second black video  
renderVideo(testProject, "./test-output")  
  .then(() => console.log("Test video created successfully!"))  
  .catch((err) => console.error("Test failed:", err));
```

--------------------------------

### Simple Fade Transition Example (JavaScript)

Source: https://docs.zvid.io/docs/api-reference/transitions

Demonstrates a simple fade transition between two video elements using JavaScript. This example configures the exit transition of the first video and the enter transition of the second video, linking them with `transitionId` and `id` properties.

```javascript
// First video
{
    type: "VIDEO",
    src: "https://cdn.pixabay.com/video/2025/06/03/283533_large.mp4",
    width: 1280,
    height: 720,
    exitEnd: 5,
    transition: "fade",
    transitionId: "main",
    transitionDuration: 2
},
{
    type: "VIDEO",
    src: "https://cdn.pixabay.com/video/2025/06/09/284566_large.mp4",
    width: 1280,
    height: 720,
    enterBegin: 5,
    enterEnd: 10,
    id: "main"
}
```

--------------------------------

### Font Handling Example (JSON)

Source: https://docs.zvid.io/docs/api-reference/subtitle

Illustrates how to specify font styles, including font family and size. The package automatically handles downloading and caching Google Fonts when specified.

```json
styles: {
  fontFamily: "Montserrat",  // Automatically downloaded from Google Fonts
  fontSize: 50,
  isBold: true
}
```
Tokens:
Raw