vue调用本地摄像头实现拍照

最新推荐文章于 2025-02-27 00:30:00 发布

原创

最新推荐文章于 2025-02-27 00:30:00 发布 · 1.8w 阅读

94 ·

CC 4.0 BY-SA版权

文章标签：

#vue #本地摄像头拍照

本文介绍如何使用Vue.js在本地环境中调用摄像头实现拍照功能。详细解释了如何请求摄像头权限，展示摄像头画面，并通过按钮控制拍照及保存图片为base64格式。同时提供了完整的代码示例。

前言：

vue调用本地摄像头实现拍照功能，由于调用摄像头有使用权限，只能在本地运行，线上需用https域名才可以使用。

实现效果：

1、摄像头效果：

2、拍照效果：

实现代码：

<template>
    <div class="camera_outer">
      <video id="videoCamera" :width="videoWidth" :height="videoHeight" autoplay></video>
      <canvas style="display:none;" id="canvasCamera" :width="videoWidth" :height="videoHeight" ></canvas>

      <div v-if="imgSrc" class="img_bg_camera">
        <img :src="imgSrc" alt="" class="tx_img">
      </div>
      <button @click="getCompetence()">打开摄像头</button>
      <button @click="stopNavigator()">关闭摄像头</button>
　　　　　<button @c