浏览器播放本地摄像头和麦克风的方发

最新推荐文章于 2024-09-15 21:53:26 发布

桃花岛主70

最新推荐文章于 2024-09-15 21:53:26 发布

阅读量114

点赞数 2

文章标签：前端

本文链接：https://blog.csdn.net/qq_18089765/article/details/141100590

版权

代码如下，非常简单

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>浏览器读取本地摄像头和麦克风</title>
 </head>
 <body>
 <div>
	 <button id="start">开始</button>
	 <button id="stop">停止</button>
 </div>
 <video autoplay controls ></video>
    <script>
		let startbtn = document.getElementById('start')
		let stopbtn = document.getElementById('stop')
        const video = document.querySelector('video');

		startbtn.onclick = function(){
			// 注意：navigator.getUserMedia语法已废弃，此处使用最新语法：navigator.mediaDevices.getUserMedia
        navigator.mediaDevices.getUserMedia({ audio: true, video: true })
            .then(stream => video.srcObject = stream)
            .catch(err => console.log(err));
		}

        stopbtn.onclick = function(){
			video.pause()
        }
    </script>
  
 </body>
</html>