I am able to record the screen in the browser using MediaRecorder able to preview it and also able download the file in .webm format after stoping the recording. Now, I want to store this file in the firebase storage but cannot able to do it, tried converting the data in to arraybuffer and uint8array but did not work. Not able to find how to exactly do it. Sharing my code below :
index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Screen Recording Demo</title>
</head>
<body>
<div>
<button id="start">
Start Recording
</button>
<button id="stop" disabled>
Stop Recording
</button>
<video id="screenRecorder" controls/>
<!-- autoplay -->
</div>
<script type="module" src="/main.js"></script>
style.css :
@import url('https://fonts.googleapis.com/css2?family=Syne+Mono&display=swap');
body {
font-family: 'Syne Mono', monospace;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin: 80px 10px;
}
video {
width: 40vw;
height: 30vw;
margin: 2rem;
background: #2c3e50;
}
.videos {
display: flex;
align-items: center;
justify-content: center;
}
button {
display: inline-block;
margin: 1em 1em;
font-size: 2em;
cursor: pointer;
}
main.js:
import './style.css';
import firebase from 'firebase/app';
import 'firebase/storage';
const firebaseConfig = {
apiKey: "*****",
authDomain: "*****",
projectId: "*****",
storageBucket: "*****",
messagingSenderId: "*****",
appId: "*****",
measurementId: "*****",
};
if (!firebase.apps.length) {
firebase.initializeApp(firebaseConfig);
}
// Create firebase storage reference
var fbStorageRef = firebase.storage().ref();
var fbStorageChildRef = fbStorageRef.child('videos/videofile.webm');
// recording screen
const start = document.getElementById("start");
const stop = document.getElementById("stop");
const video = document.getElementById("screenRecorder");
let recorder, stream;
async function startRecording() {
stream = await navigator.mediaDevices.getDisplayMedia({
video: {
mediaSource: "screen",
},
audio: true
});
let chunks = [];
var options = { mimeType: "video/webm; codecs=vp9" };
recorder = new MediaRecorder(stream, options);
recorder.ondataavailable = e => chunks.push(e.data);
recorder.onstop = e => {
//recorder.data;
const completeBlob = new Blob(chunks, { type: "video/webm" });
console.log(`onstop chunks : ${chunks}`);
console.log(`onstop chunks[0].type : ${chunks[0].type}`);
video.src = URL.createObjectURL(completeBlob);
console.log(`onstop video.src.data : ${video.src}`);
// download the file
const url = window.URL.createObjectURL(completeBlob);
const a = document.createElement('a');
a.style.display = 'none';
a.href = url;
a.download = 'test.webm';
let savefile = document.body.appendChild(a);
a.click();
var metadata = {
contentType: 'video/webm',
};
// firebase storage file
fbStorageChildRef.put(`${file}`, metadata).then((snapshot) => {
console.log(`Uploaded a blob or file! snapshot data : ${snapshot}`);
chunks = [];
});
};
recorder.start();
}
start.addEventListener("click", () => {
start.setAttribute("disabled", true);
stop.removeAttribute("disabled");
startRecording();
});
stop.addEventListener("click", () => {
stop.setAttribute("disabled", true);
start.removeAttribute("disabled");
recorder.stop();
stream.getVideoTracks()[0].stop();
});
package.json :
{
"name": "screen-recording-demo",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
},
"devDependencies": {
"vite": "^2.0.5"
},
"dependencies": {
"firebase": "^8.2.10"
}
}