Vue實現(xiàn)調(diào)用PC端攝像頭實時拍照
更新時間:2021年09月29日 17:00:38 作者:小咸魚大翻身
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)調(diào)用PC端攝像頭實時拍照,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
Vue之調(diào)用PC端攝像頭實時拍照,供大家參考,具體內(nèi)容如下
由于我使用的是點擊按鈕打開模態(tài)框拍照所以在這里吧按鈕和模態(tài)框代碼都粘貼如下。
<!-- 打開模態(tài)框按鈕--> <el-form-item label="*照片:" prop="headImage"> <el-input type="text" v-model="imgSrc" /> <el-col :span="1.5"> <el-button @click="onTake" icon="el-icon-camera" size="small"> 拍照上傳 </el-button> </el-col> </el-form-item> <!--拍照后顯示圖片--> <el-form-item label="" prop="imgSrc"> <img v-if="imgSrc" :src="imgSrc" style="width: 200px;height: 240px;" /> </el-form-item>
<!--拍照模態(tài)框--> <el-dialog title="拍照上傳" :visible.sync="visible" @close="onCancel" width="1065px"> <div class="box"> <video id="videoCamera" class="canvas" :width="videoWidth" :height="videoHeight" autoPlay></video> <canvas id="canvasCamera" class="canvas" :width="videoWidth" :height="videoHeight"></canvas> </div> <div slot="footer"> <el-button @click="drawImage" icon="el-icon-camera" size="small"> 拍照 </el-button> <el-button v-if="os" @click="getCompetence" icon="el-icon-video-camera" size="small"> 打開攝像頭 </el-button> <el-button v-else @click="stopNavigator" icon="el-icon-switch-button" size="small"> 關(guān)閉攝像頭 </el-button> <el-button @click="resetCanvas" icon="el-icon-refresh" size="small"> 重置 </el-button> <el-button @click="onCancel" icon="el-icon-circle-close" size="small"> 完成 </el-button> </div> </el-dialog>
下來我們來看js代碼,我把不需要的部分刪除了,因為涉及單位項目問題實屬抱歉哈
<script> export default { name: "XXX", data() { return { visible: false,//彈窗 loading: false,//上傳按鈕加載 os: false,//控制攝像頭開關(guān) thisVideo: null, thisContext: null, thisCancas: null, videoWidth: 500, videoHeight: 400, postOptions:[], CertCtl:'', // 遮罩層 loading: true, // 選中數(shù)組 ids: [], // 非單個禁用 single: true, // 非多個禁用 multiple: true, // 總條數(shù) total: 0, // 項目人員表格數(shù)據(jù) akworkerList: [], //工種類別數(shù)據(jù)字典 workerTypeOptions:[], // 彈出層標(biāo)題 title: "", // 是否顯示彈出層 open: false, // 查詢參數(shù) queryParams: { pageNum: 1, pageSize: 10, imgSrc:undefined, }, // 表單參數(shù) form: {}, // 表單校驗 rules: { } }; }, created() { }, methods: { /*調(diào)用攝像頭拍照開始*/ onTake() { this.visible = true; this.getCompetence(); }, onCancel() { this.visible = false; /* this.resetCanvas();*/ this.stopNavigator(); }, // 調(diào)用攝像頭權(quán)限 getCompetence() { //必須在model中render后才可獲取到dom節(jié)點,直接獲取無法獲取到model中的dom節(jié)點 this.$nextTick(() => { const _this = this; this.os = false;//切換成關(guān)閉攝像頭 this.thisCancas = document.getElementById('canvasCamera'); this.thisContext = this.thisCancas.getContext('2d'); this.thisVideo = document.getElementById('videoCamera'); // 舊版本瀏覽器可能根本不支持mediaDevices,我們首先設(shè)置一個空對象 if (navigator.mediaDevices === undefined) { navigator.menavigatordiaDevices = {} } // 一些瀏覽器實現(xiàn)了部分mediaDevices,我們不能只分配一個對象 // 使用getUserMedia,因為它會覆蓋現(xiàn)有的屬性。 // 這里,如果缺少getUserMedia屬性,就添加它。 if (navigator.mediaDevices.getUserMedia === undefined) { navigator.mediaDevices.getUserMedia = function (constraints) { // 首先獲取現(xiàn)存的getUserMedia(如果存在) let getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia; // 有些瀏覽器不支持,會返回錯誤信息 // 保持接口一致 if (!getUserMedia) { return Promise.reject(new Error('getUserMedia is not implemented in this browser')) } // 否則,使用Promise將調(diào)用包裝到舊的navigator.getUserMedia return new Promise(function (resolve, reject) { getUserMedia.call(navigator, constraints, resolve, reject) }) } } const constraints = { audio: false, video: {width: _this.videoWidth, height: _this.videoHeight, transform: 'scaleX(-1)'} }; 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.$notify({ title: '警告', message: '沒有開啟攝像頭權(quán)限或瀏覽器版本不兼容.', type: 'warning' }); }); }); }, //繪制圖片 drawImage() { // 點擊,canvas畫圖 this.thisContext.drawImage(this.thisVideo, 0, 0, this.videoWidth, this.videoHeight); // 獲取圖片base64鏈接 this.imgSrc = this.thisCancas.toDataURL('image/png'); /*const imgSrc=this.imgSrc;*/ }, //清空畫布 clearCanvas(id) { let c = document.getElementById(id); let cxt = c.getContext("2d"); cxt.clearRect(0, 0, c.width, c.height); }, //重置畫布 resetCanvas() { this.imgSrc = ""; this.clearCanvas('canvasCamera'); }, //關(guān)閉攝像頭 stopNavigator() { if (this.thisVideo && this.thisVideo !== null) { this.thisVideo.srcObject.getTracks()[0].stop(); this.os = true;//切換成打開攝像頭 } }, /*調(diào)用攝像頭拍照結(jié)束*/ } }; </script>
在此,本篇文章也就分享完畢了,若有什么不對之處還望各位大佬多多指點,若有相似之處還望聯(lián)系修改刪除,謝謝
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Composition API思想封裝NProgress示例詳解
這篇文章主要為大家介紹了Composition API思想封裝NProgress示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08vue項目頁面的打印和下載PDF加loading效果的實現(xiàn)(加水印)
這篇文章主要介紹了vue項目頁面的打印和下載PDF加loading效果的實現(xiàn)(加水印),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-12-12Vue Element前端應(yīng)用開發(fā)之菜單資源管理
在權(quán)限管理系統(tǒng)中,菜單也屬于權(quán)限控制的一個資源,屬于角色控制的一環(huán)。不同角色用戶,登錄系統(tǒng)后,出現(xiàn)的系統(tǒng)菜單是不同的。菜單結(jié)合路由集合,實現(xiàn)可訪問路由的過濾,也就實現(xiàn)了對應(yīng)角色菜單的展示和可訪問路由的控制。2021-05-05