Bagaimana untuk membuka kamera web menggunakan JavaScript?
Dalam tutorial ini, kita akan melihat proses membuka webcam menggunakan JavaScript. Jadi, ini boleh dilakukan menggunakan WebRTC. WebRTC ialah singkatan untuk Web Real-Time Communications. Menggunakan objek ini kita boleh mengakses dan menangkap kamera web dan peranti mikrofon yang tersedia dalam peranti pengguna.
Bagaimana untuk mengakses kamera web?
Kami boleh mengakses kamera web dan mikrofon peranti pengguna menggunakan objek ECMAScript navigator.mediaDevices.getUserMedia(kekangan).
Oleh itu, fungsi getUserMedia() secara lalai akan meminta kebenaran pengguna untuk menggunakan kamera web anda. Fungsi ini mengembalikan promise, sebaik sahaja anda mengklik OK dan memberikan kebenaran, maka janji akan dibatalkan dan ia akan membolehkan kamera web dalam sistem anda jika tidak, jika anda tidak membenarkannya, maka ia juga akan menjadi kaedah menangkap matikan kamera web.
Kita juga boleh menghantar parameter kepada fungsi getUserMedia(), sama seperti jika kita mahukan imej dengan lebar atau ketinggian tertentu.
Proses membuka webcam
Kita boleh mengikuti langkah di bawah untuk membuka kamera web menggunakan JavaScript.
Langkah 1 - Tambahkan elemen HTML seperti video untuk memaparkan strim webcam dan butang.
Langkah 2 - Periksa sama ada kamera web tersedia dan selesaikan janji yang dikembalikan fungsi getUserMedia.
LANGKAH 3 - Lulus parameter untuk mendapatkan fungsi GetUserMedia() seperti audio dan video benar kerana kami akan menggunakannya
Langkah 4 - Untuk telefon pintar kita perlu menggunakan pilihan faceingMode sebagai kedua-duanya Kamera tersedia dan secara lalai kami menghidupkannya dengan kamera hadapan.
Contoh
Di bawah ialah prosedur mudah untuk menghidupkan kamera web anda. Kami mengikuti langkah di atas untuk menyelesaikan tugas kami.
<html>
<head>
<title>Open webcam using JavaScript. </title>
</head>
<body>
<h1>Open WebCam Using JavaScript</h1>
<br/>
<button id="startBtn" onclick="openCam()">Open Webcam</button>
<br/><br/>
<video id="videoCam"></video>
<script>
function openCam(){
let All_mediaDevices=navigator.mediaDevices
if (!All_mediaDevices || !All_mediaDevices.getUserMedia) {
console.log("getUserMedia() not supported.");
return;
}
All_mediaDevices.getUserMedia({
audio: true,
video: true
})
.then(function(vidStream) {
var video = document.getElementById('videoCam');
if ("srcObject" in video) {
video.srcObject = vidStream;
} else {
video.src = window.URL.createObjectURL(vidStream);
}
video.onloadedmetadata = function(e) {
video.play();
};
})
.catch(function(e) {
console.log(e.name + ": " + e.message);
});
}
</script>
</body>
</html>
Gunakan CSS untuk mereka bentuk antara muka
Pertama, mari kita reka antara muka web kami menggunakan HTML dan CSS.
Kami menambah komponen seperti kawasan video kamera web dan menggunakan CSS untuk menetapkan ketinggian dan lebarnya kepada 400px dan warna latar belakang kepada hitam. Ia akan memaparkan aliran video kamera web.
Tambahkan butang yang dipanggil Buka Kamera dan gunakan sifat CSSnya; butang ini akan digunakan untuk melancarkan kamera web.
Kini kami akan menambah kod fungsi dan membenamkannya ke dalam program utama.
Kami akan memanggil fungsi ini apabila butang OpenCamera diklik dan dalam fungsi ini semua arahan akan berlaku seperti yang dibincangkan di atas.
Contoh
Dalam contoh di bawah, kami telah menambahkan beberapa CSS untuk mereka bentuk antara muka yang lebih interaktif.
<html>
<head>
<title>Open webcam using JavaScript.</title>
<style>
*{
background-color: #658EA9;
}
#videoCam {
width: 630px;
height: 300px;
margin-left: 0px;
border: 3px solid #ccc;
background: black;
}
#startBtn {
margin-left: 280px;
width: 120px;
height: 45px;
cursor: pointer;
font-weight: bold;
}
#startBtn:hover{
background-color: #647C90;
color: red;
}
</style>
</head>
<body>
<h1>Open WebCam Using JavaScript</h1>
<br/>
<video id="videoCam"></video>
<br/><br/>
<button id="startBtn" onclick="openCam()">Open Camera</button>
<script>
function openCam(){
let All_mediaDevices=navigator.mediaDevices
if (!All_mediaDevices || !All_mediaDevices.getUserMedia) {
console.log("getUserMedia() not supported.");
return;
}
All_mediaDevices.getUserMedia({
audio: true,
video: true
})
.then(function(vidStream) {
var video = document.getElementById('videoCam');
if ("srcObject" in video) {
video.srcObject = vidStream;
} else {
video.src = window.URL.createObjectURL(vidStream);
}
video.onloadedmetadata = function(e) {
video.play();
};
})
.catch(function(e) {
console.log(e.name + ": " + e.message);
});
}
</script>
</body>
</html>
Seperti yang anda boleh perhatikan dari skrin output, apabila kami mengklik pada butang "Buka Kamera", ia meminta akses kepada kamera web dan apabila kami membenarkan akses itu, ia memulakan aliran video kamera web dalam skrin kawasan video ; Jika kami tidak 't memberikan akses, ia tidak akan menunjukkan sebarang output.
Atas ialah kandungan terperinci Bagaimana untuk membuka kamera web menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1377
52
Bagaimana saya membuat dan menerbitkan perpustakaan JavaScript saya sendiri?
Mar 18, 2025 pm 03:12 PM
Artikel membincangkan membuat, menerbitkan, dan mengekalkan perpustakaan JavaScript, memberi tumpuan kepada perancangan, pembangunan, ujian, dokumentasi, dan strategi promosi.
Bagaimanakah saya mengoptimumkan kod JavaScript untuk prestasi dalam penyemak imbas?
Mar 18, 2025 pm 03:14 PM
Artikel ini membincangkan strategi untuk mengoptimumkan prestasi JavaScript dalam pelayar, memberi tumpuan kepada mengurangkan masa pelaksanaan dan meminimumkan kesan pada kelajuan beban halaman.
Apa yang perlu saya lakukan jika saya menghadapi percetakan kod yang dihiasi untuk resit kertas terma depan?
Apr 04, 2025 pm 02:42 PM
Soalan dan penyelesaian yang sering ditanya untuk percetakan tiket kertas terma depan dalam pembangunan front-end, percetakan tiket adalah keperluan umum. Walau bagaimanapun, banyak pemaju sedang melaksanakan ...
Bagaimanakah saya boleh debug kod javascript dengan berkesan menggunakan alat pemaju pelayar?
Mar 18, 2025 pm 03:16 PM
Artikel ini membincangkan debugging JavaScript yang berkesan menggunakan alat pemaju pelayar, memberi tumpuan kepada menetapkan titik putus, menggunakan konsol, dan menganalisis prestasi.
Bagaimana saya menggunakan kerangka koleksi Java dengan berkesan?
Mar 13, 2025 pm 12:28 PM
Artikel ini meneroka penggunaan rangka koleksi Java yang berkesan. Ia menekankan memilih koleksi yang sesuai (senarai, set, peta, giliran) berdasarkan struktur data, keperluan prestasi, dan keselamatan benang. Mengoptimumkan penggunaan pengumpulan melalui cekap
Bagaimanakah saya menggunakan peta sumber untuk debug kod JavaScript minified?
Mar 18, 2025 pm 03:17 PM
Artikel ini menerangkan cara menggunakan peta sumber untuk debug JavaScript minifikasi dengan memetakannya kembali ke kod asal. Ia membincangkan membolehkan peta sumber, menetapkan titik putus, dan menggunakan alat seperti Chrome Devtools dan Webpack.
Bermula dengan Chart.js: Pie, Donut, dan Carta Bubble
Mar 15, 2025 am 09:19 AM
Tutorial ini akan menerangkan cara membuat carta pai, cincin, dan gelembung menggunakan carta.js. Sebelum ini, kami telah mempelajari empat jenis carta carta.js: carta baris dan carta bar (tutorial 2), serta carta radar dan carta rantau polar (Tutorial 3). Buat carta pai dan cincin Carta pai dan carta cincin sangat sesuai untuk menunjukkan perkadaran keseluruhan yang dibahagikan kepada bahagian yang berlainan. Sebagai contoh, carta pai boleh digunakan untuk menunjukkan peratusan singa lelaki, singa wanita dan singa muda dalam safari, atau peratusan undi yang diterima oleh calon yang berbeza dalam pilihan raya. Carta pai hanya sesuai untuk membandingkan parameter tunggal atau dataset. Harus diingat bahawa carta pai tidak dapat menarik entiti dengan nilai sifar kerana sudut kipas dalam carta pai bergantung pada saiz berangka titik data. Ini bermaksud mana -mana entiti dengan perkadaran sifar
Siapa yang dibayar lebih banyak Python atau JavaScript?
Apr 04, 2025 am 12:09 AM
Tidak ada gaji mutlak untuk pemaju Python dan JavaScript, bergantung kepada kemahiran dan keperluan industri. 1. Python boleh dibayar lebih banyak dalam sains data dan pembelajaran mesin. 2. JavaScript mempunyai permintaan yang besar dalam perkembangan depan dan stack penuh, dan gajinya juga cukup besar. 3. Faktor mempengaruhi termasuk pengalaman, lokasi geografi, saiz syarikat dan kemahiran khusus.
