使用電腦本地攝像頭的權限

• 關于如何調用本地攝像頭的問題
• • 準備工具 (VS Code,Vue腳手架工具,Element UI)
  • vue調用本地攝像頭實現拍照功能，由于調用攝像頭有使用權限，只能在本地運行，線上需用https域名才可以使用。
  • 實現效果
  • 1.攝像頭效果
  • 直接上代碼
  • 實現原理
  • 最后base64轉文件，此處沒用到
  • 沒有寫css樣式,這里偷懶了,大家可以自己操作

關于如何調用本地攝像頭的問題

不管是在vue項目里還是在其其它的項目當中,它都是window的對象

準備工具 (VS Code,Vue腳手架工具,Element UI)

：

vue調用本地攝像頭實現拍照功能，由于調用攝像頭有使用權限，只能在本地運行，線上需用https域名才可以使用。

實現效果

1.攝像頭效果

直接上代碼

<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"><p>效果預覽</p><img :src="imgSrc" alt class="tx_img" /></div><div class="button"><el-button @click="getCompetence()">打開攝像頭</el-button><el-button @click="stopNavigator()">關閉攝像頭</el-button><el-button @click="setImage()">拍照</el-button></div></div> </template><script>export default {name:"Xiu",data() {return {videoWidth: 250,videoHeight: 350,imgSrc: "",thisCancas: null,thisContext: null,thisVideo: null,openVideo:false};},mounted(){//this.getCompetence()//進入頁面就調用攝像頭},methods: {// 調用權限（打開攝像頭功能）getCompetence() {var _this = this;_this.thisCancas = document.getElementById("canvasCamera");_this.thisContext = this.thisCancas.getContext("2d");_this.thisVideo = document.getElementById("videoCamera");_this.thisVideo.style.display = 'block';// 獲取媒體屬性，舊版本瀏覽器可能不支持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);});},// 繪制圖片（拍照功能）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;//賦值并預覽圖片},// 關閉攝像頭stopNavigator() {this.thisVideo.srcObject.getTracks()[0].stop();},// 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 });}} }; </script><style scoped></style>

實現原理

1)通過按鈕的點擊來調用函數,實現照片的顯示和錄制,
2) 打開攝像頭調用getCompetence()函數
3) 獲取媒體屬性，舊版本瀏覽器可能不支持mediaDevices，我們首先設置一個空對象,使用getUserMedia，因為它會覆蓋現有的屬性。 這里，如果缺少getUserMedia屬性，就添加它。
3.1) 我們需要一系列的判斷,包括瀏覽器版本,或者srcObject,如果沒有該屬性那么就棄用它
4)拍照調用setImgs()函數,`

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;//賦值并預覽圖片},

關閉攝像頭調用函數stipNavigator()

stopNavigator() {this.thisVideo.srcObject.getTracks()[0].stop();},

最后base64轉文件，此處沒用到

沒有寫css樣式,這里偷懶了,大家可以自己操作

總結

以上是生活随笔為你收集整理的Vue调用本地摄像头权限的全部內容，希望文章能夠幫你解決所遇到的問題。

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