Bina perakam skrin mudah dengan HTML, CSS, dan JavaScript

Projek ini menunjukkan perakam skrin ringkas yang dibina menggunakan HTML, CSS dan JavaScript, tanpa bergantung pada perpustakaan luaran. Ia menangkap aktiviti skrin bersama-sama dengan audio, menawarkan penyelesaian asas lagi berfungsi untuk mencipta rakaman skrin pendek. Mari terokai fungsi dan struktur kodnya.

Fungsi:

Perakam membenarkan pengguna menangkap skrin dan audio mereka terus dalam penyemak imbas mereka. Setelah mengklik butang rekod, pengguna memilih kawasan rakaman (tab penyemak imbas, tetingkap aplikasi atau keseluruhan skrin). Kira detik mendahului rakaman, dan video WebM yang terhasil tersedia untuk dimuat turun.

Struktur Kod:

Projek ini terdiri daripada tiga fail utama:

• index.html: Menyediakan antara muka pengguna (UI) dengan kawasan pratonton video, butang rakam dan pautan muat turun.
• style.css: Menggayakan elemen UI, memastikan responsif merentas saiz skrin yang berbeza.
• script.js: Mengandungi logik JavaScript teras untuk tangkapan skrin, rakaman audio dan pemprosesan video.

HTML (index.html): HTML menyediakan struktur asas, termasuk elemen video untuk memaparkan rakaman dan butang untuk kawalan.

CSS (style.css): CSS menggayakan elemen halaman, mencipta reka letak yang bersih dan responsif. Gaya utama termasuk:

• Tetapan semula global untuk penggayaan yang konsisten.
• Memusatkan kandungan utama.
• Tindanan kira detik skrin penuh.
• Penskalaan responsif untuk elemen video.
• Penggayaan untuk butang dan pautan.
• Pertanyaan media untuk responsif mudah alih. (Contoh: @media (max-width: 768px))

JavaScript (script.js): Kod JavaScript mengendalikan fungsi teras:

1. Pendengar Acara: Pendengar acara pada butang rekod mencetuskan fungsi startScreenCapturing.
2. Tangkapan Media: Fungsi startScreenCapturing menggunakan navigator.mediaDevices.getDisplayMedia untuk menangkap skrin dan navigator.mediaDevices.getUserMedia untuk input audio. Pengendalian ralat disertakan jika tangkapan audio gagal.
3. Rakaman: Fungsi recordStream menggunakan MediaRecorder untuk merakam gabungan strim audio dan video. Pemasa kira detik dilaksanakan menggunakan setTimeout.
4. Muat turun: Setelah rakaman berhenti, objek Blob dibuat dan pautan muat turun dikemas kini untuk membolehkan pengguna menyimpan rakaman.

Soalan Lazim (Soalan Lazim):

• Tangkapan Audio: Tangkapan audio sistem bergantung pada sokongan penyemak imbas dan dasar keselamatan.
• Penyelesaian masalah: Jika rakaman skrin gagal, semak keserasian penyemak imbas dengan navigator.mediaDevices.getDisplayMedia.
• Format Video: Video disimpan dalam format WebM.
• Kualiti Audio: Skrip menggunakan pembatalan gema dan penindasan hingar, tetapi mikrofon luaran boleh meningkatkan kualiti.
• Kefungsian Jeda: Pada masa ini, menjeda rakaman tidak disokong.
• Saiz Fail: Saiz fail bergantung pada panjang dan kualiti rakaman.

Kebaikan dan Keburukan:

Pros	Cons
Lightweight, no external libraries	Limited to modern browsers
Simple implementation	No advanced editing features
Video and audio recording	Audio may not work on all devices/browsers
WebM format download	May require format conversion for sharing
Responsive design	No real-time preview during recording

Ikhtisar ringkas ini memberikan pemahaman yang jelas tentang keupayaan perakam skrin dan struktur kod asas. Projek ini berfungsi sebagai titik permulaan yang baik untuk mempelajari tentang rakaman skrin berasaskan penyemak imbas.

Atas ialah kandungan terperinci Bina perakam skrin mudah dengan HTML, CSS, dan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!