Skip to content

Commit a0e2797

Browse files
cloudwebrtccloudwebrtc
committed
feat: docs v1.0 (WIP).
1 parent 62ce497 commit a0e2797

File tree

10 files changed

+376
-95
lines changed

10 files changed

+376
-95
lines changed

‎docs/flutter-webrtc/api-docs/_category_.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"label": "API Docs",
3+
"position": 1
4+
}

‎docs/flutter-webrtc/api-docs/get-display-media.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
---
2+
sidebar_position: 3
3+
---
4+
5+
# GetDisplayMedia
6+
7+
The `getDisplayMedia` method of the `MediaDevices` interface prompts the user to select and grant permission to capture the contents of a display or portion thereof (such as a window or screen) as a `MediaStream`.
8+
9+
The corresponding JS API docs is here [MediaDevices.getDisplayMedia()](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia).
10+
11+
## Usage
12+
13+
```dart
14+
MediaStream stream = await navigator.mediaDevices.getDisplayMedia({
15+
'video': true,
16+
'audio': true,
17+
});
18+
```
19+
20+
## Parameters
21+
22+
- audio: A Boolean value that indicates whether the `MediaStream` should include an audio track.
23+
audio is optional, default is false. only chrome tabs can support audio caputre.

‎docs/flutter-webrtc/api-docs/get-user-media.md

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
---
2+
sidebar_position: 2
3+
---
4+
5+
# GetUserMedia
6+
7+
The corresponding JS API docs is here
8+
[MediaDevices.getUserMedia()](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia).
9+
10+
## Usage
11+
12+
basic usage:
13+
14+
```dart
15+
await navigator.mediaDevices.getUserMedia({'audio': true, 'video': true});
16+
```
17+
18+
advanced usage:
19+
20+
```dart
21+
await navigator.mediaDevices.getUserMedia({
22+
'audio': true,
23+
'video': {
24+
'facingMode': 'user', // or 'environment' for mobile devices
25+
'width': 1280,
26+
'height': 720,
27+
'frameRate': 30,
28+
}
29+
});
30+
```
31+
32+
## Parameters
33+
34+
- mediaConstraints: A dictionary object that specifies the media constraints for the requested media types.
35+
refer to the [MediaStreamConstraints](https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamConstraints) for more details.
36+
37+
sub options:
38+
39+
- audio: A Boolean value that indicates whether the MediaStream should include an audio track.
40+
41+
or a dictionary object that specifies the audio track's media constraints.
42+
43+
```json
44+
{
45+
'deviceId': 'audio_device_id',
46+
}
47+
```
48+
49+
- video: A Boolean value that indicates whether the MediaStream should include a video track.
50+
51+
or a dictionary object that specifies the video track's media constraints.
52+
53+
```json
54+
{
55+
'deviceId': 'video_device_id',
56+
'facingMode': 'user', // or 'environment' for mobile devices
57+
'width': 1280,
58+
'height': 720,
59+
'frameRate': 30,
60+
}
61+
```
62+
63+
## Return value
64+
65+
A Promise that resolves to a MediaStream object.
66+
67+
Note: The `deviceId` parameter is used to specify the device to use. If you want to use the default device, you can omit this parameter. If you want to use a specific device, you can get the device ID by calling `navigator.mediaDevices.enumerateDevices` [here](./media-devices) and then pass it to the `deviceId` parameter.

‎docs/flutter-webrtc/api-docs/media-devices.md

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
---
2+
sidebar_position: 1
3+
---
4+
5+
# MediaDevices
6+
7+
The corresponding JS API docs is here [MediaDevices](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices).
8+
9+
## Usage
10+
11+
```dart
12+
MediaDevices mediaDevices = await navigator.mediaDevices;
13+
14+
MediaStream stream = await mediaDevices.getUserMedia({
15+
'audio': true,
16+
'video': true,
17+
});
18+
19+
MediaStream displayStream = await mediaDevices.getDisplayMedia({
20+
'video': true,
21+
'audio': true,
22+
});
23+
24+
List<MediaDeviceInfo> devices = await mediaDevices.enumerateDevices();
25+
26+
```
27+
28+
## Methods
29+
30+
- `getUserMedia`: Returns a Promise that resolves to a `MediaStream` object. The `MediaStream` object represents a stream of media content, typically (but not necessarily) including both audio and video.
31+
32+
```dart
33+
MediaStream stream = await mediaDevices.getUserMedia({
34+
'audio': true,
35+
'video': true,
36+
});
37+
```
38+
39+
- `getDisplayMedia`: Returns a Promise that resolves to a `MediaStream` object. The `MediaStream` object represents a stream of media content, typically (but not necessarily) including both audio and video.
40+
41+
```dart
42+
MediaStream stream = await mediaDevices.getDisplayMedia({
43+
'video': true,
44+
'audio': true,
45+
});
46+
```
47+
48+
- `enumerateDevices`: Returns a Promise that resolves to an array of `MediaDeviceInfo` objects, each of which represents a media input or output device.
49+
50+
```dart
51+
List<MediaDeviceInfo> devices = await mediaDevices.enumerateDevices();
52+
```
53+
54+
- `getSupportedConstraints`: Returns a dictionary object that specifies the media constraints supported by the user agent.
55+
only support for web platform.
56+
57+
- `selectAudioOutput`: select audio output device.
58+
support platforms: macOS/Windows/Linux/Web.
59+
60+
## Event Callbacks
61+
62+
- `onDeviceChange`: The `ondevicechange` event handler for the `MediaDevices` interface. It is called when a media input or output device is attached or removed.

‎docs/flutter-webrtc/api-docs/rtc-factory.md

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
---
2+
sidebar_position: 4
3+
---
4+
5+
# RTCFactory
6+
7+
## Methods
8+
9+
- `createPeerConnection`: Creates a new `RTCPeerConnection` object with the specified `RTCConfiguration`.
10+
11+
```dart
12+
RTCPeerConnection pc = await createPeerConnection({
13+
'iceServers': [
14+
{'urls': 'stun:stun.l.google.com:19302'},
15+
]
16+
});
17+
```
18+
19+
- `createLocalMediaStream`: Creates a new `MediaStream` object with the specified `lable`.
20+
21+
```dart
22+
MediaStream stream = factory.createLocalMediaStream('new_stream_label');
23+
```
24+
25+
- `getRtpSenderCapabilities`: Returns a `RTCRtpCapabilities` object that represents the capabilities of the sender for the given `kind`.
26+
27+
```dart
28+
RTCRtpCapabilities capabilities = getRtpSenderCapabilities('video'); // or 'audio'
29+
```
30+
31+
- `getRtpReceiverCapabilities`: Returns a `RTCRtpCapabilities` object that represents the capabilities of the receiver for the given `kind`.
32+
33+
```dart
34+
RTCRtpCapabilities capabilities = getRtpReceiverCapabilities('video'); // or 'audio'
35+
```
36+
37+
## Properties
38+
39+
- `frameCryptorFactory`: Returns a `FrameCryptorFactory` object for End to End Encryption.

‎docs/flutter-webrtc/api-docs/rtc-peerconnection.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
sidebar_position: 5
3+
---
4+
5+
# RTCPeerConnection
6+
7+
## Methods

‎docs/flutter-webrtc/first-app.md

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
---
2+
sidebar_position: 4
3+
---
4+
5+
# First App
6+
7+
## Step 1
8+
9+
Create or use an existing flutter app project and add `flutter_webrtc` to your `pubspec.yaml` file
10+
11+
```shell
12+
flutter create myapp
13+
```
14+
15+
- Add `flutter_webrtc` to your `pubspec.yaml` file
16+
17+
```shell
18+
flutter pub add flutter_webrtc
19+
```
20+
21+
## Step 2
22+
23+
Setup required permissions for audio and video, link to [Project Settings](./project-settings)
24+
25+
Using `navigator.mediaDevices.getUserMedia` to get access to the camera and microphone.
26+
27+
you can view getUserMedia docs [here](./api-docs/get-user-media)
28+
29+
```dart
30+
class _MyHomePageState extends State<MyHomePage> {
31+
RTCVideoRenderer? _renderer;
32+
MediaStream? _stream;
33+
34+
void _openCamera() async {
35+
// create and initialize renderer
36+
_renderer ??= RTCVideoRenderer();
37+
await _renderer!.initialize();
38+
39+
//
40+
try {
41+
_stream = await navigator.mediaDevices
42+
.getUserMedia({'audio': false, 'video': true});
43+
} catch (e) {
44+
//if you get an error, please check the permissions in the project settings.
45+
print(e.toString());
46+
}
47+
48+
// set the MediaStream to the video renderer
49+
_renderer!.srcObject = _stream;
50+
setState(() {});
51+
}
52+
```
53+
54+
## Step 3
55+
56+
render the video renderer in the widget tree
57+
58+
```dart
59+
@override
60+
Widget build(BuildContext context) {
61+
return Scaffold(
62+
appBar: AppBar(
63+
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
64+
title: Text(widget.title),
65+
),
66+
body: Center(
67+
child: SizedBox(
68+
width: 320,
69+
height: 240,
70+
// render the video renderer in the widget tree
71+
child: _renderer != null ? RTCVideoView(_renderer!) : Container(),
72+
),
73+
),
74+
floatingActionButton: FloatingActionButton(
75+
onPressed: _setup,
76+
tooltip: 'open camera',
77+
child: const Icon(Icons.camera_alt),
78+
),
79+
);
80+
}
81+
```
82+

0 commit comments

Comments
 (0)