如何用JS创建一个屏幕录像机

  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

 

《如何用JS创建一个屏幕录像机》有1条评论

发表评论

此网站受reCAPTCHA保护 并遵循Google隐私政策服务条款