?為了在QT上實(shí)現(xiàn)打開攝像頭，拍照等操作。就寫了這個(gè)。

1. 寫一個(gè)vue組件

先寫一個(gè)vue的組件，其內(nèi)容基本如下：

<el-button type="primary" @click="openVideo">打開攝像頭</el-button> <el-button @click="closeVideo">關(guān)閉攝像頭</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() {// 老的瀏覽器可能根本沒有實(shí)現(xiàn) mediaDevices，所以我們可以先設(shè)置一個(gè)空的對象console.log("navigator.mediaDevices", navigator.mediaDevices);if (navigator.mediaDevices === undefined) {navigator.mediaDevices = {};}// 一些瀏覽器部分支持 mediaDevices。我們不能直接給對象設(shè)置 getUserMedia// 因?yàn)檫@樣可能會覆蓋已有的屬性。這里我們只會在沒有g(shù)etUserMedia屬性的時(shí)候添加它。if (navigator.mediaDevices.getUserMedia === undefined) {navigator.mediaDevices.getUserMedia = constraints => {// 首先，如果有g(shù)etUserMedia的話，就獲得它c(diǎn)onst getUserMedia =navigator.getUserMedia ||(navigator.getUserMedia =navigator.mozGetUserMedia ||navigator.webkitGetUserMedia ||navigator.msGetUserMedia);console.log("getUserMedia", getUserMedia);// 一些瀏覽器根本沒實(shí)現(xiàn)它 - 那么就返回一個(gè)error到promise的reject來保持一個(gè)統(tǒng)一的接口if (!getUserMedia) {return Promise.reject(new Error("該瀏覽器暫不支持?jǐn)z像頭！"));}// 否則，為老的navigator.getUserMedia方法包裹一個(gè)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 {// 防止在新的瀏覽器里使用它，因?yàn)樗呀?jīng)不再支持了video.src = window.URL.createObjectURL(stream);}video.onloadedmetadata = e => {video.play();};}).catch(err => {console.log(err.name + ": " + err.message);});}

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

3. 截圖并保存

// 截圖screenshot() {// 獲取視頻const video = this.$refs.video;// 獲取截圖的地址const screenshot = this.$refs.screenshot;// 獲取canvasconst canvas = this.$refs.canvas;// 渲染一個(gè)2d平面的視圖const ctx = canvas.getContext("2d");// 設(shè)置canvas 視圖文件地址和大小ctx.drawImage(video, 0, 0, 400, 300);// 將數(shù)據(jù)轉(zhuǎn)為base64賦值給img標(biāo)簽的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. 關(guān)閉攝像頭

// 關(guān)閉攝像頭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;});},

關(guān)閉攝像頭，是先獲取這個(gè)這個(gè)視頻所在的任務(wù)，然后關(guān)閉每一個(gè)任務(wù)，并將其地址設(shè)為空。

5. 在electron遇到的問題

開發(fā)的時(shí)候，在electron中使用遇到調(diào)用不了攝像頭的問題。經(jīng)過多次debug之后，發(fā)現(xiàn)是http和https的原因。

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。