Screen recording is similar to camera recording, except that the API is changed from getUserMedia to getUserMedia. This feature is currently an experimental one for Google and requires some setup. First open Chrome, type Chrome ://flags/ Press Enter, and type web-platform in the search box. After setting Experimental Web Platform Features to Enabled, click the RELAUNCH NOW button in the lower right corner to restart the browser.
Create an index.html file below with the code below
<! DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>Webrtc recording screen</title>//jq uses an online address<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<video autoplay playsinline id="player"></video>
<video playsinline id="recordPlayer"></video>
<! -- Disabled when playing and downloading buttons before recording begins -->
<button id="recordBtn">Start recording</button>
<button id="playBtn" disabled="">play</button>
<button id="downloadBtn" disabled="">download</button>
<script type="text/javascript" src="js/client.js"></script>
</body>
</html>
Copy the codeYou can also write a script before /body as follows
'use strict'
// use jquery to call start function
var player = $("#player") [0];
var recordPlayer = $("#recordPlayer") [0];
var recordBtn = $("#recordBtn");
var playBtn = $("#playBtn");
var downloadBtn = $("#downloadBtn");
var buffer; // Store recorded data (array)
var mediaStream;
var mediaRecoder;
start();
// Record button click events
recordBtn.click(function(){
// console.log(recordBtn.text());
if (recordBtn.text()==='Start recording') {
startRecord();
recordBtn.text('Stop recording');
playBtn.attr('disabled'.false);
downloadBtn.attr('disabled'.false);
}else if (recordBtn.text()==='Stop recording') {
stopRecord();
recordBtn.text('Start recording');
// playBtn.attr('disabled',true);
// downloadBtn.attr('disabled',true);}});// Play button click events
playBtn.click(function(){
var blob = new Blob(buffer,{type:'video/webm'});
// Generate url for recordPlayer to play from cached data
recordPlayer.src = window.URL.createObjectURL(blob);
recordPlayer.srcObject = null;
recordPlayer.controls = true; // Displays the playback control
});
// Download button click events
downloadBtn.click(function(){
var blob = new Blob(buffer,{type:'video/webm'});
// Generate urls from cached data
var url = window.URL.createObjectURL(blob);
// Create an A tag that points to the URL for downloading
var a = document.createElement('a');
a.href = url;
a.style.display = 'none'; // Do not display the A label
a.download = 'test.webm'; // The file name of the download
a.click(); // Call the click event of the A tag to download
});
// Start recording
function startRecord(){
var options = {mimeType:'video/webm; codecs=vp8'};
if(! MediaRecorder.isTypeSupported(options.mimeType)){console.log('Not supported'+options.mimeType);
return;
}
try{
buffer = [];
mediaRecoder = new MediaRecorder(mediaStream,options);
}catch(e){
console.log('Failed to create MediaRecorder! ');
return;
}
mediaRecoder.ondataavailable = handleDataAvailable;
// Start recording, set the recording time slice to 10ms(trigger onDataavilable event every 10s)
mediaRecoder.start(1000);
}
// Stop recording
function stopRecord (){
mediaRecoder.stop();
}
// Trigger the onDataavilable event callback function
function handleDataAvailable(e){
if (e && e.data && e.data.size>0) { buffer.push(e.data); }}function start(){
if(! navigator.mediaDevices || ! navigator.mediaDevices.getDisplayMedia) {console.log('Do not collect audio and video data! ');
}else{
// Collect audio data
var constrants = {
video:true.audio:true}; navigator.mediaDevices.getDisplayMedia(constrants).then(gotMediaStream).catch(handleError); }}// The method to be called when audio data is collected successfully
function gotMediaStream(stream){
mediaStream = stream;
player.srcObject = stream;
}
// The method to be called when collecting audio data fails
function handleError(err){
console.log(err.name+':'+err.message);
}
Copy the codeThe article links: events. Jianshu. IO/p/ac588dadd…