VUE项目移动端H5调用摄像头扫码

<template><div><div @click="moveToCameraAVG()" v-cloak><div class="warm_title2">点击扫码</div></div></div>
</template><script type="text/ecmascript-6">
export default {data () {return {}},methods: {// 头像相机moveToCameraAVG() {var self = thisif (navigator.mediaDevices === undefined) {navigator.mediaDevices = {}}if (navigator.mediaDevices.getUserMedia === undefined) {navigator.mediaDevices.getUserMedia = function (constraints) {var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMediaif (!getUserMedia) {return Promise.reject(new Error('getUserMedia is not implemented in this browser'))}return new Promise(function (resolve, reject) {getUserMedia.call(navigator, constraints, resolve, reject)})}}var constraints = window.constraints = {audio: false,video: {sourceId: 'default',facingMode: { exact: 'user' }}}navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {var video = document.getElementById('video')try {window.stream = streamvideo.srcObject = stream} catch (error) {video.src = window.URL.createObjectURL(stream)}self.localMediaStream = streamvideo.play()}).catch(function (err) {alert(err.name + ': ' + err.message)})},},}
</script><style lang="scss"></style>

此代码须打包后在Hbuilder上
只有真机运行才能起作用
以上是我个人书写代码，仅供参考，欢迎指正

VUE项目移动端H5调用摄像头扫码相关推荐

vue项目中实现H5调取摄像头扫码扫一扫功能+生成可识别的条形码。单纯的h5网页不涉及真机
vue项目中实现H5调取摄像头扫码扫一扫功能+生成可识别的条形码. 单纯的h5网页不涉及真机 demo链接前端同学可以加我一起交流一起进步案例描述:需求是生成条形码并且在vue项目中实现扫一扫功能 ...
vue实现点击按钮调用摄像头扫码
vue在APP端点击[扫码签到]按钮实现调取摄像头扫码: 1.按钮页面: <template><div><button @click="scanCode&quo ...
Vue h5 调用微信扫码接口
需求调用微信扫码接口,然后获取扫码返回结果的url中的参数,携参跳转到其他页面 1. 安装微信js-sdk 通过yarn安装 yarn add weixin-js-sdk 通过npm安装 npm i ...
WinForm调用摄像头扫码识别二维码
前言因公司业务需求,需要在Windows系统下调用摄像头识别二维码需求,就有了这个功能.根据网上网友提供的一些资料,自己整合应用到项目中,效果还不错(就是感觉像素不是太好).现在将调用摄像头+识别二 ...
【Vue 调用微信扫码 IOS报错解决办法】
遇到一个问题,H5调用摄像头扫码,安卓环境下基本所有机型都可以调起摄像头,但是IOS 只有少部分机型才能调用,参考了网上很多例子比如以下两位老大哥的例子 Vue 移动端实现调用相机扫描二维码或条形码 ...
【javascript】浏览器调用摄像头扫二维码踩坑记录
前言最近做一个项目需要用浏览器调用摄像头扫二维码,然后就踩了几个坑记录下. 踩坑记录我一开始发现了zxing这个库,他分为https://www.npmjs.com/package/@zxing/ ...
Vue 搭建移动端 h5 项目步骤
Vue 搭建移动端 h5 项目步骤简介最近团队里的其他前端小伙伴需要自己搭建移动端 h5 项目,没有整体的思路,于是我就写了这个步骤. 提示:(2022-10-28更新) vue-cli 和vue ...
微信环境中h5调用微信扫一扫api
需求:支持微信公众号的h5页面内调用微信扫一扫api,实现产品的扫码签到功能技术栈:vue, ts 参考资料:微信官方文档步骤: 项目引入js 文件,有两种引入方式, 全局引入全局引入,在全局h ...
Win10环境前后端分离项目基于Vue.js+Django+Python3实现微信(wechat)扫码支付流程(2021年最新攻略)
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_182 之前的一篇文章:mpvue1.0+python3.7+Django2.0.4实现微信小程序的支付功能,主要介绍了微信小程序内 ...

VUE项目移动端H5调用摄像头扫码

VUE项目移动端H5调用摄像头扫码相关推荐

最新文章

热门文章