Skip to main content
Version: 0.1.x

Custom Video Track - React

  • You can create a Video Track using createCameraVideoTrack() method of @videosdk.live/react-sdk.
  • This method can be used to create video track using different encoding parameters, camera facing mode, and optimization mode.

Parameters

  • cameraId:

    • type: String
    • required: false
    • It will be the id of the camera from which the video should be captured.
  • encoderConfig:

    • type: String
    • required: false
    • default: h360p_w640p
    • You can chose from the below mentioned list of values for the encoder config.
Encoder ConfigResolutionFrame RateBitrate
h90p_w160p160x9015 fps60000 kbps
h180p_w320p320x18015 fps120000 kbps
h216p_w384p384x21615 fps180000 kbps
h360p_w640p640x36020 fps300000 kbps
h540p_w960p960x54025 fps600000 kbps
h720p_w1280p1280x72030 fps2000000 kbps
h1080p_w1920p1920x108030 fps3000000 kbps
h1440p_w2560p2560x144030 fps5000000 kbps
h2160p_w3840p3840x216030 fps8000000 kbps
h120p_w160p160x12015 fps80000 kbps
h180p_w240p240x18015 fps100000 kbps
h240p_w320p320x24015 fps150000 kbps
h360p_w480p480x36020 fps225000 kbps
h480p_w640p640x48025 fps300000 kbps
h540p_w720p720x54030 fps450000 kbps
h720p_w960p960x72030 fps1500000 kbps
h1080p_w1440p1440x108030 fps2500000 kbps
h1440p_w1920p1920x144030 fps3500000 kbps
note

Above mentioned encoder configurations are valid for both, landscape as well as portrait mode.

  • facingMode:

    • type: String
    • required: false
    • Allowed values : front | environment
    • It will specify whether to use front or back camera for the video track.
  • optimizationMode

    • type: String
    • required: false
    • Allowed values: motion | text | detail
    • It will specify the optimization mode for the video track being generated.
  • multiStream

    • type: boolean
    • required: false
    • default: true
    • It will specify if the stream should send multiple resolution layers or single resolution layer.
info
  • To learn more about optimizations and best practices for using custom video tracks, follow this guide.
  • This parameter is only available from v0.1.53.

Returns

  • MediaStream

Example

import { createCameraVideoTrack } from "@videosdk.live/react-sdk";

let customTrack = await createCameraVideoTrack({
optimizationMode: "motion",
encoderConfig: "h720p_w1280p",
facingMode: "environment",
});

Custom Audio Track - React

  • You can create a Audio Track using createMicrophoneAudioTrack() method of @videosdk.live/react-sdk.
  • This method can be used to create audio track using different encoding parameters and noise cancellation configration.

Parameters

  • microphoneId:

    • type: String
    • required: false
    • It will be the id of the mic from which the audio should be captured.
  • encoderConfig:

    • type: String
    • required: false
    • default: speech_standard
    • You can chose from the below mentioned list of values for the encoder config.
Encoder ConfigBitrateAuto GainEcho CancellationNoise Suppression
speech_low_quality16 kbpsTRUETRUETRUE
speech_standard24 kbpsTRUETRUETRUE
music_standard32 kbpsFALSEFALSEFALSE
standard_stereo64 kbpsFALSEFALSEFALSE
high_quality128 kbpsFALSEFALSEFALSE
high_quality_stereo192 kbpsFALSEFALSEFALSE
  • noiseConfig

    • echoCancellation

      • type: boolean
      • required: false
      • If true echo cancellation will turned on else it would be turned off.
    • autoGainControl

      • type: boolean
      • required: false
      • If true auto gain will turned on else it would be turned off.
    • noiseSuppression

      • type: boolean
      • required: false
      • If true noise suppression will turned on else it would be turned off.

Returns

  • MediaStream

Example

import { createMicrophoneAudioTrack } from "@videosdk.live/react-sdk";

let customTrack = await createMicrophoneAudioTrack({
encoderConfig: "speech_standard",
noiseConfig: {
noiseSuppression: true,
echoCancellation: true,
autoGainControl: true,
},
});

Custom Screen Share Track - React

  • You can create a Video Track using createScreenShareVideoTrack() method of @videosdk.live/react-sdk.
  • This method can be used to create video track using different encoding parameters and optimization mode.

Parameters

  • encoderConfig:

    • type: String
    • required: false
    • default: h720p_15fps
    • You can chose from the below mentioned list of values for the encoder config.
Encoder ConfigResolutionFrame RateBitrate
h360p_30fps640x3603 fps200000 kbps
h720p_5fps1280x7205 fps400000 kbps
h720p_15fps1280x72015 fps1000000 kbps
h1080p_15fps1920x108015 fps1500000 kbps
h1080p_30fps1920x108015 fps1000000 kbps
note

Above mentioned encoder configurations are valid for both, landscape as well as portrait mode.

  • optimizationMode
    • type: String
    • required: false
    • Allowed values: motion | text | detail
    • It will specify the optimization mode for the video track being generated.

Returns

  • MediaStream

Example

import { createScreenShareVideoTrack } from "@videosdk.live/react-sdk";

let customTrack = await createScreenShareVideoTrack({
optimizationMode: "motion",
encoderConfig: "h720p_15fps",
});

Got a Question? Ask us on discord