@zxing/library插件在H5页面上调用摄像头进行扫码识别解决方法，以及对华为手机的兼容 |
您所在的位置：网站首页 › 如何禁用手机摄像头但是保留扫码功能 › @zxing/library插件在H5页面上调用摄像头进行扫码识别解决方法，以及对华为手机的兼容 |
@zxing/library插件在H5页面上调用摄像头进行扫码识别解决方法，以及对华为手机的兼容
|
@zxing/library调用摄像头
这是第一次写博客，不太熟悉，如果我的方法有些问题，请多指正，谢谢！！ 关于@zxing/library 导入@zxing/library npm i @zxing/library --save or yarn add @zxing/library@zxing/library是一个开源的多格式1D/2D条形码图像处理库，用Java实现，带有其他语言的端口。可以用来对二维码和一维码进行扫描识别（我只做了二维码，没有尝试一维码的，大家可以多试一试） 这个库具有一定的局限性，在装有 iOS < 14.3 相机访问仅适用于本机 Safari，而不适用于其他浏览器 （Chrome,…） 或使用 UIWebView 或 WKWebView 的应用。这不是这个库的限制，而是苹果有限的WebRTC支持的限制，但是iOS 14.3（2020年12月发布）现在也支持第三方浏览器中的WebRTC。 浏览器层使用的是MediaDevices Web API，这是旧版浏览器不支持的。 您可以使用WebRTC适配器等外部polyfill来增加浏览器兼容性。 另外，请注意，该库使用的是TypedArray等，这在较旧的浏览器（例如Android 4默认浏览器）中不可用。Int32ArrayUint8ClampedArray 您可以使用 core-js 添加对这些浏览器的支持。 这是开发者说的，对于兼容方面我也不是很懂，如果有大佬会的可以指出来。 代码部分注意，本代码只能在https环境下测试，请不要在本地环境测试，因此会重复性的打包上线，模拟的https环境我没试过，如果有人尝试可以的话，可以进行补充 template部分 css部分 .video { width: 100vw; height: 100vh; z-index: 1; } .video-show { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 70vw; height: 70vw; z-index: 2; background: linear-gradient(to left, #fff, #fff) left top no-repeat, linear-gradient(to bottom, #fff, #fff) left top no-repeat, linear-gradient(to left, #fff, #fff) right top no-repeat, linear-gradient(to bottom, #fff, #fff) right top no-repeat, linear-gradient(to left, #fff, #fff) left bottom no-repeat, linear-gradient(to bottom, #fff, #fff) left bottom no-repeat, linear-gradient(to left, #fff, #fff) right bottom no-repeat, linear-gradient(to left, #fff, #fff) right bottom no-repeat; background-size: 2px 20px, 20px 2px, 2px 20px, 20px 2px; } .tip { width: 10vw; height: 10vw; background-color: rgb(45, 236, 45); border: 1px solid #ffffff; border-radius: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 10; } .bgc-f4f4f4 { background-color: #363636; } .page { position: relative; overflow-y: auto; position: relative; height: 100vh; } .change { z-index: 100; position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%); color: #fff; text-align: center; background-color: #fff; width: 50px; height: 50px; border-radius: 50%; line-height: 60px; /* align-content: center; */ } .el-icon-refresh { color: #000; font-size: 25px; }出来的样式效果长这样 我头一次见对华为手机兼容的，不愧是你，华为 为什么会有这个问题，其实把摄像头列表打印出来看看就知道了，别的安卓手机都只能扫描出来两个摄像头，索引为0的是前置摄像头，索引为1的是后置摄像头，只需要调整这个索引，也就是调整上面js代码里的num就可以达到前后摄像头切换的功能 但是！！！！ 华为手机，或者说鸿蒙系统，能扫描出来TMD八个摄像头，前三个都是前置摄像头，后面的是后置摄像头 那么！！为什么我选择第六个摄像头呢，因为第六个摄像头最清楚，毕竟我这就只有一个测试机，不知道别的手机啥样，多试试吧。 好了，其他的就没啥的，反正这个页面我在微信里和浏览器里都能使用，上面的代码直接抄下来就能用，有什么别的我遗漏的，欢迎补充，如果觉得有帮助，请点个赞，十分感谢。 |
将就着看吧，别嫌弃样式丑，自个调整一下【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |