1.獲得攝像頭許可權（本文使用chrome）

首先確保你執行以下js所在的url是https協議的或者localhost的：

 const constrains = {
   video: true,audio: true
  }
 navigator.mediaDevices.getUserMedia(constrains)
  .then(stream => {
   console.log('得到stream的型別是MediaStream')
  })
  // 在一些老的瀏覽器上的話：
  // navigator.webkitGetUserMedia
  // navigator.mozGetUserMedia

之後你的瀏覽器會有彈出框，告訴你你的瀏覽器想要訪問camera，問你是否允許。
此外，這裡的constrains可以設定解析度的最小、理想和最大值，還可以在手機端通過設定facingMode來控制攝像頭的方向等。

2.將得到的stream：MediaStream給video,camera實現直播效果

 const video = document.createElement('video');
 //document.body.appendChild(video)
 const constrains = {
   video: true,audio: true
  }
 navigator.mediaDevices.getUserMedia(constrains)
  .then(stream => {
  video.srcObject = stream;
  video.play();
  })

此時video將播放camera實時錄製下來的內容

3.照相

 // 展示相片的image標籤
 const image = document.createElement('image')
 // canvas會讀取video中的內容，然後輸出（有點類似於給video截圖）
 const canvas = document.createElement('canvas')
 const video = document.getElementById('video');
 const context = canvas.getContext('2d')
 context.drawImage(video,canvas.height,canvas.width)
 // 此時將canvas生成的圖片轉換成一個data url
 const url = canvas.toDataURL()
 image.src = url

4.錄影

需要在2.MediaStream給video的基礎上做些修改

 const constrains = {
   video: true,audio: true
  }
 let mediaRecorder
 navigator.mediaDevices.getUserMedia(constrains)
  .then(stream => {
  mediaRecorder = new MediaRecorder(stream)
  })
 
 startRecord() {
  mediaRecorder.start()
  mediaRecorder.ondataavailable = e => {
   chunks.push(e.data)
  }
 }

 stopRecord() {
  mediaRecorder.stop()
  return new Promise(resolve => {
   mediaRecorder.onstop = e => {
    const blob = new Blob(chunks,{ type: 'video/ogg; codecs=opus' })
    const audioURL = window.URL.createObjectURL(blob)
    resolve(audioURL)
   }
  })
 }

 // video標籤用來展示錄製下來的內容
 const video = document.createElement('video');
 //document.body.appendChild(video)

 // 開始錄影
 startRecord()

 // do something....，比方說這裡搞兩個button、一個開始錄影，一個結束錄影

 // 結束錄影
 stopRecord().then(videoUrl => {
  video.src = videoUrl
 })
 // 此時video標籤的內容就是你錄製下來的內容。

以上就是JavaScript 如何在瀏覽器中使用攝像頭的詳細內容，更多關於JavaScript 瀏覽器使用攝像頭的資料請關注我們其它相關文章！