Easy to record audio and video with your browser – MediaRecorder API

The original link

The browser has a powerful and simple API, MediaRecorder, which, as its name suggests, can be used to record audio and video. Without further ado, let’s go to demo

Demo1: Records the voice

show in codepen

Demo2: Record a video

show in codepen

After watching the demo, let’s see how to implement —

Introduction to the

The API is pretty crude

A constructor MediaRecorder()

Create a new MediaRecorder object for recording operations.

The previous demo used only two methods and two events

Two methods start and stop

start()

Start recording media.

You can set a parameter to split the recorded media into individual blocks instead of recording a very large block of content as the default.

stop()

Stop recording, and the DataAvailable event is raised to return recorded data that stores the Blob contents.

Three events start, stop, and dataavailable

onstart

Triggered when recording starts

onstop

Trigger at the end of recording

ondataavailable

When recording ends, the event object returns recorded media data

Code snippet

Part of the code used in the demo:

Obtain user media rights and create media recording objects:

RequestMediaAccess () {/ / get the user access media, video parameters {audio: true, video: true}. The navigator mediaDevices. GetUserMedia ({audio: }). Then (stream => {this.recorder = new window.mediaRecorder (stream); this.bindEvents(); }, error => {alert(' error, please make sure browser is allowed to obtain recording rights '); }); }Copy the code

Bind events to process recorded data:

bindEvents () { this.recorder.ondataavailable = this.getRecordingData; this.recorder.onstop = this.saveRecordingData; }, getRecordingData (e) {// Recorded data this.chunks.push(e.ata); }, // save audio data saveRecordingData () {let blob = new blob (this.chunks, {'type' : 'audio/ogg; Codecs =opus'}), audioStream = url.createObjecturl (blob), duration = parseInt(blob.size / 6600); If (duration <= 0) {alert(' talk too short '); return; } if(duration > 60) { duration = 60; } this.chunkList.push({duration: duration, stream: audioStream}); this.chunks = []; }, // save video data saveRecordingData () {let blob = new blob (this.chunks, {'type' : 'video/webm' }), videoStream = URL.createObjectURL(blob); this.chunkList.push({stream: videoStream}); this.onCapture(this.index); this.chunks = []; OnCapture (index) {let item = this.chunkList[index]; this.ctx.drawImage(this.video, 0, 0, this.canvas.width, this.canvas.height); this.canvas.toBlob((blob) => { let src = URL.createObjectURL(blob); this.$set(item, 'poster', src); }); // index this. Index ++; // Hide video this.showVideo(false); this.video.srcObject = null; }Copy the code

Pay attention to

The estimated length of the piece is my patting head tinker 😂. I don’t know how to get duration, it seems that I can only get duration by assigning SRC to the audio, but I’ve tried several methods, but it doesn’t work… Still hope the big guy that has experience gives directions a little 🙏.

See codepen, demo1, demo2 for specific codes

other

In addition, there are properties, other methods, and events

attribute

  • mimeType

Returns the MIME type of the recording container selected by the selector when the MediaRecorder object was created

  • state

Returns the current state of the recording object MediaRecorder: Inactive, recording, paused

  • stream

Returns the stream object passed in by the constructor when the Recorder object MediaRecorder was created

  • ignoreMutedMedia

The input source used to specify whether MediaRecorder records a silent input source. If false, silent audio or black screen video will be recorded. The default value is false

  • videoBitsPerSecond

Returns the encoding rate used for the video

  • audioBitsPerSecond

Returns the encoding rate used for audio

methods

  • isTypeSupported()

Returns a Boolean value indicating whether the set MIME Type is supported by the current user’s device

  • pause()

Pause media recording

  • resume()

Resume recording the recording action that was paused

  • requestData()

Requests a record from the start to the current received, stored as a Blob. (or return the content since the last call to the requestData() method). After calling this method, recording will continue, but a new Blob object will be created

The event

  • onerror

Triggered when recording error occurs

  • onpause

Triggered when recording pauses

  • onresume

Triggered when recording continues

conclusion

The API is browser – friendly, and currently only supports advanced versions of Chrome(49+) and Firfox (61+). Android versions of Chrome are also available.

The recording of audio and video may be simple, but the application in chat still involves a lot of problems, such as data transmission, encryption and what, to make a tool like wechat, there is still a lot to go.

The resources

  • MediaStream Recording API
  • MediaRecorder
  • HTML5’s Media Recorder API in Action on Chrome and Firefox