Bagaimana untuk membuka kamera web menggunakan JavaScript?-tutorial js-php.cn

Bagaimana untuk membuka kamera web menggunakan JavaScript?

PHPz

Lepaskan： 2023-08-24 15:09:08

ke hadapan

2167 orang telah melayarinya

如何使用 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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!