網頁調用攝像頭詳解

一、網頁調用攝像頭許可權

在使用WebRTC等技術調用攝像頭前，需要獲得用戶授權，否則會導致調用失敗。用戶授權時，可以調用瀏覽器的getUserMedia函數：

//獲取媒體方法（舊版本瀏覽器可能問題較多）
navigator.getUserMedia

//獲取媒體方法（新版本不需要前綴）
navigator.mediaDevices.getUserMedia

在用戶授權後，我們需要檢查是否獲得了媒體流：

navigator.mediaDevices.getUserMedia({
  audio: true,
  video: true
}).then(function(stream) {
  console.log('獲得媒體流');
}).catch(function(error) {
  console.log('getUserMedia錯誤:', error);
});

二、網頁調用攝像頭變綠

在用戶授權並成功獲得視頻流之後，瀏覽器支持的設備會自動顯示在瀏覽器的可用設備列表中，攝像頭的圖標也會變綠。

三、網頁調用攝像頭失敗

在獲得授權並檢查了攝像頭是否正常工作後，可能仍會遇到網頁調用攝像頭失敗的情況，主要包括：

1. 硬體故障： 攝像頭驅動或硬體故障

2. 軟體問題： 攝像頭應用程序異常或網路差等問題

3. 用戶拒絕請求： 用戶不允許使用攝像頭

4. 瀏覽器不兼容： 如果無法使用getUserMedia或媒體流被禁用，則可能無法獲得視頻流

四、網頁調用攝像頭掃描條形碼

掃描條形碼是一種常見的使用場景，這可以使用jsQR庫來實現：

var canvas = document.getElementById('canvas'); // 畫布
var ctx = canvas.getContext('2d'); // 畫布上下文

navigator.mediaDevices.getUserMedia({ video: true })
  .then(function (stream) {
    var video = document.querySelector('video');
    video.srcObject = stream;
    video.play();

    requestAnimationFrame(tick);
  });

function tick() {
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

  var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  var code = jsQR(imageData.data, imageData.width, imageData.height);

  if (code) {
    console.log('掃描到的條形碼內容：' + code.data);
  }

  requestAnimationFrame(tick);
}

五、網頁調用攝像頭拍照

讓用戶拍照是另一種常見的使用場景，這可以藉助HTML5的canvas標籤來實現，具體實現方法如下：

var imageCapture;

navigator.mediaDevices.getUserMedia({ video: true })
  .then(function (stream) {
    var video = document.querySelector('video');
    video.srcObject = stream;
    video.play();

    imageCapture = new ImageCapture(stream.getVideoTracks()[0]);
  });

document.getElementById('takePhotoButton').addEventListener('click', function () {
  imageCapture.takePhoto()
    .then(function (blob) {
      console.log('拍照完成');

      var img = document.getElementById('photo');
      img.src = URL.createObjectURL(blob);
    });
});

六、網頁調用攝像頭掃碼

通過二維碼掃描程序掃描二維碼進行相關應用的傳遞，我們可以將實現二維碼掃描的代碼添加到頁面中。我們可以調用QuaggaJS來實現二維碼掃描。請注意，要使用WebRTC，QuaggaJS必須先訪問攝像頭：

Quagga.init({
              inputStream : {
                name : "Live",
        type : "LiveStream"
              },
              decoder : {
                readers : ["code_128_reader"]
              }
            }, function(err) {
              if (err) {
                console.log(err);
                return
              }
              console.log("Quagga初始化已完成。");
              Quagga.start();
            });
            
            Quagga.onDetected(function(data) {
                console.log('二維碼數據：', data);
            });

七、網頁調用攝像頭設置

WebRTC允許您控制並更改攝像頭設置。

例如，我們可以自動變焦或調整白平衡等：

// 獲取軌道
navigator.mediaDevices.getUserMedia({ video: true })
.then(function(stream) {
  var video = document.querySelector('video');
  video.srcObject = stream;
  video.play();

  var track = stream.getVideoTracks()[0];

// 設置參數
var capabilities = track.getCapabilities();
console.log('當前縮放：', capabilities.zoom.max);
console.log('當前白平衡：', capabilities.whiteBalanceMode);

// 設置縮放值和白平衡
track.applyConstraints({
  whiteBalanceMode: 'incandescent',
  advanced: [{zoom: 2}]
});
});

八、網頁調用攝像頭插件

如果您需要與IE瀏覽器一起使用，您可能需要安裝攝像頭插件。這通常是ActiveX控制。

九、網頁調用攝像頭代碼怎麼寫

文章中已經詳細的介紹了網頁調用攝像頭的相關內容，總體來說，要使用增強現實、拍照、掃描二維碼等特殊功能時，我們需要編寫一些javascript代碼，並在頁面中使用。從最簡單和基本的代碼開始，逐漸體驗和了解更多有趣的功能。