“Live up to the time, the creation of non-stop, this article is participating in 2021 year-end summary essay competition”

preface

Recently, I studied the API of navigator. MediaDevices and found that I could obtain mediaDevices on the computer. Then I came up with the idea of making a screen recording tool. However, it already works and will be extended in the future.

The warehouse address

Gitee address

Main API used

  • navigator.mediaDevices.getDisplayMedia The document address

    Prompts the user to select and authorize capture of displayed content or portions of content

  • navigator.mediaDevices.getUserMedia The document address

    Prompts the user to grant permission to use media input

  • MediaRecorder The document address

    Data generated by MediaStream or HTMLMediaElement objects can be captured for analysis, processing, or saving to disk. It is also very easy to use.

Implementation approach

Because I didn’t have any idea what to do with this for the first time, so my implementation idea was very simple, With three MediaRecorder to control the navigator. MediaDevices. GetDisplayMedia and the navigator mediaDevices. GetUserMedia MediaStream returns

  1. To understand thenavigator.mediaDevices.getDisplayMedia | navigator.mediaDevices.getUserMediaThe returnedstreamSome of the methods used in
addTrack          // Add a new media track to a set of tracks.
getAudioTracks   // Get the audio track
getVideoTracks  // Get the video track
getTracks      // Gets the audio and video track, which depends on the constraints parameterTake a simple example 🌰// Async with await, this is just an example
/ / when you authorized, the browser will pop-up window allows you to select which desktop window | | label card
const result = await navigator.mediaDevices.getDisplayMedia({
    audio: true.// When set to true, a dialog box for sharing system audio will appear in the pop-up window
    video: true
})
result.getTracks() // You get an array of type MediaStreamTrack[]In the MediaStreamTrack`enabled`You can control whether the track is valid or not and if the track is disconnected, this value can still be changed but it doesn't have any effect enabled can be used to mute the microphone and so onCopy the code

MediaStreamTrack link

  1. MediaRecorderSome usages of
  • The stream isgetUserMedia | getDisplayMediaReturned data
  • Options It can contain the following properties:
    • mimeType: for newly builtMediaRecorderSpecifies the MIME type of the recording container. Through calls in the applicationMediaRecorder.isTypeSupported()To check whether the browser supports thismimeType .
    • audioBitsPerSecond: Specifies the bit rate of the audio.
    • videoBitsPerSecond: Specifies the bit rate of the video.
    • bitsPerSecond: Specifies the audio and video bit rates. This property can be used to specify the above two properties. If only one of the above two attributes and this attribute are specified, this attribute can be used to set the other attribute.

If the bitrate for video and/or audio is not specified, the default bitrate for video is 2.5Mbps. However, the default bitrate for audio is not fixed. The default bitrate for audio is adaptive based on the sampling rate and the number of tracks.

Create MediaRecorder and start

// Suppose I now associate the stream in 🌰 above
const mediaRecorder = new MediaRecorder(result)

mediaRecorder.start() // It must be called at first, otherwise the status will not be updated

console.log("mediaRecorder => ", mediaRecorder) // You can print it to see the information
Copy the code
  • MediaRecorder.stateReturn record objectMediaRecorderThe current state (idle, recording, or paused) ofinactive.recording, or paused)

Stop MediaRecorder and end

mediaRecorder.stop() / / stop
// This stop, is to stop mediaRecorder, does not end recording
// After calling this method, you will notice that the browser does not end up calling the share.
// You need to listen to stop and call mediaRecorder.stop() to trigger the event to stop track
mediaRecorder.addEventListener('stop'.event= > {
     / * * *@description Instead of stopping the flow itself, stop the trace of the flow */
        result.getTracks().forEach(track= > {
            track.stop()
        })
})

// - At the end of the media stream, all media data that has not been passed to the handler will be in a single Blob
// When mediaRecorder.stop() is called, all media data that has been captured since the start of recording or the last time the event occurred is passed to the Blob
mediaRecorder.addEventListener('dataavailable'.({data}) = > {
    // You can convert data to blob urls here
    const videoAndDownloadUrl = URL.createObjectURL(data)
})

// If you click the browser stop sharing button
// Then it will execute an onEnded eventMonitoring method for the result. GetVideoTracks. ForEach (track= > {
    track.addEventListener('ended'.(event) = > {
       // The stop sharing button generally does the same thing as clicking the end button})})Copy the code

Recording process overview reference link

MediaRecorder configuration items, methods, event handling reference links

Pause and continue

// If you want to listen to them, you can refer to the above MediaRecorder event handling link
`MediaRecorder.onpause`To deal with`pause`Event that is triggered when the media pauses recording`MediaRecorder.onresume`To deal with`resume`Event that triggers mediaRecorder.pause() when responding to recorded video after a pause/ / pause
mediaRecorder.resume() / / to continue
Copy the code

The same goes for audio and cameras

// Call the audio and then use mediaRecorder for control
const result = await navigator.mediaDevices.getUserMedia({
    video: false.audio: true
})

const result = await navigator.mediaDevices.getUserMedia({
    video: {
        width: { ideal: 300 },
        height: { ideal: 150}},audio: false
})
Copy the code

GetUserMedia Configuration parameter

The last

This is the first time to write an article to record several apis that have been studied for quite a long time.