拍照

最新推荐文章于 2024-02-26 21:30:24 发布

lxsssss

最新推荐文章于 2024-02-26 21:30:24 发布

阅读量127

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/HelloWorldLJY/article/details/117016131

本文介绍了一种使用HTML5和JavaScript实现从浏览器访问摄像头并进行拍照的方法。通过navigator.mediaDevices.getUserMedia方法获取摄像头权限，并利用Canvas绘制实时视频画面，最终实现网页拍照功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html lang="en">
	<head>
		<title>GET VIDEO</title>
		<meta charset="utf-8">
	</head>
	<body>
	<input type="button" title="开启摄像头" value="开启摄像头" onclick="getMedia()" />
	<video id="video" width="500px" height="500px" autoplay="autoplay"></video>
	<canvas id="canvas" width="500px" height="500px"></canvas>
	<button id="snap" onclick="takePhoto()">拍照</button>
	<script>
        function getMedia() {
            let constraints = {
                video: {width: 500, height: 500},
                audio: true
            };
            //获得video摄像头区域
            let video = document.getElementById("video");
            //这里介绍新的方法，返回一个 Promise对象
            // 这个Promise对象返回成功后的回调函数带一个 MediaStream 对象作为其参数
            // then()是Promise对象里的方法
            // then()方法是异步执行，当then()前的方法执行完后再执行then()内部的程序
            // 避免数据没有获取到
            let promise = navigator.mediaDevices.getUserMedia(constraints);
            promise.then(function (MediaStream) {
                video.srcObject = MediaStream;
                video.play();
            });
        }
 
      function takePhoto() {
      //获得Canvas对象
      let video = document.getElementById("video");
      let canvas = document.getElementById("canvas");
      let ctx = canvas.getContext('2d');
      ctx.drawImage(video, 0, 0, 500, 500);
      }
</script>
</body>
</html>