扫码

 <body>
  <video id="video" style="width: 400px"></video>
  <canvas id="canvas" style="width: 400px"></canvas>
  <br />
  <button type="button" onclick="takePicture()">Take Picture</button>
 
  <!-- https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.min.js -->
  <script src="jsqr.js"></script>
  <script>
    function takePicture() {
      navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } }).then(
        (stream) => {
          /** @type {HTMLVideoElement} */
          const video = document.getElementById('video');
 
          /** @type {HTMLCanvasElement}  */
          const canvas = document.getElementById('canvas');
          const ctx = canvas.getContext('2d');
 
          video.muted = true;
          video.setAttribute('playsinline', true);
 
          video.onloadedmetadata = () => {
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            draw();
          };
          video.srcObject = stream;
          video.play();
 
          const draw = () => {
            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
            const { data } = ctx.getImageData(0, 0, canvas.width, canvas.height);
 
            const code = jsQR(data, canvas.width, canvas.height);
 
            video.requestVideoFrameCallback(() => {
              console.log(code);
              if (code) {
                // 扫到二维码，停止视频流
                video.pause();
                video.srcObject.getTracks()[0].stop();
                return;
              }
              draw();
            });
          };
        },
        (error) => {
          console.error(error);
        }
      );
    }
  </script>
</body>

posted @ 2025-01-07 21:45 _clai 阅读(18) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· canvas 捕获视频帧

· Element Fullscreen

· 微信小程序：扫一扫

· html--图片

· uniapp app，小程序，公众号h5调用扫一扫

公告

昵称： _clai
园龄： 4年11个月
粉丝： 0
关注： 7

+加关注

2025年3月

日

一

二

三

四

五

六

随笔分类

随笔档案

阅读排行榜

评论排行榜

1. uniapp 文件管理器(文件选择)(4)

_clai

扫码

公告

搜索

常用链接

最新随笔

随笔分类

随笔档案

阅读排行榜

评论排行榜

最新评论

	<body>
	<video id="video" style="width: 400px"></video>
	<canvas id="canvas" style="width: 400px"></canvas>
	<br />
	<button type="button" onclick="takePicture()">Take Picture</button>

	<!-- https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.min.js -->
	<script src="jsqr.js"></script>
	<script>
	function takePicture() {
	navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } }).then(
	(stream) => {
	/** @type {HTMLVideoElement} */
	const video = document.getElementById('video');

	/** @type {HTMLCanvasElement} */
	const canvas = document.getElementById('canvas');
	const ctx = canvas.getContext('2d');

	video.muted = true;
	video.setAttribute('playsinline', true);

	video.onloadedmetadata = () => {
	canvas.width = video.videoWidth;
	canvas.height = video.videoHeight;
	draw();
	};
	video.srcObject = stream;
	video.play();

	const draw = () => {
	ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
	const { data } = ctx.getImageData(0, 0, canvas.width, canvas.height);

	const code = jsQR(data, canvas.width, canvas.height);

	video.requestVideoFrameCallback(() => {
	console.log(code);
	if (code) {
	// 扫到二维码，停止视频流
	video.pause();
	video.srcObject.getTracks()[0].stop();
	return;
	}
	draw();
	});
	};
	},
	(error) => {
	console.error(error);
	}
	);
	}
	</script>
	</body>