JS如何實(shí)現(xiàn)打開攝像頭并截圖上傳功能-創(chuàng)新互聯(lián)

小編給大家分享一下JS如何實(shí)現(xiàn)打開攝像頭并截圖上傳功能，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

10年積累的成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站經(jīng)驗(yàn)，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站策劃后付款的網(wǎng)站建設(shè)流程，更有上猶免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

JS打開攝像頭并截圖上傳至后端的一個完整步驟

1. 打開攝像頭主要用到getUserMedia方法，然后將獲取到的媒體流置入video標(biāo)簽

2. 截取圖片主要用到canvas繪圖，使用drawImage方法將video的內(nèi)容繪至canvas中

3. 將截取的內(nèi)容上傳至服務(wù)器，將canvas中的內(nèi)容轉(zhuǎn)為base64格式上傳，后端（PHP）通過file_put_contents將其轉(zhuǎn)為圖片

要注意的是，在chrome以外的瀏覽器中，使用攝像頭或多或少會出現(xiàn)一些問題，可能也是老問題了，所以以下代碼主要基于chrome使用

比如在最新版FireFox中的報(bào)錯，不知為啥

1. 打開攝像頭

getUserMedia 有新版本和舊版本兩種，建議使用新版本

舊版本位于navigator 對象下，根據(jù)瀏覽器不同有所不同

 // 獲取媒體方法（舊方法）
  navigator.getMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMeddia || navigator.msGetUserMedia;

if (navigator.getMedia) {
    navigator.getMedia({
      video: true
    }, function(stream) {
      mediaStreamTrack = stream.getTracks()[0];

      video.src = (window.URL || window.webkitURL).createObjectURL(stream);
      video.play();
    }, function(err) {
      console.log(err);
    });
  }

第一個參數(shù)中指示需要使用視頻（video）或音頻（audio）。

第二個參數(shù)中指示調(diào)用成功后的回調(diào)，其中帶一個參數(shù)（MediaStream），在舊版本中可以直接通過調(diào)用MediaStream.stop() 來關(guān)閉攝像頭，不過在新版之中已廢棄。需要使用MediaStream.getTracks()[index].stop() 來關(guān)閉相應(yīng)的Track

第三個參數(shù)指示調(diào)用失敗后的回調(diào)

新版本位于navigator.mediaDevices 對象下

if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true
    }).then(function(stream) {
      console.log(stream);

      mediaStreamTrack = typeof stream.stop === 'function' ? stream : stream.getTracks()[1];

      video.src = (window.URL || window.webkitURL).createObjectURL(stream);
      video.play();
    }).catch(function(err) {
      console.log(err);
    })
  }

與舊版類似，不過該方法返回了一個Promise對象，可以使用then和catch表示成功與失敗的回調(diào)

需要注意的是，MediaStream.getTracks() 返回的Tracks數(shù)組是按第一個參數(shù)倒序排列的

比如現(xiàn)在定義了

{
  video: true,
  audio: true
}

想關(guān)閉攝像頭，就需要調(diào)用MediaStream.getTracks()[1].stop();

同理，0對應(yīng)于audio的track

使用createObjectURL 將MediaStream寫入video標(biāo)簽，就能夠存儲實(shí)時(shí)的媒體流數(shù)據(jù)（也可以方便的實(shí)時(shí)查看畫面）

舊版本中webkitURL 對象以不被支持，需要使用URL對象

<video width="200" height="150"></video>
  <canvas width="200" height="150"></canvas>

  <p>
    <button id="snap">截取圖像</button>
    <button id="close">關(guān)閉攝像頭</button>
    <button id="upload">上傳圖像</button>
  </p>

  <img id="uploaded" width="200" height="150" />

2. 截取圖像

將內(nèi)容寫入即可

 // 截取圖像
  snap.addEventListener('click', function() {
    context.drawImage(video, 0, 0, 200, 150);
  }, false);

3. 關(guān)閉攝像頭

 // 關(guān)閉攝像頭
  close.addEventListener('click', function() {
    mediaStreamTrack && mediaStreamTrack.stop();
  }, false);

4. 上傳截取的圖像

canvas.toDataURL('image/png')

// 上傳截取的圖像
  upload.addEventListener('click', function() {
    jQuery.post('/uploadSnap.php', {
      snapData: canvas.toDataURL('image/png')
    }).done(function(rs) {
      rs = JSON.parse(rs);

      console.log(rs);

      uploaded.src = rs.path;
    }).fail(function(err) {
      console.log(err);
    });
  }, false);

而這里的后端（PHP）則將獲取的內(nèi)容轉(zhuǎn)換成圖像文件保存

需要注意的是，要將base64的頭部信息字段去掉再保存，否則似乎圖像是損壞無法打開滴

 <?php

  $snapData = $_POST['snapData'];
  $snapData = str_replace('data:image/png;base64,', '', $snapData);
  // $snapData = str_replace(' ', '+', $snapData);

  $img = base64_decode($snapData);

  $uploadDir = 'upload/';
  $fileName = date('YmdHis', time()) . uniqid();

  if (!(file_put_contents($uploadDir . $fileName, $img))) {
    echo json_encode(array('code' => 500, 'msg' => '文件上傳失敗'));
  } else {
    echo json_encode(array('code' => 200, 'msg' => '文件上傳成功', 'path' => $uploadDir . $fileName));
  }

?>

完整JS代碼

<script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
  function $(elem) {
    return document.querySelector(elem);
  }

  // 獲取媒體方法（舊方法）
  navigator.getMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMeddia || navigator.msGetUserMedia;

  var canvas = $('canvas'),
    context = canvas.getContext('2d'),
    video = $('video'),
    snap = $('#snap'),
    close = $('#close'),
    upload = $('#upload'),
    uploaded = $('#uploaded'),
    mediaStreamTrack;

  // 獲取媒體方法（新方法）
  // 使用新方法打開攝像頭
  if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true
    }).then(function(stream) {
      console.log(stream);

      mediaStreamTrack = typeof stream.stop === 'function' ? stream : stream.getTracks()[1];

      video.src = (window.URL || window.webkitURL).createObjectURL(stream);
      video.play();
    }).catch(function(err) {
      console.log(err);
    })
  }
  // 使用舊方法打開攝像頭
  else if (navigator.getMedia) {
    navigator.getMedia({
      video: true
    }, function(stream) {
      mediaStreamTrack = stream.getTracks()[0];

      video.src = (window.URL || window.webkitURL).createObjectURL(stream);
      video.play();
    }, function(err) {
      console.log(err);
    });
  }

  // 截取圖像
  snap.addEventListener('click', function() {
    context.drawImage(video, 0, 0, 200, 150);
  }, false);

  // 關(guān)閉攝像頭
  close.addEventListener('click', function() {
    mediaStreamTrack && mediaStreamTrack.stop();
  }, false);

  // 上傳截取的圖像
  upload.addEventListener('click', function() {
    jQuery.post('/uploadSnap.php', {
      snapData: canvas.toDataURL('image/png')
    }).done(function(rs) {
      rs = JSON.parse(rs);

      console.log(rs);

      uploaded.src = rs.path;
    }).fail(function(err) {
      console.log(err);
    });
  }, false);

  </script>

看完了這篇文章，相信你對“JS如何實(shí)現(xiàn)打開攝像頭并截圖上傳功能”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道，感謝各位的閱讀！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站muchs.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)站欄目：JS如何實(shí)現(xiàn)打開攝像頭并截圖上傳功能-創(chuàng)新互聯(lián)
當(dāng)前網(wǎng)址：http://muchs.cn/article36/dgcdsg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、App開發(fā)、電子商務(wù)、自適應(yīng)網(wǎng)站、網(wǎng)站維護(hù)、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)