Audio and video recording audio and video recording is divided into server recording and client recording, the following is mainly about the use of weBRTC client recording. Because WebRTC records audio and video streams and ultimately saves the data as multimedia files through Blob objects,

  • BlobObject represents an immutable, raw data-like file object. Its data can be read in text or binary format, or converted toReadableStreamFor data manipulation.
  • Blobs don’t necessarily represent data in JavaScript’s native format.FileInterface is based onBlob, inherits the functionality of bloB and extends it to support files on user systems.
  • To construct one from other non-BLOb objects and dataBlob, please use theBlob()Constructor. To create a subset of the BLOB data, use theslice()Methods. To get the corresponding file on the user’s file systemBlobObject.
  • acceptBlobThe API of the object is also listed inFileIn the document.

With that in mind, let’s get down to business.

Gets the element declaration variable

let mediaRecorder;
let recordedBlobs;
​
const recordedVideo = document.querySelector('video#recorded');
const recordButton = document.querySelector('button#record');
const playButton = document.querySelector('button#play');
const downloadButton = document.querySelector('button#download');
Copy the code

Bind click events

  • URL.createObjectURL()Static methods create oneDOMString, which contains a URL representing the object given in the parameter. The lifecycle of this URL and the window that created itdocumentBinding. This new URL object represents the specifiedFileObject orBlobObject.
  • URL.revokeObjectURL()Static methods are used to release a previously existing one through a callURL.createObjectURL()URL object created. When you’re done with a URL object, you should call this method to let the browser know that you don’t need to keep a reference to the file in memory. You can be insourceopenCalled any time after being processedrevokeObjectURL(). This is becausecreateObjectURL()It simply means putting a media element’ssrcAttribute associated with oneMediaSourceObject up. callrevokeObjectURL()Putting this potential object back in place allows the platform to do garbage collection at the right time.
recordButton.addEventListener('click', () => { if (recordButton.textContent === 'Start Recording') { startRecording(); } else { stopRecording(); recordButton.textContent = 'Start Recording'; playButton.disabled = false; downloadButton.disabled = false; }}); playButton.addEventListener('click', () => { const superBuffer = new Blob(recordedBlobs); recordedVideo.src = null; recordedVideo.srcObject = null; recordedVideo.src = window.URL.createObjectURL(superBuffer); recordedVideo.controls = true; recordedVideo.play(); }); downloadButton.addEventListener('click', () => { const blob = new Blob(recordedBlobs, { type: 'video/webm' }); const url = window.URL.createObjectURL(blob); const a = document.createElement('a'); a.style.display = 'none'; a.href = url; a.download = 'test.webm'; document.body.appendChild(a); a.click(); setTimeout(() => { document.body.removeChild(a); window.URL.revokeObjectURL(url); }, 100); }); document.querySelector('button#start').addEventListener('click', async () => { const constraints = { audio: {}, video: { width: 1280, height: 720 } }; console.log('Using media constraints:', constraints); await init(constraints); });Copy the code

Click to start initialization

  • MediaDevices.getUserMedia()The user is prompted to grant permission to use media input, which generates oneMediaStreamWhich contains the requested media type track. This stream can contain A video track (from hardware or virtual video sources, such as cameras, video capture devices, screen sharing services, and so on), an audio track (also from hardware or virtual audio sources, such as microphones, A/D converters, and so on), or some other track type.
  • It returns aPromiseObject, if successfulresolveA callbackMediaStreamObject. If the user refuses permission or the required media source is unavailable,promisewillrejectA callbackPermissionDeniedErrororNotFoundError 。
async function init(constraints) {
    try {
        const stream = await navigator.mediaDevices.getUserMedia(constraints);
        handleSuccess(stream);
    } catch (e) {
        console.error('navigator.getUserMedia error:', e);
    }
}
​
function handleSuccess(stream) {
    recordButton.disabled = false;
    console.log('getUserMedia() got stream:', stream);
    window.stream = stream;
    const gumVideo = document.querySelector('video#gum');
    gumVideo.srcObject = stream;
}
Copy the code

Start recording method

function startRecording() { recordedBlobs = []; try { mediaRecorder = new MediaRecorder(window.stream); } catch (e) { console.error('Exception while creating MediaRecorder:', e); return; } recordButton.textContent = 'Stop Recording'; playButton.disabled = true; downloadButton.disabled = true; mediaRecorder.onstop = (event) => { console.log('Recorder stopped: ', event); console.log('Recorded Blobs: ', recordedBlobs); }; mediaRecorder.ondataavailable = handleDataAvailable; mediaRecorder.start(); } function handleDataAvailable(event) { if (event.data && event.data.size > 0) { recordedBlobs.push(event.data); }}Copy the code

HTML

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta id="theme-color" name="theme-color" content="#ffffff"> <link rel="stylesheet" href="./index.css"> </head> <body> <div id="container"> <video id="gum" playsinline autoplay muted></video> <video id="recorded" playsinline loop></video> <div> <button id="start">Start camera</button> <button id="record" disabled>Start Recording</button> <button id="play" disabled>Play</button> <button id="download" disabled>Download</button> </div> </div> <script src="./main.js" async></script> </body> </html>Copy the code

CSS

button { background-color: #d84a38; border: none; border-radius: 2px; color: white; font-family: 'Roboto', sans-serif; The font - size: 0.8 em. margin: 0 0 1em 0; Padding: 0.5EM 0.7EM 0.6EM 0.7em; } button:active { background-color: #cf402f; } button:hover { background-color: #cf402f; } button[disabled] { color: #ccc; } button[disabled]:hover { background-color: #d84a38; } div#container { margin: 0 auto 0 auto; max-width: 60em; Padding: 1em 1.5em 1.3em 1.5em; } video { background: #222; margin: 0 0 20px 0; --width: 100%; width: var(--width); Height: calc (var (width) * 0.75); }Copy the code

WebRTC function is very powerful, about webRTC and live there are a lot of technology we need to study, the last is a DEMO code, interested partners can personally try.