Skip to content

Commit

Permalink
Media Recorder API | sync section title with templates & add marks fo…
Browse files Browse the repository at this point in the history
…r `MediaRecorderErrorEvent` & update links (#31243)

* section title update

* add Deprecated and Non-standard mark

* add spec-urls

* cleanup links

* update links
  • Loading branch information
skyclouds2001 authored Dec 23, 2023
1 parent 78c583b commit 88333e9
Show file tree
Hide file tree
Showing 3 changed files with 10 additions and 12 deletions.
12 changes: 6 additions & 6 deletions files/en-us/web/api/mediastream_recording_api/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,14 @@ title: MediaStream Recording API
slug: Web/API/MediaStream_Recording_API
page-type: web-api-overview
browser-compat: api.MediaRecorder
spec-urls: https://w3c.github.io/mediacapture-record/
---

{{DefaultAPISidebar("MediaStream Recording")}}

The **MediaStream Recording API**, sometimes referred to as the _Media Recording API_ or the _MediaRecorder API_, is closely affiliated with the [Media Capture and Streams API](/en-US/docs/Web/API/Media_Capture_and_Streams_API) and the [WebRTC API](/en-US/docs/Web/API/WebRTC_API). The MediaStream Recording API makes it possible to capture the data generated by a {{domxref("MediaStream")}} or {{domxref("HTMLMediaElement")}} object for analysis, processing, or saving to disk. It's also surprisingly easy to work with.

## Basic concepts
## Concepts and usage

The MediaStream Recording API is comprised of a single major interface, {{domxref("MediaRecorder")}}, which does all the work of taking the data from a {{domxref("MediaStream")}} and delivering it to you for processing. The data is delivered by a series of {{domxref("MediaRecorder.dataavailable_event", "dataavailable")}} events, already in the format you specify when creating the `MediaRecorder`. You can then process the data further or write it to file as desired.

Expand Down Expand Up @@ -108,13 +109,13 @@ Code similar to this can be used to let the user restrict the set of devices the

To learn more about using the MediaStream Recording API, see [Using the MediaStream Recording API](/en-US/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API), which shows how to use the API to record audio clips. A second article, [Recording a media element](/en-US/docs/Web/API/MediaStream_Recording_API/Recording_a_media_element), describes how to receive a stream from an {{HTMLElement("audio")}} or {{HTMLElement("video")}} element and use the captured stream (in this case, recording it and saving it to a local disk).

## Reference
## Interfaces

- {{domxref("BlobEvent")}}
- : Each time a chunk of media data is finished being recorded, it's delivered to consumers in {{domxref("Blob")}} form using a {{domxref("BlobEvent")}} of type `dataavailable`.
- {{domxref("MediaRecorder")}}
- : The primary interface that implements the MediaStream Recording API.
- {{domxref("MediaRecorderErrorEvent")}}
- {{domxref("MediaRecorderErrorEvent")}} {{Deprecated_Inline}} {{Non-standard_Inline}}
- : The interface that represents errors thrown by the MediaStream Recording API. Its {{domxref("MediaRecorderErrorEvent.error", "error")}} property is a {{domxref("DOMException")}} that specifies that error occurred.

## Specifications
Expand All @@ -127,10 +128,9 @@ To learn more about using the MediaStream Recording API, see [Using the MediaStr

## See also

- [Using the MediaStream Recording API](/en-US/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API)
- [Recording a media element](/en-US/docs/Web/API/MediaStream_Recording_API/Recording_a_media_element)
- [Media Capture and Streams API](/en-US/docs/Web/API/Media_Capture_and_Streams_API) landing page
- {{domxref("MediaDevices.getUserMedia()")}}
- [simpl.info MediaStream Recording demo](https://simpl.info/mediarecorder/), by [Sam Dutton](https://twitter.com/sw12)
- {{domxref("MediaDevices.getUserMedia")}}
- [HTML5's Media Recorder API in Action on Chrome and Firefox](https://blog.addpipe.com/mediarecorder-api/)
- [MediaRecorder polyfill](https://github.com/ai/audio-recorder-polyfill) for Safari and Edge
- [TutorRoom](https://github.com/chrisjohndigital/TutorRoom): HTML video capture/playback/download using getUserMedia and the MediaStream Recording API ([source on GitHub](https://github.com/chrisjohndigital/TutorRoom))
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -288,6 +288,5 @@ You can {{LiveSampleLink("Example_of_recording_a_media_element", "view the full

## See also

- [MediaStream Recording API](/en-US/docs/Web/API/MediaStream_Recording_API)
- [Using the MediaStream Recording API](/en-US/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API)
- [Media Capture and Streams API](/en-US/docs/Web/API/Media_Capture_and_Streams_API)
- [Media Capture and Streams API](/en-US/docs/Web/API/Media_Capture_and_Streams_API) landing page
- {{domxref("MediaDevices.getUserMedia()")}}
Original file line number Diff line number Diff line change
Expand Up @@ -263,6 +263,5 @@ Finally, we set an `onclick` handler on the delete button to be a function that

## See also

- [MediaStream Recording API](/en-US/docs/Web/API/MediaStream_Recording_API) landing page
- {{domxref("Navigator.getUserMedia()")}}
- [MediaRecorder API now supported by 65% of your website users](https://blog.addpipe.com/media-recorder-api-is-now-supported-by-65-of-all-desktop-internet-users/)
- [Media Capture and Streams API](/en-US/docs/Web/API/Media_Capture_and_Streams_API) landing page
- {{domxref("MediaDevices.getUserMedia()")}}

0 comments on commit 88333e9

Please sign in to comment.