Screen Sharing

import { CometChatCalls } from '@cometchat/calls-sdk-react-native';

CometChatCalls.addEventListener('onParticipantStartedScreenShare', (participant) => {
  console.log(`${participant.name} started screen sharing`);
});

CometChatCalls.addEventListener('onParticipantStoppedScreenShare', (participant) => {
  console.log(`${participant.name} stopped screen sharing`);
});

CometChatCalls.startScreenSharing();

CometChatCalls.stopScreenSharing();

CometChatCalls.addEventListener('onScreenShareStarted', () => {
  console.log('Screen sharing started');
});

CometChatCalls.addEventListener('onScreenShareStopped', () => {
  console.log('Screen sharing stopped');
});

CometChatCalls.addEventListener('onScreenShareButtonClicked', () => {
  console.log('Screen share button clicked');
});

<key>NSExtension</key>
<dict>
    <key>NSExtensionPointIdentifier</key>
    <string>com.apple.broadcast-services-upload</string>
    <key>NSExtensionPrincipalClass</key>
    <string>SampleHandler</string>
    <key>RPBroadcastProcessMode</key>
    <string>RPBroadcastProcessModeSampleBuffer</string>
</dict>

<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
<uses-permission android:name="android.permission.FOREGROUND_SERVICE_MEDIA_PROJECTION" />

<service
    android:name="com.cometchat.calls.ScreenCaptureService"
    android:foregroundServiceType="mediaProjection"
    android:exported="false" />

CometChatCalls.pinParticipant(participantId, 'screen-share');

import React, { useState, useEffect } from 'react';
import { View, TouchableOpacity, Text, StyleSheet, Alert } from 'react-native';
import { CometChatCalls } from '@cometchat/calls-sdk-react-native';

function ScreenShareControls() {
  const [isSharing, setIsSharing] = useState(false);
  const [remoteSharer, setRemoteSharer] = useState<string | null>(null);

  useEffect(() => {
    const unsubscribeStart = CometChatCalls.addEventListener(
      'onScreenShareStarted',
      () => {
        setIsSharing(true);
      }
    );

    const unsubscribeStop = CometChatCalls.addEventListener(
      'onScreenShareStopped',
      () => {
        setIsSharing(false);
      }
    );

    const unsubscribeRemoteStart = CometChatCalls.addEventListener(
      'onParticipantStartedScreenShare',
      (participant) => {
        setRemoteSharer(participant.name);
      }
    );

    const unsubscribeRemoteStop = CometChatCalls.addEventListener(
      'onParticipantStoppedScreenShare',
      () => {
        setRemoteSharer(null);
      }
    );

    return () => {
      unsubscribeStart();
      unsubscribeStop();
      unsubscribeRemoteStart();
      unsubscribeRemoteStop();
    };
  }, []);

  const toggleScreenShare = () => {
    if (isSharing) {
      CometChatCalls.stopScreenSharing();
    } else {
      if (remoteSharer) {
        Alert.alert(
          'Screen Share Active',
          `${remoteSharer} is currently sharing their screen.`
        );
        return;
      }
      CometChatCalls.startScreenSharing();
    }
  };

  return (
    <View style={styles.container}>
      {remoteSharer && (
        <Text style={styles.sharingText}>
          {remoteSharer} is sharing their screen
        </Text>
      )}
      <TouchableOpacity
        style={[styles.button, isSharing && styles.activeButton]}
        onPress={toggleScreenShare}
      >
        <Text style={styles.buttonText}>
          {isSharing ? 'Stop Sharing' : 'Share Screen'}
        </Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 16,
    alignItems: 'center',
  },
  sharingText: {
    color: '#6851D6',
    fontSize: 14,
    marginBottom: 8,
  },
  button: {
    backgroundColor: '#333',
    paddingHorizontal: 20,
    paddingVertical: 12,
    borderRadius: 8,
  },
  activeButton: {
    backgroundColor: '#6851D6',
  },
  buttonText: {
    color: '#fff',
    fontSize: 14,
    fontWeight: '600',
  },
});

export default ScreenShareControls;