Skip to content

Commit

Permalink
Added a separate docs page for custom events (#543)
Browse files Browse the repository at this point in the history
  • Loading branch information
martinmitrevski authored Sep 25, 2024
1 parent 9ef4a25 commit d7c87ba
Show file tree
Hide file tree
Showing 6 changed files with 221 additions and 34 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
40F290AB2BDFB37000DCF136 /* 16-noise-cancellation.swift in Sources */ = {isa = PBXBuildFile; fileRef = 40F290AA2BDFB37000DCF136 /* 16-noise-cancellation.swift */; };
40F290AD2BDFB3CA00DCF136 /* 20-noise-cancellation.swift in Sources */ = {isa = PBXBuildFile; fileRef = 40F290AC2BDFB3CA00DCF136 /* 20-noise-cancellation.swift */; };
40FFDC372B63E400004DA7A2 /* 08-permissions-and-moderation.swift in Sources */ = {isa = PBXBuildFile; fileRef = 40FFDC362B63E400004DA7A2 /* 08-permissions-and-moderation.swift */; };
40FFDC392B63E459004DA7A2 /* 09-reactions-and-custom-events.swift in Sources */ = {isa = PBXBuildFile; fileRef = 40FFDC382B63E459004DA7A2 /* 09-reactions-and-custom-events.swift */; };
40FFDC392B63E459004DA7A2 /* 09-reactions.swift in Sources */ = {isa = PBXBuildFile; fileRef = 40FFDC382B63E459004DA7A2 /* 09-reactions.swift */; };
40FFDC3B2B63E493004DA7A2 /* 10-view-slots.swift in Sources */ = {isa = PBXBuildFile; fileRef = 40FFDC3A2B63E493004DA7A2 /* 10-view-slots.swift */; };
40FFDC3D2B63E6EC004DA7A2 /* 11-call-lifecycle.swift in Sources */ = {isa = PBXBuildFile; fileRef = 40FFDC3C2B63E6EC004DA7A2 /* 11-call-lifecycle.swift */; };
40FFDC3F2B63E734004DA7A2 /* 12-call-state.swift in Sources */ = {isa = PBXBuildFile; fileRef = 40FFDC3E2B63E734004DA7A2 /* 12-call-state.swift */; };
Expand Down Expand Up @@ -78,6 +78,7 @@
40FFDCA22B640741004DA7A2 /* 14-livestream-player.swift in Sources */ = {isa = PBXBuildFile; fileRef = 40FFDCA12B640741004DA7A2 /* 14-livestream-player.swift */; };
40FFDCA42B640772004DA7A2 /* 15-long-press-to-focus.swift in Sources */ = {isa = PBXBuildFile; fileRef = 40FFDCA32B640772004DA7A2 /* 15-long-press-to-focus.swift */; };
40FFDCA62B6408DE004DA7A2 /* 00-ringing.swift in Sources */ = {isa = PBXBuildFile; fileRef = 40FFDCA52B6408DE004DA7A2 /* 00-ringing.swift */; };
84BA15B02CA2F04F0018DC51 /* 10-custom-events.swift in Sources */ = {isa = PBXBuildFile; fileRef = 84BA15AF2CA2F04F0018DC51 /* 10-custom-events.swift */; };
84BA15AE2CA2EF420018DC51 /* 07-querying-call-members.swift in Sources */ = {isa = PBXBuildFile; fileRef = 84BA15AD2CA2EF420018DC51 /* 07-querying-call-members.swift */; };
/* End PBXBuildFile section */

Expand Down Expand Up @@ -107,7 +108,7 @@
40F290AA2BDFB37000DCF136 /* 16-noise-cancellation.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "16-noise-cancellation.swift"; sourceTree = "<group>"; };
40F290AC2BDFB3CA00DCF136 /* 20-noise-cancellation.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "20-noise-cancellation.swift"; sourceTree = "<group>"; };
40FFDC362B63E400004DA7A2 /* 08-permissions-and-moderation.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "08-permissions-and-moderation.swift"; sourceTree = "<group>"; };
40FFDC382B63E459004DA7A2 /* 09-reactions-and-custom-events.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "09-reactions-and-custom-events.swift"; sourceTree = "<group>"; };
40FFDC382B63E459004DA7A2 /* 09-reactions.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "09-reactions.swift"; sourceTree = "<group>"; };
40FFDC3A2B63E493004DA7A2 /* 10-view-slots.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "10-view-slots.swift"; sourceTree = "<group>"; };
40FFDC3C2B63E6EC004DA7A2 /* 11-call-lifecycle.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "11-call-lifecycle.swift"; sourceTree = "<group>"; };
40FFDC3E2B63E734004DA7A2 /* 12-call-state.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "12-call-state.swift"; sourceTree = "<group>"; };
Expand Down Expand Up @@ -150,6 +151,7 @@
40FFDCA12B640741004DA7A2 /* 14-livestream-player.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "14-livestream-player.swift"; sourceTree = "<group>"; };
40FFDCA32B640772004DA7A2 /* 15-long-press-to-focus.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "15-long-press-to-focus.swift"; sourceTree = "<group>"; };
40FFDCA52B6408DE004DA7A2 /* 00-ringing.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "00-ringing.swift"; sourceTree = "<group>"; };
84BA15AF2CA2F04F0018DC51 /* 10-custom-events.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "10-custom-events.swift"; sourceTree = "<group>"; };
84BA15AD2CA2EF420018DC51 /* 07-querying-call-members.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "07-querying-call-members.swift"; sourceTree = "<group>"; };
/* End PBXFileReference section */

Expand Down Expand Up @@ -221,8 +223,9 @@
400D91D42B63E27300EBA47D /* 07-dependency-injection.swift */,
84BA15AD2CA2EF420018DC51 /* 07-querying-call-members.swift */,
40FFDC362B63E400004DA7A2 /* 08-permissions-and-moderation.swift */,
40FFDC382B63E459004DA7A2 /* 09-reactions-and-custom-events.swift */,
40FFDC382B63E459004DA7A2 /* 09-reactions.swift */,
40FFDC3A2B63E493004DA7A2 /* 10-view-slots.swift */,
84BA15AF2CA2F04F0018DC51 /* 10-custom-events.swift */,
40FFDC3C2B63E6EC004DA7A2 /* 11-call-lifecycle.swift */,
40FFDC3E2B63E734004DA7A2 /* 12-call-state.swift */,
40FFDC432B63E95D004DA7A2 /* 14-swiftui-vs-uikit.swift */,
Expand Down Expand Up @@ -471,6 +474,7 @@
40FFDC4B2B63EC3D004DA7A2 /* 02-outgoing-call.swift in Sources */,
40FFDC6D2B63F556004DA7A2 /* 03-video-theme.swift in Sources */,
40FFDC492B63EB92004DA7A2 /* 01-call-container.swift in Sources */,
84BA15B02CA2F04F0018DC51 /* 10-custom-events.swift in Sources */,
40FFDC4D2B63ED16004DA7A2 /* 03-incoming-call.swift in Sources */,
409C396F2B67CDF30090044C /* 09-broadcasting.swift in Sources */,
40FFDC692B63F474004DA7A2 /* 05-call-background.swift in Sources */,
Expand All @@ -480,7 +484,7 @@
40FFDC962B64023A004DA7A2 /* 08-permission-requests.swift in Sources */,
400D91CF2B63DE0100EBA47D /* 03-call-and-participant-state.swift in Sources */,
40FFDC652B63F395004DA7A2 /* 03-avatars.swift in Sources */,
40FFDC392B63E459004DA7A2 /* 09-reactions-and-custom-events.swift in Sources */,
40FFDC392B63E459004DA7A2 /* 09-reactions.swift in Sources */,
40FFDC7C2B63FB76004DA7A2 /* 03-custom-label.swift in Sources */,
40FFDC5C2B63F137004DA7A2 /* 02-call-participants.swift in Sources */,
40FFDC7A2B63FA96004DA7A2 /* 02-replacing-call-controls.swift in Sources */,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,4 +20,10 @@ fileprivate func content() {
asyncContainer {
let response = try await call.sendCustomEvent(["type": .string("draw"), "x": .number(10), "y": .number(20)])
}

asyncContainer {
for await event in call.subscribe(for: CallReactionEvent.self) {
// handle reaction event
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
import StreamVideo
import StreamVideoSwiftUI
import SwiftUI
import Combine

@MainActor
fileprivate func content() {
asyncContainer {
let response = try await call.sendCustomEvent(["type": .string("draw"), "x": .number(10), "y": .number(20)])
}

asyncContainer {
func sendImageData(_ data: Data) async {
guard
let snapshot = UIImage(data: data),
let resizedImage = resize(image: snapshot, to: .init(width: 30, height: 30)),
let snapshotData = resizedImage.jpegData(compressionQuality: 0.8)
else {
return
}

do {
try await call.sendCustomEvent([
"snapshot": .string(snapshotData.base64EncodedString())
])
} catch {
log.error("Failed to send image.", error: error)
}
}

func resize(
image: UIImage,
to targetSize: CGSize
) -> UIImage? {
guard
image.size.width > targetSize.width || image.size.height > targetSize.height
else {
return image
}

let widthRatio = targetSize.width / image.size.width
let heightRatio = targetSize.height / image.size.height

// Determine the scale factor that preserves aspect ratio
let scaleFactor = min(widthRatio, heightRatio)

let scaledWidth = image.size.width * scaleFactor
let scaledHeight = image.size.height * scaleFactor
let targetRect = CGRect(
x: (targetSize.width - scaledWidth) / 2,
y: (targetSize.height - scaledHeight) / 2,
width: scaledWidth,
height: scaledHeight
)

// Create a new image context
UIGraphicsBeginImageContextWithOptions(targetSize, false, 0)
image.draw(in: targetRect)

let newImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()

return newImage
}
}

asyncContainer {
for await event in call.subscribe(for: CustomVideoEvent.self) {
// read custom data
let customData = event.custom
// perform actions with the custom data.
}
}
}
30 changes: 0 additions & 30 deletions docusaurus/docs/iOS/03-guides/09-reactions-and-custom-events.mdx

This file was deleted.

32 changes: 32 additions & 0 deletions docusaurus/docs/iOS/03-guides/09-reactions.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
---
title: Reactions
description: How reactions work
---

## Sending Reactions

It's easy to add reactions to your call.

```swift
let response = try await call.sendReaction(type: "fireworks")
```

You can also add custom data to the reaction and specify a specific emoji

```swift
let response = try await call.sendReaction(
type: "raise-hand",
custom: ["mycustomfield": "hello"],
emojiCode: ":smile:"
)
```

## Listening to Reactions

Here's an example that shows how to listen to reaction events:

```swift
for await event in call.subscribe(for: CallReactionEvent.self) {
// handle reaction event
}
```
101 changes: 101 additions & 0 deletions docusaurus/docs/iOS/03-guides/10-custom-events.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
---
title: Custom Events
description: How custom events work
---

## Sending Custom Events

In case the reaction system isn't flexible enough we also support custom events.

You can use custom events to send data between participants in the call. This is a realtime layer that you can broadcast your own events to.

For example, if you are building a collaborative drawing app, you can send the coordinates to the other participants with the following code:

```swift
let response = try await call.sendCustomEvent(["type": .string("draw"), "x": .number(10), "y": .number(20)])
```

The data that can be passed with a custom event has a limit of 100KB.

If you want to pass larger files:
- you can send URLs to those resources and download them from your location when the event is received.
- you can split the file into chunks of bytes and send them with separate events.
- if you are sending an image, you can resize it before you pass it in the event.

Here's an example that shows how to resize an image and send it as a base 64 encoded string via custom event:

```swift
func sendImageData(_ data: Data) async {
guard
let snapshot = UIImage(data: data),
let resizedImage = resize(image: snapshot, to: .init(width: 30, height: 30)),
let snapshotData = resizedImage.jpegData(compressionQuality: 0.8)
else {
return
}

do {
try await call.sendCustomEvent([
"snapshot": .string(snapshotData.base64EncodedString())
])
} catch {
log.error("Failed to send image.", error: error)
}
}

private func resize(
image: UIImage,
to targetSize: CGSize
) -> UIImage? {
guard
image.size.width > targetSize.width || image.size.height > targetSize.height
else {
return image
}

let widthRatio = targetSize.width / image.size.width
let heightRatio = targetSize.height / image.size.height

// Determine the scale factor that preserves aspect ratio
let scaleFactor = min(widthRatio, heightRatio)

let scaledWidth = image.size.width * scaleFactor
let scaledHeight = image.size.height * scaleFactor
let targetRect = CGRect(
x: (targetSize.width - scaledWidth) / 2,
y: (targetSize.height - scaledHeight) / 2,
width: scaledWidth,
height: scaledHeight
)

// Create a new image context
UIGraphicsBeginImageContextWithOptions(targetSize, false, 0)
image.draw(in: targetRect)

let newImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()

return newImage
}
```

## Listening to Custom Events

Custom events are only delivered to clients that are watching the call.

To receive custom events, you need to subscribe to the custom WebSocket event.

```swift
for await event in call.subscribe(for: CustomVideoEvent.self) {
// read custom data
let customData = event.custom
// perform actions with the custom data.
}
```

The custom event has the following properties:

- `callCid`: `String` - the type and call id that identifies the call
- `createdAt`: `Date` - when was the event created
- `custom`: `[String: RawJSON]` - any custom data you send via the `sendCustomEvent` method
- `user`: `UserResponse` - the user who sent the event

0 comments on commit d7c87ba

Please sign in to comment.