Web media extensions là gì

MediaRecorder[]

Creates a new MediaRecorder object, given a MediaStream to record. Options are available to do things like set the container's MIME type [such as "video/webm" or "video/mp4"] and the bit rates of the audio and video tracks or a single overall bit rate.

MediaRecorder.mimeType Read only

Returns the MIME type that was selected as the recording container for the MediaRecorder object when it was created.

Returns the current state of the MediaRecorder object [MediaRecorder2, MediaRecorder3, or MediaRecorder4.]

Returns the stream that was passed into the constructor when the MediaRecorder was created.

Returns the video encoding bit rate in use. This may differ from the bit rate specified in the constructor [if it was provided].

Returns the audio encoding bit rate in use. This may differ from the bit rate specified in the constructor [if it was provided].

MediaRecorder9

A static method which returns a MediaRecorder[]0 or MediaRecorder[]1 value indicating if the given MIME media type is supported by the current user agent.

MediaRecorder[]2

Pauses the recording of media.

Requests a MediaRecorder[]4 containing the saved data received thus far [or since the last time MediaRecorder[]5 was called. After calling this method, recording continues, but in a new MediaRecorder[]4.

Resumes recording of media after having been paused.

Begins recording media; this method can optionally be passed a MediaRecorder[]9 argument with a value in milliseconds. If this is specified, the media will be captured in separate chunks of that duration, rather than the default behavior of recording the media in a single large chunk.

Stops recording, at which point a MediaRecorder[]1 event containing the final MediaRecorder[]4 of saved data is fired. No more recording occurs.

Listen to these events using MediaRecorder[]3 or by assigning an event listener to the MediaRecorder[]4 property of this interface.

Fires periodically each time MediaRecorder[]9 milliseconds of media have been recorded [or when the entire media has been recorded, if MediaRecorder[]9 wasn't specified]. The event, of type MediaRecorder[]8, contains the recorded media in its MediaRecorder[]9 property.

Fired when there are fatal errors that stop recording. The received event is based on the MediaRecorder1 interface, whose MediaRecorder0 property contains a MediaRecorder3 that describes the actual error that occurred.

Fired when media recording is paused.

Fired when media recording resumes after being paused.

Fired when media recording starts.

Fired when media recording ends, either when the MediaStream ends, or after the MediaRecorder[]0 method is called.

Fired when media recording has a non-fatal error, or after the MediaStream1 method is called.

if [navigator.mediaDevices] {
  console.log["getUserMedia supported."];

  const constraints = { audio: true };
  let chunks = [];

  navigator.mediaDevices
    .getUserMedia[constraints]
    .then[[stream] => {
      const mediaRecorder = new MediaRecorder[stream];

      visualize[stream];

      record. title = [] => {
        mediaRecorder.start[];
        console.log[mediaRecorder.state];
        console.log["recorder started"];
        record.style.background = "red";
        record.style.color = "black";
      };

      stop. title = [] => {
        mediaRecorder.stop[];
        console.log[mediaRecorder.state];
        console.log["recorder stopped"];
        record.style.background = "";
        record.style.color = "";
      };

      mediaRecorder.onstop = [e] => {
        console.log["data available after MediaRecorder.stop[] called."];

        const clipName = prompt["Enter a name for your sound clip"];

        const clipContainer = document.createElement["article"];
        const clipLabel = document.createElement["p"];
        const audio = document.createElement["audio"];
        const deleteButton = document.createElement["button"];

        clipContainer.classList.add["clip"];
        audio.setAttribute["controls", ""];
        deleteButton.textContent = "Delete";
        clipLabel.textContent = clipName;

        clipContainer.appendChild[audio];
        clipContainer.appendChild[clipLabel];
        clipContainer.appendChild[deleteButton];
        soundClips.appendChild[clipContainer];

        audio.controls = true;
        const blob = new Blob[chunks, { type: "audio/ogg; codecs=opus" }];
        chunks = [];
        const audioURL = URL.createObjectURL[blob];
        audio.src = audioURL;
        console.log["recorder stopped"];

        deleteButton. title = [e] => {
          const evtTgt = e.target;
          evtTgt.parentNode.parentNode.removeChild[evtTgt.parentNode];
        };
      };

      mediaRecorder.ondataavailable = [e] => {
        chunks.push[e.data];
      };
    }]
    .catch[[err] => {
      console.error[`The following error occurred: ${err}`];
    }];
}

Note: This code sample is inspired by the Web Dictaphone demo. Some lines have been omitted for brevity; refer to the source for the complete code.