我可以使用 MediaRecorder 在浏览器中录制屏幕，可以预览它，也可以在停止录制后下载 .webm 格式的文件。现在，我想将此文件存储在 firebase 存储中，但无法做到这一点，尝试将数据转换为 arraybuffer 和 uint8array 但不起作用。无法找到具体如何做。下面分享我的代码：
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>
样式.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"
}
}
在执行此操作之前将其设为文件，然后上传。
const myFile = new File( [completeBlob], 'video.webm', {type: 'video/webm',} );