You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docusaurus/docs/Flutter/02-tutorials/03-livestreaming.mdx
+10-10Lines changed: 10 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,7 +3,7 @@ slug: /livestreaming
3
3
title: Livestreaming
4
4
---
5
5
6
-
In this tutorial, we will cover the steps to quickly build a low-latency live-streaming experience in Flutter using Stream’s Video SDK. The livestream is broadcasted using Stream's edge network of servers around the world.
6
+
In this tutorial, we will cover the steps to quickly build a low-latency live-streaming experience in Flutter using Stream’s Video SDK. The Livestream is broadcast using Stream's edge network of servers around the world.
7
7
8
8
For this tutorial, we will cover the following topics:
9
9
@@ -56,7 +56,7 @@ Future<void> main() async {
56
56
```
57
57
58
58
### Setting up the UI
59
-
To keep things simple, our sample application will only consist of two screens, a landing page to allow users the ability to create a livestream and another option to allow users the ability to join an existing livestream.
59
+
To keep things simple, our sample application will only consist of two screens, a landing page to allow users the ability to create a Livestream and another option to allow users the ability to join an existing Livestream.
60
60
61
61
**Home page:**
62
62
```dart
@@ -286,14 +286,14 @@ class LiveStreamScreen extends StatelessWidget {
286
286
}
287
287
```
288
288
289
-
### Viewing a livestream (Webrtc)
290
-
Stream offers two flavors of livestreaming, WebRTC-based livestreaming and RTMP-based livestreaming.
289
+
### Viewing a Livestream (WebRTC)
290
+
Stream offers two flavors of Livestreaming, WebRTC-based livestreaming and RTMP-based livestreaming.
291
291
292
-
WebRTC based livestreaming allows users to easily start a livestream directly from their phone and benefit from ultra low latency.
292
+
WebRTC based livestreaming allows users to easily start a Livestream directly from their phone and benefit from ultra low latency.
293
293
294
294
To setup WebRTC based livestreaming, we can first make a call using `makeCall` and set the call type to `livestream` followed by a room ID (this can also be left blank).
295
295
296
-
Next, we can set some default behaviour for our livestream such as configuring whether the camera and microphone should be enabled by default.
296
+
Next, we can set some default behaviour for our Livestream such as configuring whether the camera and microphone should be enabled by default.
297
297
298
298
Finally, we can create the call by invoking `getOrCreate` on the object we just created. By default, a `livestream` call is started in backstage mode, meaning the call hosts can join and see each other but the call will be invisible to others.
To join the call, we can run another instance of the app on a second device and copy the call ID from the console. When the app is ready, we can click “Join a livestream” and paste in the ID we copied.
328
+
To join the call, we can run another instance of the app on a second device and copy the call ID from the console. When the app is ready, we can click “Join a Livestream” and paste in the ID we copied.
329
329
330
330
If all works as intended, we will be able to view the video feed from the first device and observe the view count increase by one.
331
331
@@ -341,13 +341,13 @@ By default, when a call is created, it is given a dedicated RTMP URL which can b
341
341
1. The RTMP URL of the call
342
342
2. A “streaming key” comprised of your application’s API Key and User Token in the format `apikey/usertoken`
343
343
344
-
With these two pieces of information, we can update the settings in OBS then select the “Start Streaming” option to view our livestream in the application!
344
+
With these two pieces of information, we can update the settings in OBS then select the “Start Streaming” option to view our Livestream in the application.
345
345
346
346
:::note
347
347
A user with the name and associated with the user token provided to OBS will appear in the call. It is worth creating a dedicated user object for OBS streaming.
348
348
:::
349
349
350
-
### Viewing a livestream (HLS)
350
+
### Viewing a Livestream (HLS)
351
351
The final piece of livestreaming using Stream is support for HLS or HTTP Live Streaming. HLS unlike WebRTC based streaming tends to have a 10 to 20 second delay but offers video buffering under poor network condition.
352
352
353
353
To enable HLS support, your `call` must first be placed into “broadcasting” mode using the `call.startHLS()` method.
@@ -364,7 +364,7 @@ if (result.isSuccess) {
364
364
}
365
365
```
366
366
367
-
With the HLS URL, your call can be broadcasted to most livestreaming platforms such as Youtube.
367
+
With the HLS URL, your call can be broadcast to most livestreaming platforms such as YouTube.
368
368
369
369
### Recap
370
370
In just a few minutes, we were able to create our first livestreaming experience for our app. Please let us know if you ran into any issues during the process. Our team constantly reviews feedback and applies changes to improve the overall experience.
Copy file name to clipboardExpand all lines: docusaurus/docs/Flutter/03-core-concepts/02-joining-and-creating-calls.mdx
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -28,7 +28,7 @@ Although we are not passing any parameters to `getOrCreate` in the above example
28
28
2. Ringing: If ringing is set to `true`, Stream will send a notification to the users on the call, triggering the platform call screen on iOS and Android.
29
29
30
30
:::note
31
-
Depending on call permissions settings, call member may have different permissions than other users joining the call (i.e. call can be configured so only members can join). See [here](#Restricting-access)
31
+
Depending on call permissions settings, call member may have different permissions than other users joining the call. For example, call can be configured so only members can join. See [here](#Restricting-access).
32
32
:::
33
33
34
34
By default, calling `getOrCreate` assigns `admin` permission to each user who is supplied during creation.
Copy file name to clipboardExpand all lines: docusaurus/docs/Flutter/06-ui-cookbook/05-watching-a-livestream.mdx
+6-6Lines changed: 6 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,24 +1,24 @@
1
1
# Watching a Livestream
2
2
3
-
This sample walks you through building advanced UIs for watching a livestream on Flutter.
3
+
This sample walks you through building advanced UIs for watching a Livestream on Flutter.
4
4
5
5
:::note
6
-
In this cookbook tutorial, we will assume that you already know how to join a livestream call. If you haven't familiarized yourself with the **[Livestream Tutorial](https://getstream.io/video/docs/flutter/livestreaming/)** yet, we highly recommend doing so before proceeding with this cookbook.
6
+
In this cookbook tutorial, we will assume that you already know how to join a Livestream call. If you haven't familiarized yourself with the **[Livestream Tutorial](https://getstream.io/video/docs/flutter/livestreaming/)** yet, we highly recommend doing so before proceeding with this cookbook.
7
7
::::
8
8
9
9
To view an HLS stream and benefit from the full experience of selecting different streaming qualities and performing different player actions like muting and unmuting the stream, we recommend using [lecle_yoyo_player](https://pub.dev/packages/lecle_yoyo_player).
10
10
11
11
When building for livestreaming, there are a few considerations you need to keep in mind for the UI:
12
12
13
13
- UI for when the video isn't loaded yet
14
-
- A message to show when the livestream hasn't started yet
15
-
- What to show when the livestream stopped
14
+
- A message to show when the Livestream hasn't started yet
15
+
- What to show when the Livestream stopped
16
16
- How to indicate when there are connection problems
17
17
- Number of participants
18
18
- Duration of the call
19
19
20
20
## Setting up the UI
21
-
To setup our UI for rendering a livestream, we can use Flutter’s built-in `StreamBuilder` widget for listening to changes in our call state and rendering different UIs based on the stage of our live stream:
21
+
To setup our UI for rendering a Livestream, we can use Flutter’s built-in `StreamBuilder` widget for listening to changes in our call state and rendering different UIs based on the stage of our live stream:
22
22
23
23
```dart
24
24
@override
@@ -55,7 +55,7 @@ To setup our UI for rendering a livestream, we can use Flutter’s built-in `Str
55
55
By looking at different properties on our `CallState`, we can render different UIs and messages based on whether the call is live, backstage, or loading. A `Stack` also allows us to add different secondary live stream elements such as a view count above the main UI.
56
56
57
57
## Rendering the Livestream
58
-
Before running the code below to see the livestream in action, we recommend going to our [Dashboard](https://dashboard.getstream.io/) and creating a livestream first since it can be done visually without having to create another instance of the application on the simulator.
58
+
Before running the code below to see the Livestream in action, we recommend going to our [Dashboard](https://dashboard.getstream.io/) and creating a Livestream first since it can be done visually without having to create another instance of the application on the simulator.
59
59
60
60
Once a stream is started on the dashboard, the `Livestream ID` can be passed to the `id` parameter for the `Call` object in code.
0 commit comments