1
1
---
2
2
outline : deep
3
3
---
4
+ # Components
4
5
5
- # API
6
+ ## ` <UseMediaRecorder /> `
6
7
7
- ## Props
8
+ ### Props
8
9
9
- ### ` constraints `
10
+ #### ` constraints `
10
11
11
12
- Type: ` MediaStreamConstraints `
12
13
- Required: ` true `
13
14
14
15
The constraints parameter is a MediaStreamConstraints object specifying the types of media to request, along with any
15
16
requirements for each type.
16
17
17
- ### ` mediaRecorderOptions `
18
+ #### ` mediaRecorderOptions `
18
19
19
20
- Type: ` MediaRecorderOptions `
20
21
- Default: ` {} `
21
22
22
23
Options to pass to the MediaRecorder constructor. [ See MDN] ( https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/MediaRecorder#options )
23
24
24
- ## Events
25
+ ### Events
25
26
26
27
``` ts
27
28
defineEmits <{
@@ -35,48 +36,48 @@ defineEmits<{
35
36
36
37
Analog to the MediaRecorder events (` onstart ` , ` onpause ` ,...).
37
38
38
- ### ` @start `
39
+ #### ` @start `
39
40
40
41
Emitted when the MediaRecorder starts recording.
41
42
42
- ### ` @pause `
43
+ #### ` @pause `
43
44
44
45
Emitted when the MediaRecorder pauses recording.
45
46
46
- ### ` @resume `
47
+ #### ` @resume `
47
48
48
49
Emitted when the MediaRecorder resumes recording.
49
50
50
- ### ` @stop `
51
+ #### ` @stop `
51
52
52
53
Emitted when the MediaRecorder stops recording.
53
54
54
- ### ` @error `
55
+ #### ` @error `
55
56
56
57
Emitted when an error occurs.
57
58
58
- ## Slots
59
+ ### Slots
59
60
60
- ### ` default `
61
+ #### ` default `
61
62
62
63
The default slot is used to render the component's content.
63
64
64
- #### slopProps
65
+ ##### slopProps
65
66
66
- ##### ` data `
67
+ ###### ` data `
67
68
68
69
- Type: ` Ref<Blob[]> `
69
70
- Initial value: ` ref([]) `
70
71
71
72
An array of Blobs that are created by the MediaRecorder. The Blobs are created when the MediaRecorder is stopped. Or
72
73
when the timeslice is set and the timeslice is reached.
73
74
74
- ##### ` stream `
75
+ ###### ` stream `
75
76
76
77
- Type: ` ShallowRef<MediaStream | undefined> `
77
78
- Initial value: ` shallowRef() `
78
79
79
- ##### ` state `
80
+ ###### ` state `
80
81
81
82
- Type: ` ShallowRef<MediaRecorderState | undefined> `
82
83
- Initial value: ` shallowRef() `
@@ -88,7 +89,7 @@ The current state of the MediaRecorder. The state can be one of the following:
88
89
- ` 'recording' ` - The MediaRecorder is recording data.
89
90
- ` 'paused' ` - The MediaRecorder is paused.
90
91
91
- ##### ` mimeType `
92
+ ###### ` mimeType `
92
93
93
94
- Type: ` ComputedRef<string | undefined> `
94
95
- Initial value: ` computed(()=>{}) `
@@ -102,72 +103,72 @@ check if the mimeType
102
103
is supported via [ ` isMimeTypeSupported ` ] ( #ismimetypesupported ) .
103
104
:::
104
105
105
- ##### ` isMimeTypeSupported `
106
+ ###### ` isMimeTypeSupported `
106
107
107
108
- Type: ` ComputedRef<boolean> `
108
109
109
110
If you set the mimeType manually, you can check if the mimeType is supported by the browser via this computed ref.
110
111
111
- ##### ` isSupported `
112
+ ###### ` isSupported `
112
113
113
114
- Type: ` ComputedRef<boolean> `
114
115
115
116
If the MediaRecorder API (and the selected MIME type) is supported by the browser.
116
117
117
- ##### ` mediaRecorder `
118
+ ###### ` mediaRecorder `
118
119
119
120
- Type: ` ComputedRef<MediaRecorder | undefined> `
120
121
- Initial value: ` computed(()=>{}) `
121
122
122
123
The MediaRecorder instance. The MediaRecorder is created when the stream is available.
123
124
124
- ##### ` start `
125
+ ###### ` start `
125
126
126
127
- Type: ` (timeslice: number | undefined) => Promise<void> `
127
128
- MDN: [ MediaRecorder.start()] ( https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/start )
128
129
129
130
Creates the stream and the MediaRecorder instance. The stream is created with the constraints object. The MediaRecorder
130
131
is created with the stream and the mediaRecorderOptions object.
131
132
132
- ##### ` pause `
133
+ ###### ` pause `
133
134
134
135
- Type: ` () => void `
135
136
- MDN: [ MediaRecorder.pause()] ( https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/pause )
136
137
137
- ##### ` resume `
138
+ ###### ` resume `
138
139
139
140
- Type: ` () => void `
140
141
- MDN: [ MediaRecorder.resume()] ( https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/resume )
141
142
142
- ##### ` stop `
143
+ ###### ` stop `
143
144
144
145
- Type: ` () => void `
145
146
- MDN: [ MediaRecorder.stop()] ( https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/stop )
146
147
147
- ## Methods
148
+ ### Methods
148
149
149
150
` UseMediaRecorder ` does expose the following methods:
150
151
151
- ### ` start(timeslice: number | undefined): Promise<void> `
152
+ #### ` start(timeslice: number | undefined): Promise<void> `
152
153
153
154
- MDN: [ MediaRecorder.start()] ( https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/start )
154
155
155
156
Creates the stream and the MediaRecorder instance. The stream is created with the constraints object. The MediaRecorder
156
157
is created with the stream and the mediaRecorderOptions object.
157
158
158
- ### ` pause(): void `
159
+ #### ` pause(): void `
159
160
160
161
- MDN: [ MediaRecorder.pause()] ( https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/pause )
161
162
162
- ### ` resume(): void `
163
+ #### ` resume(): void `
163
164
164
165
- MDN: [ MediaRecorder.resume()] ( https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/resume )
165
166
166
- ### ` stop(): void `
167
+ #### ` stop(): void `
167
168
168
169
- MDN: [ MediaRecorder.stop()] ( https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/stop )
169
170
170
- ### Usage
171
+ #### Usage
171
172
172
173
``` vue
173
174
<script setup>
0 commit comments