在Vue中獲取相機(jī)可以通過調(diào)用 navigator.mediaDevices.getUserMedia 方法來實(shí)現(xiàn)。該方法返回 一個(gè) Promise 對(duì)象，成功時(shí)會(huì)返回一個(gè) MediaStream對(duì)象，其中包含有關(guān)流媒體的信息，包括音頻軌道（如果請(qǐng)求了音頻）和視頻軌道（如果請(qǐng)求了視頻）。下面我們來看看如何在Vue中獲取相機(jī)。

//引入 getUserMedia
require('webrtc-adapter')
navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
export default {
data () {
return {
mediaStream: null
}
},
mounted () {
//調(diào)用 getUserMedia 方法獲取流
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
.then((stream) => {
//獲取到媒體流后，將其賦值給data里的mediaStream
this.mediaStream = stream;
//為video元素設(shè)置srcObject
let video = document.querySelector('video');
video.srcObject = stream;
video.play();
})
.catch((err) => {
console.log(err)
});
}
}

在上面的代碼中，我們首先引入了 getUserMedia 方法，由于不同瀏覽器支持getUserMedia方法的名稱不一樣，因此需要進(jìn)行兼容性處理。然后在Vue組件中定義了一個(gè) data 屬性 mediaStream，用于存儲(chǔ)獲取到的流。

在 mounted 鉤子中，我們調(diào)用 getUserMedia 方法同時(shí)傳入了一個(gè)對(duì)象參數(shù)，通過設(shè)置video和audio屬性為true來獲取視頻和音頻軌道。當(dāng)成功獲取到流時(shí)，通過將流賦值給 data 中的 mediaStream，然后再通過 document.querySelector 方法獲取video元素，將其 srcObject 設(shè)置為流，并調(diào)用其play方法來實(shí)現(xiàn)播放。如果獲取失敗，則通過 catch 捕捉錯(cuò)誤并打印到控制臺(tái)。