Web technology sharing | webrtc recording video stream

Listening start event

• EventTarget.addEventListener() Method to register the specified listener to EventTarget On , When the object triggers the specified event , The specified callback function will be executed . The event target can be an element on a document Element,Document and Window Or any other object that supports Events ( such as XMLHttpRequest).

• addEventListener() The working principle of is to realize EventListener Add a function or object to the function or object that calls it EventTarget In the event listener list for the specified event type on .

document.querySelector('button#start').addEventListener('click', async () => {
    document.querySelector('button#start').disabled = true;
    const constraints = {
        audio: {},
        video: {
            width: 1280, height: 720
        }
    };
    await init(constraints);
});

Get audio and video tracks

• MediaDevices.getUserMedia() The user will be prompted to give permission to use media input , Media input produces a MediaStream, It contains the track of the requested media type . This stream can contain a video track （ From hardware or virtual video sources , Like a camera 、 Video capture devices and screen sharing services, etc ）、 An audio track （ Also from hardware or virtual audio sources , Like a microphone 、A/D Converters and so forth ）, It could be another type of orbit .

• It returns a Promise object , After success resolve Call back one MediaStream object . If the user refuses permission , Or the required media source is not available ,promise Meeting reject Call back one PermissionDeniedError perhaps NotFoundError .

async function init(constraints) {
    try {
        const stream = await navigator.mediaDevices.getUserMedia(constraints);
        handleSuccess(stream);
    } catch (e) {
        console.error('navigator.getUserMedia error:', e);
    }
}

• HTMLMediaElement Interface srcObject Property sets or returns an object , This object provides a connection to HTMLMediaElement Associated media source , This object is usually MediaStream , But according to the specification, it can be MediaSource, Blob perhaps File.

function handleSuccess(stream) {
    recordButton.disabled = false;
    window.stream = stream;
    const gumVideo = document.querySelector('video#gum');
    gumVideo.srcObject = stream;
}

Recording media streams

• MediaRecorder() The constructor creates a MediaStream For recording MediaRecorder object

• MediaRecorder.ondataavailable Event handler API Handle dataavailable event , Run the code in response Blob Data is provided for use .

• dataavailable When MediaRecorder When delivering media data to your application for use , The event is triggered . The data is in the... Containing the data Blob Object . This happens in four cases ：

  • At the end of the media stream , All not yet passed to ondataavailable The media data of the handler will be stored in a single file Blob In the transfer .

  • When calling MediaRecorder.stop() (en-US) when , From the beginning of the record or dataavailable Since the last time the incident occurred All media data obtained will be transferred to Blob in ; thereafter , The capture is over .

  • call MediaRecorder.requestData() (en-US) dataavailable when , All media data captured since the beginning of recording or the last occurrence of the event will be delivered ; then Blob Create a new file , And continue media capture to this blob in .

  • If you will timeslice Property is passed to the beginning of media capture MediaRecorder.start() (en-US) In the method ,dataavailable Then every timeslice An event is triggered in milliseconds . This means that every Blob Have a specific duration （ the last one Blob With the exception of , The latter may be shorter , Because it will be everything left since the last event ）.

let mediaRecorder;
const recordButton = document.querySelector('button#record');

recordButton.addEventListener('click', () => {
    if (recordButton.textContent === ' Start recording ') {
        startRecording();
    } else {
        stopRecording();
        recordButton.textContent = ' Start recording ';
        playButton.disabled = false;
    }
});

function startRecording() {
    recordedBlobs = [];
    try {
        mediaRecorder = new MediaRecorder(window.stream);
    } catch (e) {
        console.error(' establish MediaRecorder When abnormal :', e);
    }
    recordButton.textContent = ' Stop recording ';
    playButton.disabled = true;
    mediaRecorder.ondataavailable = handleDataAvailable;
    mediaRecorder.start();
}

function stopRecording() {
    mediaRecorder.stop();
}

function handleDataAvailable(event) {
    if (event.data && event.data.size > 0) {
        recordedBlobs.push(event.data);
    }
}

Play media stream

• URL.createObjectURL() Static methods create a DOMString, It contains a... That represents the object given in the parameter URL. This URL Life cycle and create it in the window of document binding . This new URL Object represents the specified File Object or Blob object .

let recordedBlobs;
const recordedVideo = document.querySelector('video#recorded');
const playButton = document.querySelector('button#play');

playButton.addEventListener('click', () => {
    const superBuffer = new Blob(recordedBlobs, { type: 'video/webm' });
    recordedVideo.src = null;
    recordedVideo.srcObject = null;
    recordedVideo.src = window.URL.createObjectURL(superBuffer);
    recordedVideo.controls = true;
    recordedVideo.play();
});

HTML

<link rel="stylesheet" href="./index.css">

<video id="gum" autoplay></video>
<video id="recorded"></video>
<div>
    <button id="start"> Start </button>
    <button id="record" disabled> Start recording </button>
    <button id="play" disabled>Play</button>
</div>

<script src="./index.js"></script>

CSS

button {
    margin: 0 3px 10px 0;
    padding-left: 2px;
    padding-right: 2px;
    width: 99px;
}
  
button:last-of-type {
    margin: 0;
}
  
video {
    vertical-align: top;
    --width: 25vw;
    width: var(--width);
    height: calc(var(--width) * 0.5625);
}
  
video:last-of-type {
    margin: 0 0 20px 0;
}
  
video#gumVideo {
    margin: 0 20px 20px 0;
}

JavaScript

let mediaRecorder;
let recordedBlobs;

const recordedVideo = document.querySelector('video#recorded');
const recordButton = document.querySelector('button#record');
recordButton.addEventListener('click', () => {
    if (recordButton.textContent === ' Start recording ') {
        startRecording();
    } else {
        stopRecording();
        recordButton.textContent = ' Start recording ';
        playButton.disabled = false;
    }
});

const playButton = document.querySelector('button#play');
playButton.addEventListener('click', () => {
    const superBuffer = new Blob(recordedBlobs, { type: 'video/webm' });
    recordedVideo.src = null;
    recordedVideo.srcObject = null;
    recordedVideo.src = window.URL.createObjectURL(superBuffer);
    recordedVideo.controls = true;
    recordedVideo.play();
});

function handleDataAvailable(event) {
    if (event.data && event.data.size > 0) {
        recordedBlobs.push(event.data);
    }
}

function startRecording() {
    recordedBlobs = [];
    try {
        mediaRecorder = new MediaRecorder(window.stream);
    } catch (e) {
        console.error(' establish MediaRecorder When abnormal :', e);
    }
    recordButton.textContent = ' Stop recording ';
    playButton.disabled = true;
    mediaRecorder.ondataavailable = handleDataAvailable;
    mediaRecorder.start();
}

function stopRecording() {
    mediaRecorder.stop();
}

function handleSuccess(stream) {
    recordButton.disabled = false;
    window.stream = stream;
    const gumVideo = document.querySelector('video#gum');
    gumVideo.srcObject = stream;
}

async function init(constraints) {
    try {
        const stream = await navigator.mediaDevices.getUserMedia(constraints);
        handleSuccess(stream);
    } catch (e) {
        console.error('navigator.getUserMedia error:', e);
    }
}

document.querySelector('button#start').addEventListener('click', async () => {
    document.querySelector('button#start').disabled = true;
    const constraints = {
        audio: {},
        video: {
            width: 1280, height: 720
        }
    };
    await init(constraints);
});