Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: screenshare docs for android, iOS and flutter #266

Merged
merged 2 commits into from
Feb 9, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions docs/android-core/local-user/introduction.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,16 @@ meeting.localUser.enableVideo()
meeting.localUser.videoEnabled
```

## Enable / Disable Screen share

```kotlin
// Enable Screenshare
meeting.localUser.enableScreenshare();

// Disable Screenshare
meeting.localUser.disableScreenshare();
```

## Switch camera between primary and secondary

```kotlin
Expand Down
11 changes: 11 additions & 0 deletions docs/flutter-core/local-user/introduction.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,17 @@ final isVideoEnabled = dyteClient.localUser.videoEnabled;
dyteClient.localUser.switchCamera();
```

## Enable / Disable Screen share

```dart
// Enable Screenshare
dyteClient.localUser.enableScreenshare();

// Disable Screenshare
dyteClient.localUser.disableScreenshare();
```


<head>
<title>Flutter Core Introduction</title>
</head>
4 changes: 4 additions & 0 deletions docs/guides/capabilities/screensharing/enabling.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,8 @@ await meeting.self.disableScreenShare();
</TabItem>
<TabItem value="flutter" label="Flutter">

For iOS you need to complete a one time setup described here [described here](/flutter-core/local-user/screen-share-iOS-guide)

```dart
// Enable Screenshare
dyteClient.localUser.enableScreenShare();
Expand Down Expand Up @@ -85,6 +87,8 @@ meeting.localUser.screenShareEnabled;
</TabItem>
<TabItem value="ios" label="iOS">

After completing the screensharing setup [described here](/ios-core/local-user/screen-share-guide)

```swift
// Enable Screenshare
meeting.localUser.enableScreenShare();
Expand Down
11 changes: 11 additions & 0 deletions docs/ios-core/local-user/introduction.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,17 @@ meeting.localUser.enableVideo()
meeting.localUser.videoEnabled
```

## Enable / Disable Screen share

```kotlin
// Enable Screenshare
meeting.localUser.enableScreenshare();

// Disable Screenshare
meeting.localUser.disableScreenshare();
```


## Switch camera between primary and secondary

```swift
Expand Down
113 changes: 113 additions & 0 deletions docs/ios-core/local-user/screen-share-guide.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
---
title: Sharing screen on iOS
sidebar_position: 12
tags:
- ios-core
---

This document explains how to setup screen sharing on a iOS App using Dyte SDK

:::warning

This guide is being updated, and might not work as expected in its current form

:::

## Overview

1. Add a new Broadcast Upload Extension to your project.
2. Setup app groups
3. Have your SampleHandler class initialize DyteBroadcastHandler and proxy a few methods.
4. Update Info.plist

### Add a new Broadcast Upload Extension to your project.

Add a Broadcast Upload Extension through `File` -> `New` -> `Target`.
Choose `iOS` -> `Broadcast Upload Extension` and fill out the required information for your extension and click `Finish`.

![meeting UI screenshot with labeled parts](/static/mobile/0.x.x/ios-setup-0.png)
![meeting UI screenshot with labeled parts](/static/mobile/0.x.x/ios-setup-01.png)

### Setup app groups

Add your extension to an app group by going to your extension's target in the project; in the Signings & Capabilities tab, click the + button in the top left and add App Groups. If you haven't done so already, add App Groups to your main app as well, ensuring that the App Group identifier is the same for both.

![meeting UI screenshot with labeled parts](/static/mobile/0.x.x/ios-setup-03.png)
![meeting UI screenshot with labeled parts](/static/mobile/0.x.x/ios-setup-1.png)

### Setup SampleHandler

- Edit your SampleHandler class to look something like this.

```swift


import ReplayKit
import DyteiOSCore

class SampleHandler: RPBroadcastSampleHandler {

let dyteBroadcast: DyteBroadcastHandler = DyteBroadcastHandler();

override init() {
super.init()
}
override func broadcastPaused() {
dyteBroadcast.broadcastPaused()
}

override func broadcastResumed() {
dyteBroadcast.broadcastResumed()
}

override func broadcastFinished() {
dyteBroadcast.broadcastFinished()
}

override func broadcastStarted(withSetupInfo setupInfo: [String : NSObject]?) {
dyteBroadcast.broadcastStartedWithSetupInfo(setupInfo: setupInfo)
}

override func processSampleBuffer(_ sampleBuffer: CMSampleBuffer, with sampleBufferType: RPSampleBufferType) {
let rawPointer = Unmanaged.passUnretained(sampleBuffer).toOpaque()
dyteBroadcast.processSampleBuffer(sampleBuffer: rawPointer, withType: Int64(sampleBufferType.rawValue))

}

}

```

### Modify Info.plist

Make sure **both of them** (App and Extension Info.plist) contains these keys

```
<key>RTCAppGroupIdentifier</key>
<string>(name of the group)</string>
<key>RTCScreenSharingExtension</key>
<string>(Bundle Identifier)</string>
```

![Info.plist screenshot](/static/mobile/0.x.x/ios-setup-info.png)

### Start the Screenshare

Launch the broadcast extension and call the method `enableScreenshare()`

```swift

let screenShareExtensionId = Bundle.main.infoDictionary?["RTCScreenSharingExtension"] as? String;
let view = RPSystemBroadcastPickerView()
view.preferredExtension = screenShareExtensionId
view.showsMicrophoneButton = false
let selector = NSSelectorFromString("buttonPressed:")
if view.responds(to: selector) {
view.perform(selector, with: nil)
}

dyteClient.localUser.enableScreenshare()
```

![screenshot](/static/mobile/0.x.x/ios-setup-app.png)
![screenshot](/static/mobile/0.x.x/ios-setup-demo.png)