Vue3摄像头截图

最新推荐文章于 2024-05-16 19:33:19 发布

苏范霖

最新推荐文章于 2024-05-16 19:33:19 发布

阅读量342

点赞数

文章标签：前端 vue.js

本文链接：https://blog.csdn.net/qq_38247491/article/details/130007512

版权

效果:
在这里插入图片描述

安装组件

npm install webrtc/adapter

模板代码

<template >
    <div class="body">
        <video src="" autoplay ref="video" ></video>
        <div @click="capture">开始捕获</div>
        <canvas ref='canvas' height="600" width="414"></canvas>
    </div>
</template>

js代码

<script setup >
import { ref } from 'vue';
import adapter from 'webrtc-adapter';
const video = ref(null);
const canvas  = ref();
var ctx = ref();
// console.log(adapter.browserDetails.browser);
// console.log(adapter.browserDetails);
const constraints = {
    audio: false,
    // video: {facingMode: {exact: 'environment'}}  // environment=后置摄像头,user=前置摄像头
    video: {
        width: 414,
        height:600,
    }, 
    // video: true
};
navigator.mediaDevices.getUserMedia(constraints)
.then((stream) => {
    // video.value为video元素，将摄像头视频流绑定到video上实时预览
    video.value.srcObject = stream;
})
.catch((err) => {
    console.error(err)
});
// 点击事件
const capture=()=>{
    ctx = canvas.value.getContext('2d'); 
    ctx.drawImage(video.value, 0, 0);
    console.log(ctx)
    const image = canvas.value.toDataURL('image/jpeg', 0.5);
    data.path = image;
    console.log(image)
}

</script>

参考: