原生的JS实现摄像头拍照/扫码

最新推荐文章于 2026-05-01 10:32:32 发布

原创

最新推荐文章于 2026-05-01 10:32:32 发布 · 3.2k 阅读

标签

#javascript #html5 #html

收录于

作者分享了在前端页面中集成相机功能，用于拍照并解析条形码和二维码的过程，介绍了camera组件的创建和zxing-browser.js的使用。展示了如何通过getUserMedia API和ZXing库在谷歌内核浏览器中实现拍照和扫码功能。

已经三个月没有写博客了吧，因为工作有点忙，写完之后就想在床上躺着，所以就一直没有写过了，今天七夕，没人给我玩。只能写博客了

最近工作上需要在前端页面进行拍照以及解析条形码和二维码，所以研究了下JS的API，但是只支持谷歌内核的浏览器
可以在这里看下： https://developer.mozilla.org/zh-CN/docs/Web/API

接下来上代码，这个是封装好的相机组件


/**
 * 创建相机对象
 * @Author Fanxing
 * @param app  绑定div
 * @param width 宽度 （与app宽度相同
 * @param height 高度 （与app高度相同
 * @param type 没有类型，忽略。。不是相机前置或后置。。
 * ps: 扫码结果在 res.text里，方法是qrcode  获取拍照图片调用 getImg
 */
function camera(app, width, height, type) {
	let appObject = document.getElementById(app);
	let video = document.createElement("video");
	let span = document.createElement("span");
	let facingMode = 'environment';
	const codeReader = new ZXingBrowser.BrowserMultiFormatReader();
	video.style.width = width
	video.id = 'video'
	video.style.height = height
	video.autoplay = "autoplay";
	video.style.margin = 0;
	appObject.insertBefore(video, appObject.childNodes[0]);
	/**
	 *  修改优先使用那颗摄像头，前置或后置
	 * */
	this.setFacingMode = function(