?為了在QT上實現打開攝像頭，拍照等操作。就寫了這個。

1. 寫一個vue組件

先寫一個vue的組件，其內容基本如下：

<el-button type="primary" @click="openVideo">打開攝像頭</el-button> <el-button @click="closeVideo">關閉攝像頭</el-button> <el-button type="danger" @click="screenshot">截圖</el-button> <div><video id="video" ref="video" /> </div> <canvas ref="canvas" width="400" height="300" style="display:none" /> <!-- 截圖展示圖片 --> <img ref="screenshot">

2. 打開攝像頭

// 打開攝像頭openVideo() {// 老的瀏覽器可能根本沒有實現 mediaDevices，所以我們可以先設置一個空的對象console.log("navigator.mediaDevices", navigator.mediaDevices);if (navigator.mediaDevices === undefined) {navigator.mediaDevices = {};}// 一些瀏覽器部分支持 mediaDevices。我們不能直接給對象設置 getUserMedia// 因為這樣可能會覆蓋已有的屬性。這里我們只會在沒有getUserMedia屬性的時候添加它。if (navigator.mediaDevices.getUserMedia === undefined) {navigator.mediaDevices.getUserMedia = constraints => {// 首先，如果有getUserMedia的話，就獲得它const getUserMedia =navigator.getUserMedia ||(navigator.getUserMedia =navigator.mozGetUserMedia ||navigator.webkitGetUserMedia ||navigator.msGetUserMedia);console.log("getUserMedia", getUserMedia);// 一些瀏覽器根本沒實現它 - 那么就返回一個error到promise的reject來保持一個統一的接口if (!getUserMedia) {return Promise.reject(new Error("該瀏覽器暫不支持攝像頭！"));}// 否則，為老的navigator.getUserMedia方法包裹一個Promisereturn new Promise((resolve, reject) => {getUserMedia.call(navigator, constraints, resolve, reject);});};}const constraints = {audio: true,video: {width: { ideal: 1280, max: 1920 },height: { ideal: 720, max: 1080 }}};console.log("window.navigator", window.navigator);window.navigator.mediaDevices.getUserMedia(constraints).then(stream => {const video = this.$refs.video;// 舊的瀏覽器可能沒有srcObjectif ("srcObject" in video) {video.srcObject = stream;} else {// 防止在新的瀏覽器里使用它，因為它已經不再支持了video.src = window.URL.createObjectURL(stream);}video.onloadedmetadata = e => {video.play();};}).catch(err => {console.log(err.name + ": " + err.message);});}

沒錯，這個代碼是在mdn上的，幾乎沒有任何改變，例子講的挺好的。

3. 截圖并保存

// 截圖screenshot() {// 獲取視頻const video = this.$refs.video;// 獲取截圖的地址const screenshot = this.$refs.screenshot;// 獲取canvasconst canvas = this.$refs.canvas;// 渲染一個2d平面的視圖const ctx = canvas.getContext("2d");// 設置canvas 視圖文件地址和大小ctx.drawImage(video, 0, 0, 400, 300);// 將數據轉為base64賦值給img標簽的src屬性screenshot.src = canvas.toDataURL("image/png");console.log("screenshot.src", screenshot.src);const imgData = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");// 下載圖片到本地const save_link = document.createElementNS("http://www.w3.org/1999/xhtml","a");save_link.href = imgData;save_link.download = "file_" + new Date().getTime() + ".png";save_link.click();}

4. 關閉攝像頭

// 關閉攝像頭closeVideo() {console.log("srcObject", this.$refs.video.srcObject);const srcObject = this.$refs.video.srcObject ? this.$refs.video.srcObject.getTracks() : this.$refs.video.src.getTracks()srcObject.forEach(track => {track.stop();this.$refs.video.src = null;});},

關閉攝像頭，是先獲取這個這個視頻所在的任務，然后關閉每一個任務，并將其地址設為空。

5. 在electron遇到的問題

開發的時候，在electron中使用遇到調用不了攝像頭的問題。經過多次debug之后，發現是http和https的原因。

所以打包好后的文件在electron中使用，是可以調用攝像頭并截圖保存的。

總結

以上是生活随笔為你收集整理的调用摄像头_摄像头 | 浏览器调用摄像头并实现截图保存的效果的全部內容，希望文章能夠幫你解決所遇到的問題。

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