VUE项目移动端H5调用摄像头扫码
<template><div><div @click="moveToCameraAVG()" v-cloak><div class="warm_title2">点击扫码</div></div></div></template><script type="text/ecmascript-6">
·
<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 = this
if (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.oGetUserMedia
if (!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 = stream
video.srcObject = stream
} catch (error) {
video.src = window.URL.createObjectURL(stream)
}
self.localMediaStream = stream
video.play()
})
.catch(function (err) {
alert(err.name + ': ' + err.message)
})
},
},
}
</script>
<style lang="scss"></style>
此代码须打包后在Hbuilder上
只有真机运行才能起作用
以上是我个人书写代码,仅供参考,欢迎指正
更多推荐
已为社区贡献1条内容
所有评论(0)