使用JavaScript创建一个屏幕录像机

OBS studio确实好用，但为什么不试试看用JavaScript创建一个屏幕录像机呢?

　　它不仅限于记录浏览器的屏幕。是的，你没看错。虽然JavaScript是在浏览器上运行的，但我们不仅可以用JS来记录活动标签，还可以记录任何标签或整个屏幕。

　　首先我们需要一个HTML文件，在这个文件中我们将有一个记录按钮和一个视频元素，在这里我们可以播放录制的视频。

<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<video class="video" width="600px" controls></video>
<button class="record-btn">record</button>
<script src="./index.js"></script>
</body>
</html>

　　我们还需要一个JS文件，所以我们也要创建index.js。

let btn = document.querySelector(".record-btn");
btn.addEventListener("click", function () {
console.log("hello");
});

　　现在我们打开浏览器并点击按钮，不出意外的话，我们应该在控制台中能看到”Hello”。

　　现在我们不需要用console.log来获取用户显示的流了。

let btn = document.querySelector(".record-btn");

btn.addEventListener("click", async function () {
let stream = await navigator.mediaDevices.getDisplayMedia({
video: true
});
});

　　因此，你点击这个按钮，就会弹出这个窗口。

　　现在你可能认为我们已经完成了，选择一个窗口或屏幕，然后点击分享，它就会开始录制?

　　但实际上比这更复杂，我们必须自己录制视频。我们将使用MediaRecorder来录制我们的视频。

let btn = document.querySelector(".record-btn")
btn.addEventListener("click", async function () {
let stream = await navigator.mediaDevices.getDisplayMedia({
video: true
})
//需要更好的浏览器支持
const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9")
? "video/webm; codecs=vp9"
: "video/webm"
let mediaRecorder = new MediaRecorder(stream, {
mimeType: mime
})
//我们必须手动启动录像机
mediaRecorder.start()
})

　　因此，当我们的屏幕被记录下来时，mediaRecorder会给我们提供分块的数据，我们需要将这些数据存储在一个变量中。

let btn = document.querySelector(".record-btn")
btn.addEventListener("click", async function () {
let stream = await navigator.mediaDevices.getDisplayMedia({
video: true
})
//需要更好的浏览器支持
const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9")
? "video/webm; codecs=vp9"
: "video/webm"
let mediaRecorder = new MediaRecorder(stream, {
mimeType: mime
})
let chunks = [] mediaRecorder.addEventListener('dataavailable', function(e) {
chunks.push(e.data)
})
//我们必须手动启动录像机
mediaRecorder.start()
})

　　现在，当我们点击停止共享按钮时，我们希望录制的视频在我们的视频元素中播放，看看是怎么操作的。

let btn = document.querySelector(".record-btn")
btn.addEventListener("click", async function () {
let stream = await navigator.mediaDevices.getDisplayMedia({
video: true
})
//需要更好的浏览器支持
const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9")
? "video/webm; codecs=vp9"
: "video/webm"
let mediaRecorder = new MediaRecorder(stream, {
mimeType: mime
})
let chunks = []
mediaRecorder.addEventListener('dataavailable', function(e) {
chunks.push(e.data)
})
mediaRecorder.addEventListener('stop', function(){
let blob = new Blob(chunks, {
type: chunks[0].type
})
let video = document.querySelector(".video")
video.src = URL.createObjectURL(blob)
})
//我们必须手动启动录像机
mediaRecorder.start()
})

　　现在，作为画龙点睛之笔，让我们自动下载录制的视频。

let btn = document.querySelector(".record-btn")
btn.addEventListener("click", async function () {
let stream = await navigator.mediaDevices.getDisplayMedia({
video: true
})
//需要更好的浏览器支持
const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9")
? "video/webm; codecs=vp9"
: "video/webm"
let mediaRecorder = new MediaRecorder(stream, {
mimeType: mime
})
let chunks = [] mediaRecorder.addEventListener('dataavailable', function(e) {
chunks.push(e.data)
})
mediaRecorder.addEventListener('stop', function(){
let blob = new Blob(chunks, {
type: chunks[0].type
})
let url = URL.createObjectURL(blob)
let video = document.querySelector("video")
video.src = url
let a = document.createElement('a')
a.href = url
a.download = 'video.webm'
a.click()
})
//我们必须手动启动录像机
mediaRecorder.start()
})

　　现在我们有了一个功能齐全的屏幕录像机应用程序。

译自:https://dev.to/0shuvo0/lets-create-a-screen-recorder-with-js-3leb

使用JavaScript创建一个屏幕录像机

《使用JavaScript创建一个屏幕录像机》有2条评论

发表评论取消回复

《使用JavaScript创建一个屏幕录像机》有2条评论

发表评论 取消回复

发表评论取消回复