首先声明一下,对于我的博客整理出来的。绝对是我自己亲测测试后有效果的,对于一些大佬说没用什么的,请仔细检查下您的代码!谢谢
在当前网页安全的情况下,浏览器会开启
navigator.mediaDevices.getUserMedia
我们通过它来实现拍照
如果当前网页不安全可以通过设置谷歌浏览器强制该网页安全:
1.浏览器进入:chrome://flags/#unsafely-treat-insecure-origin-as-secure
2.然后改下参数配置,如下图
这一步感谢这位大佬https://blog.csdn.net/qq_41614928/article/details/107715577
都准备好之后,直接上代码:
<template>
<div>
<article>
<section>
<video id="video"></video>
</section>
<section>
<audio id="audio"></audio>
</section>
<button id="btn" @click="tackcapture">拍照</button>
<button @click="opening">开启</button>
<section>
<canvas id="canvas"></canvas>
</section>
<section><img src="" alt="" id="img" /></section>
</article>
</div>
</template>
<script>
// 拍照上传组件
// 父组件通过函数 getImg 获取照片路径,如 @getImg="getImg"
const Address = ''
export default {
name: 'TakePhotos',
data () {
return {}
},
methods: {
opening () {
let convas = document.querySelector('#canvas') //
let video = document.querySelector('#video')
let audio = document.querySelector('audio')
let img = document.querySelector('#img')
let btn = document.querySelector('button')
let context = canvas.getContext('2d')
let width = 320 // 视频和canvas的宽度
let height = 0 //
let streaming = false // 是否开始捕获媒体
// 老的浏览器可能根本没有实现 mediaDevices,所以我们可以先设置一个空的对象
if (navigator.mediaDevices == undefined) {
navigator.mediaDevices = {}
}
// 获取用户媒体,包含视频和音频
navigator.mediaDevices
.getUserMedia({ video: true, audio: true })
.then((stream) => {
video.srcObject = stream // 将捕获的视频流传递给video 放弃window.URL.createObjectURL(stream)的使用
video.play() // 播放视频
audio.srcObject = stream
audio.play()
})
},
tackcapture () {
// 需要判断媒体流是否就绪
let convas = document.querySelector('#canvas') //
let video = document.querySelector('#video')
let audio = document.querySelector('audio')
let img = document.querySelector('#img')
let btn = document.querySelector('button')
let context = canvas.getContext('2d')
let width = 320 // 视频和canvas的宽度
let height = 0 //
let streaming = true // 是否开始捕获媒体
if (streaming) {
context.drawImage(video, 0, 0, 350, 200) // 将视频画面捕捉后绘制到canvas里面
img.src = canvas.toDataURL('image/png') // 将canvas的数据传送到img里
alert(img.src) // 这边的值可以传入后端
}
// 监听视频流就位事件,即视频可以播放了
video.addEventListener(
'canplay',
function (ev) {
if (!streaming) {
height = video.videoHeight / (video.videoWidth / width)
video.setAttribute('width', width)
video.setAttribute('height', height)
canvas.setAttribute('width', width)
canvas.setAttribute('height', height)
streaming = true
}
},
false
)
}
}
}
</script>