Camera Controls

The social.plus Video SDK provides extensive camera control capabilities for creating professional broadcasting experiences. This guide covers all available camera features and how to implement them across different platforms.

Camera Management

Camera Initialization

import { SocialPlusVideo } from '@social-plus/video-sdk';

const videoSDK = new SocialPlusVideo({
  apiKey: 'your-api-key'
});

// Initialize camera
await videoSDK.camera.initialize({
  preferredCamera: 'front', // 'front' or 'rear'
  resolution: '720p',
  frameRate: 30
});

Camera Switching

// Switch between front and rear cameras
await videoSDK.camera.switchCamera();

// Switch to specific camera
await videoSDK.camera.switchCamera('rear');

// Get available cameras
const cameras = await videoSDK.camera.getAvailableCameras();
console.log(cameras);
// Output: [{ id: 'front', name: 'Front Camera' }, { id: 'rear', name: 'Rear Camera' }]

Camera Settings

Resolution Control

// Set video resolution
await videoSDK.camera.setResolution('1080p');

// Available resolutions
const resolutions = await videoSDK.camera.getSupportedResolutions();
// Output: ['480p', '720p', '1080p', '4K']

// Get current resolution
const currentResolution = videoSDK.camera.getCurrentResolution();

Frame Rate Management

// Set frame rate
await videoSDK.camera.setFrameRate(30);

// Get supported frame rates
const frameRates = await videoSDK.camera.getSupportedFrameRates();
// Output: [15, 30, 60]

// Auto frame rate based on conditions
await videoSDK.camera.setFrameRate('auto');

Advanced Camera Features

Focus Control

// Auto focus
await videoSDK.camera.autoFocus();

// Manual focus (0.0 to 1.0)
await videoSDK.camera.setFocus(0.7);

// Focus at specific point (x, y coordinates)
await videoSDK.camera.focusAtPoint(100, 200);

// Get focus capabilities
const focusCapabilities = await videoSDK.camera.getFocusCapabilities();

Zoom Control

// Set zoom level (1.0 to max zoom)
await videoSDK.camera.setZoom(2.0);

// Get zoom range
const zoomRange = await videoSDK.camera.getZoomRange();
// Output: { min: 1.0, max: 5.0 }

// Smooth zoom transition
await videoSDK.camera.smoothZoom(3.0, 1000); // zoom to 3.0x over 1000ms

Exposure Control

// Auto exposure
await videoSDK.camera.setExposureMode('auto');

// Manual exposure
await videoSDK.camera.setExposureMode('manual');
await videoSDK.camera.setExposure(-2); // -3 to +3 range

// Get exposure capabilities
const exposureCapabilities = await videoSDK.camera.getExposureCapabilities();

White Balance

// Auto white balance
await videoSDK.camera.setWhiteBalance('auto');

// Manual white balance
await videoSDK.camera.setWhiteBalance('daylight');
// Options: 'auto', 'daylight', 'cloudy', 'tungsten', 'fluorescent'

// Custom white balance temperature
await videoSDK.camera.setWhiteBalanceTemperature(5600); // in Kelvin

Camera Effects and Filters

Beauty Filters

// Enable beauty filter
await videoSDK.camera.enableBeautyFilter({
  skinSmoothing: 0.7,
  faceSlimming: 0.3,
  eyeEnlargement: 0.2
});

// Disable beauty filter
await videoSDK.camera.disableBeautyFilter();

Color Filters

// Apply color filter
await videoSDK.camera.applyFilter('vintage');
// Available filters: 'none', 'vintage', 'black-white', 'sepia', 'vivid'

// Custom color adjustment
await videoSDK.camera.adjustColor({
  brightness: 0.1,
  contrast: 0.2,
  saturation: 0.15,
  hue: 0.05
});

Camera States and Events

Camera States

// Get current camera state
const state = videoSDK.camera.getState();
// States: 'idle', 'initializing', 'active', 'switching', 'error'

// Listen for state changes
videoSDK.camera.on('stateChanged', (newState, previousState) => {
  console.log(`Camera state changed from ${previousState} to ${newState}`);
});

Camera Events

// Camera switched event
videoSDK.camera.on('cameraSwitched', (cameraInfo) => {
  console.log('Switched to camera:', cameraInfo);
});

// Focus changed event
videoSDK.camera.on('focusChanged', (focusInfo) => {
  console.log('Focus changed:', focusInfo);
});

// Zoom changed event
videoSDK.camera.on('zoomChanged', (zoomLevel) => {
  console.log('Zoom level:', zoomLevel);
});

// Camera error event
videoSDK.camera.on('error', (error) => {
  console.error('Camera error:', error);
});

Platform-Specific Implementation

iOS Camera Controls

// iOS-specific camera controls
import SocialPlusVideoSDK

// Initialize camera
let cameraManager = SPVCameraManager()
await cameraManager.initialize()

// Switch camera
await cameraManager.switchCamera()

// Set focus
await cameraManager.setFocus(at: CGPoint(x: 0.5, y: 0.5))

// Set zoom
await cameraManager.setZoom(level: 2.0)

Android Camera Controls

// Android-specific camera controls
import com.socialplus.video.CameraManager

// Initialize camera
val cameraManager = CameraManager(context)
cameraManager.initialize()

// Switch camera
cameraManager.switchCamera()

// Set focus
cameraManager.setFocus(x = 0.5f, y = 0.5f)

// Set zoom
cameraManager.setZoom(2.0f)

Web Camera Controls

// Web-specific camera controls
const cameraManager = new SocialPlusVideo.CameraManager();

// Get user media with constraints
const stream = await navigator.mediaDevices.getUserMedia({
  video: {
    width: { ideal: 1280 },
    height: { ideal: 720 },
    frameRate: { ideal: 30 },
    facingMode: 'user' // or 'environment'
  }
});

// Apply constraints
const track = stream.getVideoTracks()[0];
await track.applyConstraints({
  zoom: 2.0,
  focusMode: 'manual',
  focusDistance: 0.7
});

Best Practices

Performance Optimization

  1. Initialize Early: Initialize camera during app startup
  2. Resource Management: Properly release camera resources
  3. Background Handling: Manage camera state during app lifecycle
  4. Memory Management: Avoid memory leaks with proper cleanup

User Experience

  1. Smooth Transitions: Use animated transitions for camera switches
  2. Visual Feedback: Show loading states during camera operations
  3. Error Handling: Gracefully handle camera permissions and errors
  4. Accessibility: Support voice commands and gesture controls

Error Handling

try {
  await videoSDK.camera.switchCamera();
} catch (error) {
  if (error.code === 'CAMERA_NOT_AVAILABLE') {
    // Handle camera not available
    showMessage('Camera not available');
  } else if (error.code === 'PERMISSION_DENIED') {
    // Handle permission denied
    requestCameraPermission();
  } else {
    // Handle other errors
    console.error('Camera error:', error);
  }
}

Troubleshooting

Common Issues

  1. Camera Not Switching: Check if multiple cameras are available
  2. Focus Not Working: Verify focus capabilities on device
  3. Zoom Limitations: Check device zoom range support
  4. Performance Issues: Optimize resolution and frame rate settings

Debug Information

// Get camera debug info
const debugInfo = await videoSDK.camera.getDebugInfo();
console.log('Camera Debug Info:', debugInfo);

// Enable debug logging
videoSDK.camera.enableDebugLogging(true);

Next Steps