使用vue.js调用摄像头示例

最新推荐文章于 2023-11-18 13:14:51 发布

Pastthewind

最新推荐文章于 2023-11-18 13:14:51 发布

阅读量895

点赞数

分类专栏：旧博客文章标签： vue.js Powered by 金山文档

本文链接：https://blog.csdn.net/Pastthewind/article/details/129155161

版权

旧博客专栏收录该内容

145 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('view')"/>
</head>
<body class="pear-container">
<div class="layui-card" id="app">
    <div class="layui-card-body">
        <el-button type="primary" @click="getCompetence()">打开摄像头</el-button>
        <el-button type="danger" @click="stopNavigator()">关闭摄像头</el-button>
        <el-button type="success" @click="setImage()">拍照</el-button>
        <el-select v-model="facingMode" placeholder="请选择摄像头类型">
            <el-option label="前置" value="user"></el-option>
            <el-option label="后置" value="environment"></el-option>
        </el-select>
        <video id="videoCamera" :width="videoWidth" :height="videoHeight" autoplay></video>
        <canvas style="display:none;" id="canvasCamera" :width="videoWidth" :height="videoHeight"></canvas>
    </div>
    <div class="layui-card-body">
        <div v-if="imgSrc">
            <el-avatar shape="square" size="100" fit="fill" :src="imgSrc"></el-avatar>
        </div>
    </div>
</div>
</body>
<th:block th:include="include :: footer"/>
<script>
    new Vue({
        el: '#app',
        data: {
            videoWidth: 1000,
            videoHeight: 300,
            imgSrc: '',
            thisCancas: null,
            thisContext: null,
            thisVideo: null,
            facingMode: 'environment', // 前置还是后置摄像头 environment/user
        },
        methods: {

          // 调用权限（打开摄像头功能）
          getCompetence () {
            var _this = this
            this.thisCancas = document.getElementById('canvasCamera')
            this.thisContext = this.thisCancas.getContext('2d')
            this.thisVideo = document.getElementById('videoCamera')
            // 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象
            if (navigator.mediaDevices === undefined) {
              navigator.mediaDevices = {}
            }
            // 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象
            // 使用getUserMedia，因为它会覆盖现有的属性。
            // 这里，如果缺少getUserMedia属性，就添加它。
            if (navigator.mediaDevices.getUserMedia === undefined) {
              navigator.mediaDevices.getUserMedia = function (constraints) {
                // 首先获取现存的getUserMedia(如果存在)
                var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia
                // 有些浏览器不支持，会返回错误信息
                // 保持接口一致
                if (!getUserMedia) {
                  return Promise.reject(new Error('getUserMedia is not implemented in this browser'))
                }
                // 否则，使用Promise将调用包装到旧的navigator.getUserMedia
                return new Promise(function (resolve, reject) {
                  getUserMedia.call(navigator, constraints, resolve, reject)
                })
              }
            }
            var constraints = { audio: false, video: { width: this.videoWidth, height: this.videoHeight, transform: 'scaleX(-1)',facingMode: this.facingMode } }
            navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
              // 旧的浏览器可能没有srcObject
              if ('srcObject' in _this.thisVideo) {
                _this.thisVideo.srcObject = stream
              } else {
                // 避免在新的浏览器中使用它，因为它正在被弃用。
                _this.thisVideo.src = window.URL.createObjectURL(stream)
              }
              _this.thisVideo.onloadedmetadata = function (e) {
                _this.thisVideo.play()
              }
            }).catch(err => {
                this.$message.error('未检测到摄像头');
                console.log(err)
            })
          },
          // 绘制图片（拍照功能）
          setImage () {
            var _this = this
            // 点击，canvas画图
            _this.thisContext.drawImage(_this.thisVideo, 0, 0, _this.videoWidth, _this.videoHeight)
            // 获取图片base64链接
            var image = this.thisCancas.toDataURL('image/png')
            _this.imgSrc = image
            console.log(image,"--->image")
            this.$emit('refreshDataList', this.imgSrc)
          },
          // base64转文件
          dataURLtoFile (dataurl, filename) {
            var arr = dataurl.split(',')
            var mime = arr[0].match(/:(.*?);/)[1]
            var bstr = atob(arr[1])
            var n = bstr.length
            var u8arr = new Uint8Array(n)
            while (n--) {
              u8arr[n] = bstr.charCodeAt(n)
            }
            return new File([u8arr], filename, { type: mime })
          },
          // 关闭摄像头
          stopNavigator () {
            this.thisVideo.srcObject.getTracks()[0].stop()
          }
        },
        mounted() {
        },
    });
</script>
</html>