Membuat Screen Recorder Dengan Sederhana Menggunakan JavaScript
Mempelajari tentang API yang mudah digunakan ini untuk Share Monitor, Perekaman monitor, dan lainnya. Ini membutuhkan pengetahuan yang baik tentang JavaScript.
Memulai perekaman
Mari buat sebuah tombol:
<button id="recording-toggle">Start recording</button>Sekarang beberapa JavaScript.
var RECORDING_ONGOING = false;
var recordingToggle = document.getElementById("recording-toggle"); // The button
recordingToggle.addEventListener("click", function(){
RECORDING_ONGOING = !RECORDING_ONGOING; // Start / Stop recording
if(RECORDING_ONGOING){
recordingToggle.innerHTML = "Stop Recording";
startRecording(); // Start the recording
} else {
recordingToggle.innerHTML = "Start Recording";
stopRecording(); // Stop screen recording
}
});Sepertinya banyak yang terjadi di sini, tapi sungguh, kami hanya menambahkan pendengar acara ke tombol untuk memulai dan stop merekam dan mengubah text yang sesuai.
Memulai perekaman
Sebelum fungsi, deklarasikan 3 variabel global (di luar fungsi).
var blob, mediaRecorder = null;
var chunks = [];Saat ini, mari kita mulai perekaman monitor.
async function startRecording(){
var stream = await navigator.mediaDevices.getDisplayMedia(
{video: {mediaSource: "screen"}, audio: true}
);
deviceRecorder = new deviceRecorder(stream, {mimeType: "video/webm"});
}Kami membuat aliran media dari monitor pengguna. Perekam media mempunyai mimeType. Ini ialah jenis file keluaran yang Anda inginkan.
Anda bisa membaca lebih lanjut tentang mimeTypes di sini.
Edge mendukung mimetype video/webm. Ini ialah ekstensi file.webm. Anda dapat memeriksa apakah browser mendukung mimeType dengan cara ini:
console.log(MediaRecorder.isTypeSupported("video/webm"))
console.log(MediaRecorder.isTypeSupported("video/mp4"))
console.log(MediaRecorder.isTypeSupported("video/mp4;codecs=avc1"))Webm ialah apa yang akan saya gunakan dalam artikel ini, tapi Anda bisa mengubah mimetype sesuai kebutuhan Anda.
Tambahkan beberapa baris lagi ke fungsi startRecording.
deviceRecorder.ondataavailable = (e) => {
if(e.data.size > 0){
chunks.push(e.data);
}
}
deviceRecorder.onstop = () => {
chunks = [];
}
deviceRecorder.start(250)Setiap kali kami memiliki data, kami akan menambahkannya ke array potongan (didefinisikan sebelumnya). Saat kita menghentikan perekaman, kita akan memanggil fungsi stopRecording().
Menghentikan perekaman
function stopRecording(){
var filename = window.prompt("File name", "video"); // Ask the file name
deviceRecorder.stop(); // Stopping the recording
blob = new Blob(chunks, {type: "video/webm"})
chunks = [] // Resetting the data chunks
var dataDownloadUrl = URL.createObjectURL(blob);
// Downloadin it onto the user's device
let a = document.createElement('a')
a.href = dataDownloadUrl;
a.download = `${filename}.webm`
a.click()
URL.revokeObjectURL(dataDownloadUrl)
}Begitulah sederhananya melakukan perekaman monitor di JS. Bila Anda menginginkan mp4 atau format lain, Anda harus mengonversinya menggunakan API atau melakukannya sendiri.
Anda bisa menemukan semua code di sini. Terima kasih sudah membaca artikel berikut. Silahkan baca beberapa baris lagi.