Introduction

Accessible via self key within the meeting object, the local user object consists of all the information related to the current participant and methods to configure media and other states.

Properties

Here is a list of properties that local user provides:

Metadata

• userId: User ID of the local user.
• customParticipantId: Identifier provided by the developer while adding the participant.
• organizationId: The ID of the organization the meeting is created from.
• name: Contains Name of the local user.
• picture: Display picture URL for the local user.
• permissions: The permissions related to various capabilities for the local user defined by the preset

Media:

• mediaPermissions: The current audio and video permissions given by the local user.
• audioTrack: The audio track for the local user.
• videoTrack: The video track for the local user.
• screenShareTracks: The screen share video and audio tracks for the local user.
• audioEnabled: A boolean value indicating if the audio currently enabled.
• videoEnabled: A boolean value indicating if the video currently enabled.
• screenShareEnabled: A boolean value indicating if the screen share is currently enabled.

States:

• isPinned: A boolean value indicating if the local user is pinned or not.

• roomJoined: A boolean value indicating if the local user is in the meeting

• roomState: Indicates the state of the user in the meeting. It can take the following values:

  'init' | 'joined' | 'waitlisted' | 'rejected' | 'kicked' | 'left' | 'ended';

Change the name of the local user

Change the user's name by calling setName method. The changed name will reflect across all participants ONLY if the change happens before joining the meeting.

await meeting.self.setName('New Name');

Media

Mute/Unmute microphone

// Mute Audio
await meeting.self.disableAudio();

// Unmute Audio
await meeting.self.enableAudio();

// Get current status
meeting.self.audioEnabled;

Enable/Disable camera

// Disable Video
await meeting.self.disableVideo();

// Enable Video
await meeting.self.enableVideo();

// Get current status
meeting.self.videoEnabled;

Enable / Disable Screenshare

Android

// Enable Screenshare
await meeting.self.enableScreenShare();

// Disable Screenshare
await meeting.self.disableScreenShare();

// Get current status
meeting.self.screenShareEnabled;

iOS

• In Xcode, Go to Targets -> Add a target -> Choose Broadcast Upload Extension (Choose Swift as Language)
• Go to Targets Signing & Capabilities, and enable App Groups for both App target and Broadcast Upload Extension target
• In the app's target, add the following in Info.plist:

    <key>RTCAppGroupIdentifier</key>
    <string>YOUR_APP_GROUP</string>
• Add these changes to your iOS folder's Podfile:

  target 'YOUR_APP_TARGET_NAME'
    ...
  
    post_install do |installer|
      ...
      # Add these for Dyte iOS Screenshare
      installer.pods_project.targets.each do |target|
        target.build_configurations.each do |config|
          config.build_settings['APPLICATION_EXTENSION_API_ONLY'] = 'No'
          config.build_settings['ENABLE_USER_SCRIPT_SANDBOXING'] = 'No'
        end
      end
      ...
    end
  
    ...
  end
  
  # Add this at the end of Podfile
  pod 'YOUR_BROADCAST_EXTENSION_TARGET_NAME'
      config = use_native_modules!
      use_react_native!(:path => config["reactNativePath"], :hermes_enabled => false)
      # Support ReactNativeCore Pod in the Broadcast Upload Extension
      pod 'ReactNativeCore', :path => '../node_modules/@dytesdk/react-native-core'
  end
• Replace the SampleHandler in Broadcast Upload Extension with the following:

    import ReactNativeCore
  
    class SampleHandler: DyteScreenshareHandler {
      override init() {
        super.init(appGroupIdentifier: "YOUR_APP_GROUP", bundleIdentifier: "BUNDLE_IDENTIFIER_FOR_BROADCAST_UPLOAD_EXTENSION")
      }
    }

  Note: Replace YOUR_APP_GROUP with your App Group Name and BUNDLE_IDENTIFIER_FOR_BROADCAST_UPLOAD_EXTENSION with Bundle Identifier of Screnshare Extension.

• Go to Broadcast Extension target -> Build Settings
  • Build Options -> Set User Script Sandboxing to No
  • Signing -> Enable App Sandbox to No
• Now enable the screenshare pop up handle and then enable Dyte's screenshare API:

  // Import this component
  import { NativeModules, findNodeHandle } from 'react-native';
  import { ScreenCapturePickerView } from '@dyteinternals/react-native-webrtc';
  
  function MyComponent() {
  
    const screenCapturePickerViewRef = useRef(null);
  
    // Function to show ScreenCapture Picker
    const showScreenRecordPicker = async () => {
      const handle = findNodeHandle(screenCapturePickerViewRef.current);
      NativeModules.ScreenCapturePickerViewManager.show(handle);
    };
  
    // To enable screenshare
    await showScreenRecordPicker();
    await meeting.self.enableScreenShare();
  
    // To disable screenshare
    await meeting.self.disableScreenShare();
  
    return (
      ...
      // Add this in components
      <ScreenCapturePickerView ref={screenCapturePickerViewRef} />
      ...
    );
  
  }