前幾天項目有個需求 ?人臉識別 ? 不想用flash這么惡心的組件 ?所有查找了網上一下資料 手擼了一個?

可用瀏覽器 ?谷歌 火狐 360 UC ?QQ ?當然都是基于三大內核的 （除了該死的IE都能用）

這里要特別說明 攝像頭權限是瀏覽器比較高的權限 ?需要本地地址 上線需要?https 域名 http 是沒有用的

不多說 ?直接代碼吧 ?自己去看

<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><img src="../../assets/img/camera_01.png" alt="" class="bg_r_img"><div v-if="imgSrc" class="img_bg_camera"><img :src="imgSrc" alt="" class="tx_img"><div class="img_btn_camera">{{validTip}}<img v-if="validTip === '驗證中'" src="../../assets/img/loding.svg" alt="" class="loding_img"></div></div><div v-else class="btn_camera">把您的臉至于圓圈中央</div></div> </template> <script> export default {data () {return {videoWidth: 540,videoHeight: 410,imgSrc: '',thisCancas: null,thisContext: null,thisVideo: null,validTip: '驗證中'}},computed: {},methods: {/**@author wf_Huang*@Time 2019/6/5 0005 17:35*@function 調用權限*****************************************/getCompetence () {var _this = thisthis.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.getUserMediareturn 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)' } }navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {// 舊的瀏覽器可能沒有srcObjectif ('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 => {console.log(err)})},/**@author wf_Huang*@Time 2019/6/5 0005 17:32*@function 繪制圖片*****************************************/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 = imagethis.$emit('refreshDataList', this.imgSrc)},/**@author wf_Huang*@Time 2019/6/5 0005 17:44*@function base64轉文件*****************************************/dataURLtoFile (dataurl, filename) {var arr = dataurl.split(',')var mime = arr[0].match(/:(.*?);/)[1]var bstr = atob(arr[1])var n = bstr.lengthvar u8arr = new Uint8Array(n)while (n--) {u8arr[n] = bstr.charCodeAt(n)}return new File([u8arr], filename, { type: mime })},/**@author wf_Huang*@Time 2019/6/10 0010 3:41*@function 關閉攝像頭*****************************************/stopNavigator () {this.thisVideo.srcObject.getTracks()[0].stop()}},mounted () {this.getCompetence()},beforeDestroy () {this.stopNavigator()} }</script> <style lang="scss" scoped> .camera_outer{position: relative;overflow: hidden;background: url("../../assets/img/user_0608_04.png") no-repeat center;background-size: 100%;video,canvas,.tx_img{-moz-transform:scaleX(-1);-webkit-transform:scaleX(-1);-o-transform:scaleX(-1);transform:scaleX(-1);}.btn_camera{position: absolute;bottom: 4px;left: 0;right: 0;height: 50px;background-color: rgba(0,0,0,0.3);line-height: 50px;text-align: center;color: #ffffff;}.bg_r_img{position: absolute;bottom: 0;left: 0;right: 0;top: 0;}.img_bg_camera{position: absolute;bottom: 0;left: 0;right: 0;top: 0;img{width: 100%;height: 100%;}.img_btn_camera{position: absolute;bottom: 0;left: 0;right: 0;height: 50px;line-height: 50px;text-align: center;background-color: rgba(0,0,0,0.3);color: #ffffff;.loding_img{width: 50px;height: 50px;}}} } </style>

?

總結

以上是生活随笔為你收集整理的VUE 调用PC摄像头 全浏览器可用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。