# Configure video encoding (/en/realtime-media/broadcast-streaming/build/manage-video-and-streaming/configure-video-encoding/web)

> For AI agents: see the complete documentation index at [llms.txt](/llms.txt).

Customer satisfaction with your Video Calling integrated app depends on the quality of video and audio it provides. The sharpness, smoothness, and overall quality of the video is directly linked to the frame rate, bitrate, and other video encoder settings. Choosing improper settings can result in poor video quality. Conversely, if the settings are too demanding, the available bandwidth quickly gets choked, leading to a suboptimal experience for your users.

    This page guides you on configuring the video encoder settings to ensure optimal video quality in your Broadcast Streaming app.

    ## Understand the tech [#understand-the-tech-3]

    In Video SDK you can set the video dimensions, framerate, bitrate, orientation mode, and mirror mode by specifying a video profile. You can also set the degradation preference to specify how video quality is degraded under suboptimal network conditions.

    ## Prerequisites [#prerequisites-3]

    Ensure that you have implemented the [SDK quickstart](../../index) in your project.

    ## Implementation [#implementation-3]

    Video SDK provides two methods to set video properties:

    1. **Setting video properties when creating the video track:** Use `encoderConfig` parameter in `AgoraRTC.createCameraVideoTrack`, `AgoraRTC.createScreenVideoTrack`, or `AgoraRTC.createCustomVideoTrack`.

    2. **Dynamically adjust video track properties after creation:** Use `CameraVideoTrack.setEncoderConfiguration` or `LocalVideoTrack.setEncoderConfiguration` (supported before and after publishing).

    The recommended video settings vary by use-case. For example, in a one-to-one video call, larger video windows call for higher resolution. In group calls with multiple participants, smaller video windows allow you to use lower resolution to conserve bandwidth. Low-bandwidth scenarios may need reduced resolution and frame rate.

    The following table shows sample settings for common use-cases:

    | Use case                 | Resolution | Frame rate | Preset   | Notes                    |
    | ------------------------ | ---------- | ---------- | -------- | ------------------------ |
    | Video calls (one-to-one) | 640×360    | 15 fps     | `480p_1` | Larger video windows     |
    | Video calls (group)      | 320×240    | 15 fps     | `240p_1` | Multiple smaller windows |
    | Live streaming           | 1280×720   | 30 fps     | `720p_2` | Broadcast quality        |
    | Low-bandwidth use cases  | 320×180    | 15 fps     | `180p_4` | Conserve bandwidth       |

    For screen sharing video configuration, refer to the [Screen sharing](screen-sharing) guide.

    To set video encoder configuration, refer to the following sample configurations.

    ### Standard video calls [#standard-video-calls-3]

    Use the following as a starting configuration for one-to-one and group video calls:

    ```javascript
    // Configure video track for standard video calls
    // Use 640×360 for one-to-one calls with larger video windows
    // Use 320×240 for group calls with multiple smaller video windows
    AgoraRTC.createCameraVideoTrack({
      encoderConfig: {
        width: 640,
        height: 360,
        frameRate: 15, // 15 fps balances smoothness and bandwidth
        bitrateMin: 200, // Minimum bitrate in Kbps
        bitrateMax: 1000, // Maximum bitrate in Kbps
      },
    }).then(localVideoTrack => {
      // Publish the track
    });
    ```

    **Using preset:**

    ```javascript
    AgoraRTC.createCameraVideoTrack({
      encoderConfig: "480p_1", // Preset for 640×480 at 15fps
    }).then(localVideoTrack => {
      // Publish the track
    });
    ```

    ### Live streaming or broadcasting [#live-streaming-or-broadcasting-3]

    Use the following as a starting configuration for Interactive live streaming or Broadcasting streaming use-cases:

    ```javascript
    // Configure video track for live streaming
    AgoraRTC.createCameraVideoTrack({
      encoderConfig: {
        width: 1280,
        height: 720, // HD resolution for broadcast quality
        frameRate: 30, // Higher framerate for smooth motion
        bitrateMin: 600, // Minimum bitrate in Kbps
        bitrateMax: 3000, // Maximum bitrate in Kbps
      },
    }).then(localVideoTrack => {
      // Publish the track
    });
    ```

    **Using preset:**

    ```javascript
    AgoraRTC.createCameraVideoTrack({
      encoderConfig: "720p_2", // Preset for 1280×720 at 30fps
    }).then(localVideoTrack => {
      // Publish the track
    });
    ```

    ### Low-bandwidth use-cases [#low-bandwidth-use-cases-3]

    Use the following as a starting configuration for limited bandwidth or mobile networks:

    ```javascript
    // Configure video track for low-bandwidth scenarios
    AgoraRTC.createCameraVideoTrack({
      encoderConfig: {
        width: 320,
        height: 180, // Minimal resolution to save bandwidth
        frameRate: 10, // Lower framerate reduces bandwidth usage
        bitrateMin: 65, // Minimum bitrate in Kbps
        bitrateMax: 500, // Maximum bitrate in Kbps
      },
    }).then(localVideoTrack => {
      // Publish the track
    });
    ```

    **Using preset:**

    ```javascript
    AgoraRTC.createCameraVideoTrack({
      encoderConfig: "180p_4", // Preset for 320×180 at 15fps
    }).then(localVideoTrack => {
      // Publish the track
    });
    ```

    ### Dynamically adjust video properties [#dynamically-adjust-video-properties]

    You can adjust video properties after creating the track:

    ```javascript
    // Change to a different preset
    localVideoTrack.setEncoderConfiguration("720p_1").then(() => {
      // Configuration updated
    });

    // Or use custom configuration
    localVideoTrack.setEncoderConfiguration({
      width: 1280,
      height: 720,
      frameRate: 30,
      bitrateMin: 600,
      bitrateMax: 3000,
    }).then(() => {
      // Configuration updated
    });
    ```

    <CalloutContainer type="info">
      <CalloutDescription>
        Try out the [adjust video profile](https://webdemo-global.agora.io/example/advanced/adjustVideoProfile/index.html) online demo.
      </CalloutDescription>
    </CalloutContainer>

    ### Troubleshooting [#troubleshooting-3]

    The following are some common issues and their solutions:

    | Issue                           | Possible solution                                                                  |
    | ------------------------------- | ---------------------------------------------------------------------------------- |
    | **Blurry video**                | Increase resolution or bitrate                                                     |
    | **Choppy/laggy playback**       | Reduce resolution, increase minimum bitrate, or use maintain framerate degradation |
    | **High bandwidth usage**        | Lower resolution or frame rate                                                     |
    | **Video orientation incorrect** | Use fixed portrait or fixed landscape orientation mode                             |

    ## Reference [#reference-3]

    This section contains content that completes the information on this page, or points you to documentation that explains other aspects to this product.

    ### Video profiles table [#video-profiles-table-3]

    The following table lists the Web SDK preset video profiles and the corresponding parameters. Choose a preset profile or refer to the table to customize your settings.

    | Preset        | Resolution (Width × Height) | Frame rate (fps) | Bitrate (Kbps) |
    | ------------- | --------------------------- | ---------------- | -------------- |
    | `120p`        | 160 × 120                   | 15               | 65             |
    | `120p_1`      | 160 × 120                   | 15               | 65             |
    | `120p_3`      | 120 × 120                   | 15               | 50             |
    | `180p`        | 320 × 180                   | 15               | 140            |
    | `180p_1`      | 320 × 180                   | 15               | 140            |
    | `180p_3`      | 180 × 180                   | 15               | 100            |
    | `180p_4`      | 240 × 180                   | 15               | 120            |
    | `240p`        | 320 × 240                   | 15               | 200            |
    | `240p_1`      | 320 × 240                   | 15               | 200            |
    | `240p_3`      | 240 × 240                   | 15               | 140            |
    | `240p_4`      | 424 × 240                   | 15               | 220            |
    | `360p`        | 640 × 360                   | 15               | 400            |
    | `360p_1`      | 640 × 360                   | 15               | 400            |
    | `360p_3`      | 360 × 360                   | 15               | 260            |
    | `360p_4`      | 640 × 360                   | 30               | 600            |
    | `360p_6`      | 360 × 360                   | 30               | 400            |
    | `360p_7`      | 480 × 360                   | 15               | 320            |
    | `360p_8`      | 480 × 360                   | 30               | 490            |
    | `360p_9`      | 640 × 360                   | 15               | 800            |
    | `360p_10`     | 640 × 360                   | 24               | 800            |
    | `360p_11`     | 640 × 360                   | 24               | 1000           |
    | `480p`        | 640 × 480                   | 15               | 500            |
    | `480p_1`      | 640 × 480                   | 15               | 500            |
    | `480p_2`      | 640 × 480                   | 30               | 1000           |
    | `480p_3`      | 480 × 480                   | 15               | 400            |
    | `480p_4`      | 640 × 480                   | 30               | 750            |
    | `480p_6`      | 480 × 480                   | 30               | 600            |
    | `480p_8`      | 848 × 480                   | 15               | 610            |
    | `480p_9`      | 848 × 480                   | 30               | 930            |
    | `480p_10`     | 640 × 480                   | 10               | 400            |
    | `720p`        | 1280 × 720                  | 15               | 1130           |
    | `720p_1`      | 1280 × 720                  | 15               | 1130           |
    | `720p_2`      | 1280 × 720                  | 30               | 2000           |
    | `720p_3`      | 1280 × 720                  | 30               | 1710           |
    | `720p_auto`\* | 1280 × 720                  | 30               | 3000           |
    | `720p_5`      | 960 × 720                   | 15               | 910            |
    | `720p_6`      | 960 × 720                   | 30               | 1380           |
    | `1080p`       | 1920 × 1080                 | 15               | 2080           |
    | `1080p_1`     | 1920 × 1080                 | 15               | 2080           |
    | `1080p_2`     | 1920 × 1080                 | 30               | 3000           |
    | `1080p_3`     | 1920 × 1080                 | 30               | 3150           |
    | `1080p_5`     | 1920 × 1080                 | 60               | 4780           |

    * The `720p_auto` preset profile is only recommended for Safari to ensure that the encoding resolution is dynamically adjusted. See [release notes](../../reference/release-notes) for details.

    ### Sample project [#sample-project-3]

    For a working example, see [Adjust video profile](https://webdemo.agora.io/adjustVideoProfile/index.html).

    ### API reference [#api-reference-3]

    * [`createCameraVideoTrack`](https://api-ref.agora.io/en/video-sdk/web/4.x/interfaces/iagorartc.html#createcameravideotrack)
    * [`setEncoderConfiguration`](https://api-ref.agora.io/en/video-sdk/web/4.x/interfaces/icameravideotrack.html#setencoderconfiguration)
    * [`VideoEncoderConfigurationPreset`](https://api-ref.agora.io/en/video-sdk/web/4.x/globals.html#videoencoderconfigurationpreset)
    * [`VideoEncoderConfiguration`](https://api-ref.agora.io/en/video-sdk/web/4.x/interfaces/videoencoderconfiguration.html)