整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          html調用攝像頭

          司項目需要調用攝像頭,看了一下html5文檔,主要是使用html5的getUserMedia()API,寫一個例子來記錄具體的使用方法。



          <html>
          <body>
          <!-- 用于展示攝像頭視頻流 -->
          <video id="video" autoplay style="width: 480px;height: 320px"></video>
          <div>
           <button id="capture" onclick="handleClickCapture()">拍照</button>
          </div>
          
          <!-- 展示拍攝的照片 -->
          <canvas id="canvas" width="480" height="320"></canvas>
          
          <script>
           var video = document.getElementById('video');
           var capture = document.getElementById('capture');
           var ctx = document.getElementById('canvas').getContext('2d');
          
           /**
           * 調用用戶媒體設備
           * @param constraints 配置信息
           * @param success 成功回調函數
           * @param error 失敗回調函數
           */
           function getUserMediaToPhoto(constraints,success,error) {
           if(navigator.mediaDevices.getUserMedia){
           navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
           }else if (navigator.webkitGetUserMedia) {
           navigator.webkitGetUserMedia(constraints,success,error);
           }else if(navigator.mozGetUserMedia){
           navigator.mozGetUserMedia(constraints,success,error);
           }else if(navigator.getUserMedia){
           navigator.getUserMedia(constraints,success,error);
           }
           }
          
           /**
           * 成功回調函數
           * @param stream 視頻流
           */
           function success(stream){
           var CompatibleURL = window.URL || window.webkitURL;
           try {
           video.src = CompatibleURL.createObjectURL(stream);
           } catch (e) {
           video.srcObject = stream;
           }
           video.play();
           }
          
           /**
           * 失敗回調
           * @param error 錯誤對象
           */
           function error(error) {
           console.log('無法訪問媒體設備', error);
           }
          
           if(navigator.mediaDevices.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia){
           getUserMediaToPhoto({video:{width:480,height:320}},success,error);
           }else{
           alert('不支持訪問用戶媒體設備');
           }
          
           /**
           * 拍照按鈕點擊事件
           */
           function handleClickCapture() {
           ctx.drawImage(video,0,0,480,320);
           }
          </script>
          </body>
          </html>
          

          實現了基本的攝像頭調用和拍照,實現思路非常簡單,基本上只是在調用api,唯一惡心的地方在于api版本比較多,不得不多做一些判斷。具體的api介紹、使用和參數可以查看MediaDevices.getUserMedia()。

          自網絡

          這是大家在做信息類網站的時候經常要用到的一個功能:

          理想情況下我們應該先判斷你的設備上是否有攝像頭或相機,但簡單起見,我們在這里直接寫出了HTML標記,而不是用JavaScript先判斷然后動態生成這些標記

          <video id="video" width="300" height="240" autoplay></video>

          <button id="snap">拍照</button>

          <canvas id="canvas" width="300" height="240"></canvas>

          </body>

          </html>

          $( function() {

          try { document.createElement("canvas").getContext("2d"); } catch (e) { alert("not support canvas!") }

          var video = document.getElementById("video"),

          canvas = document.getElementById("canvas"),

          context = canvas.getContext("2d");

          navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

          if (navigator.getUserMedia)

          navigator.getUserMedia(

          { "video": true },

          function (stream) {

          if (video.mozSrcObject !== undefined)video.mozSrcObject = stream;

          else video.src = ((window.URL || window.webkitURL || window.mozURL || window.msURL) && window.URL.createObjectURL(stream)) || stream;

          video.play();

          },

          function (error) {

          alert("Video capture error: " + error.code);

          }

          );

          else alert("Native device media streaming (getUserMedia) not supported in this browser");

          document.getElementById("snap").addEventListener("click", function() {

          /*context.drawImage(video, 0, 0, 640, 480);//照片大小*/

          context.drawImage(video, 0, 0, canvas.width = video.videoWidth, canvas.height = video.videoHeight)

          }, false);

          言小敘

          PC 端網頁調用攝像頭的場景想必大家并不陌生,打開一個網址,開啟攝像頭開始筆試/視頻聊天/直播等。

          而在移動端網頁調用攝像頭的場景你見得多嗎?我想答案應該是不多吧(在下見識淺薄)。

          H5 相較于native app 一直被詬病的就有調用手機原生能力差這一點。

          但需求總是會突如其來,做與不做?

          其實,做與不做都不應該影響你去貯備相關知識、做較為充分的調研。市面上類似的技術實現不多,不代表不能做。真的不能做,也至少得知道原因吧?

          也許在你探尋的過程中,就會有不一樣的發現。

          一、 WebRTC

          方案一就是 webRTC,也正是 PC 端的實現方案。

          WebRTC (Web Real-Time Communications) 是一項實時通訊技術,它允許網絡應用或者站點,在不借助中間媒介的情況下,建立瀏覽器之間點對點(Peer-to-Peer)的連接,實現視頻流和(或)音頻流或者其他任意數據的傳輸。WebRTC包含的這些標準使用戶在無需安裝任何插件或者第三方的軟件的情況下,創建點對點(Peer-to-Peer)的數據分享和電話會議成為可能。 —— MDN-WebRTC_API

          核心API

          核心的API為:navigator.mediaDevices.getUserMedia

          • 特注:這里還有一個舊有的 API Navigator.getUserMedia 已經被廢棄掉了,注意區分,別再用舊 API 做測試啦~

          兼容情況

          Can I Use:看一下這個 API 的兼容情況

          https://caniuse.com/?search=GetUserMedia

          本瓜結合網上代碼,小做修改,放到了線上。

          在線測試地址:https://tuaran.site/static/webrtc.html

          貼下關鍵代碼

          <body>
            <div>H5調前置攝像頭DEMO</div>
            <video id="video" width="480" height="320" muted controls  autoplay="autoplay">
            </video>
            <div>
              <button id="capture">拍照</button>
            </div>
            <canvas id="canvas" width="480" height="320"></canvas>
            <script>
              //訪問用戶媒體設備的兼容方法
              function getUserMedia(constraints, success, error) {
                if (navigator.mediaDevices.getUserMedia) {
                  //最新的標準API
                  navigator.mediaDevices.getUserMedia({
                              'audio':{ echoCancellation: false },
                              'video':{ 'facingMode': "user" }//調用前置攝像頭,后置攝像頭使用video: { facingMode: { exact: "environment" } }
                          })
                          .then(success)
                          .catch(error)
                } else if (navigator.webkitGetUserMedia) {
                  //webkit核心瀏覽器
                  navigator.webkitGetUserMedia(constraints, success, error)
                } else if (navigator.mozGetUserMedia) {
                  //firfox瀏覽器
                  navigator.mozGetUserMedia(constraints, success, error);
                } else if (navigator.getUserMedia) {
                  //舊版API
                  navigator.getUserMedia(constraints, success, error);
                }
              }
          
              let video = document.getElementById('video');
              let canvas = document.getElementById('canvas');
              let context = canvas.getContext('2d');
          
              function success(stream) {
                //兼容webkit核心瀏覽器
                let CompatibleURL = window.URL || window.webkitURL;
                //將視頻流設置為video元素的源
                console.log(stream);
          
                //video.src = CompatibleURL.createObjectURL(stream);
                video.srcObject = stream;
                video.play();
              }
          
              function error(error) {
                console.log(`訪問用戶媒體設備失敗${error.name}, ${error.message}`);
              }
          
              if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
                //調用用戶媒體設備, 訪問攝像頭
                getUserMedia({ video: { width: 480, height: 320 } }, success, error);
              } else {
                alert('不支持訪問用戶媒體');
              }
          
              document.getElementById('capture').addEventListener('click', function () {
                context.drawImage(video, 0, 0, 480, 320);
              })
            </script>
          </body>
          

          用 video 播放視頻,如果想要實現截屏,則用 canvas 進行繪制。

          要點小結

          從上圖和實踐中可以得出,WebRTC調起攝像頭的方案 PC 端支持良好,但移動端瀏覽器支持不一。 國內的安卓機自置瀏覽器大部分為低版本的 chrome 內核分支,加殼嵌套,更新緩慢。iOS 對于 Vedio 標簽屬性的兼容也不盡如人意。

          第三方庫

          這里安利一個第三方庫 tracking.js

          它上面有關于 face_camera 的 demo 正用的此解決方案。

          二、 capture

          核心代碼

          調用前置攝像頭代碼實現:

          <input class="phone_input" type="file" accept="video/* capture="user" />
          

          兼容情況

          https://caniuse.com/?search=capture

          同樣把代碼放到了線上,在線測試地址 https://tuaran.site/static/capture.html

          要點小結

          PC 不支持,iOS 支持良好,少部分 Android 機存在兼容差異(部分8.0以上安卓機無法調起前置,會調起后置)。

          總結

          • 對比于 WebRTC 方案和 capture 方案

          WebRTC

          capture

          PC 支持

          PC 不支持

          移動端兼容性混亂

          移動端兼容性較優

          可自定義視頻分辨率/窗口大小等(直播流)

          無法自定義(本地全屏錄制)

          代碼實現復雜

          代碼實現簡單

          綜上:在移動端網頁調起攝像頭,WebRTC 方案兼容性較差,但可自定義程度很高,可操作視頻流、設定分辨率、調整窗口大小等,實現近似 app 調用攝像頭的效果,但相應的實現難度就高、兼容也相對復雜;而 capture 方案兼容性較好,但只是調用原生的相機進行一段視頻錄制,可自定義程度不高。如果視頻過大,壓縮等也將是一個問題。如何平衡二者?可以在兼容的情況下使用前者,不兼容的情況下使用后者,瀏覽器才是最終的答案。

          本瓜相信 H5 一定將會有更多更好的能力!

          我是掘金安東尼: 一名人氣前端技術博主(文章 100w+ 閱讀量)

          終身寫作者(INFP 寫作人格)

          堅持與熱愛(簡書打卡 1000 日)

          我能陪你一起度過漫長技術歲月嗎(以夢為馬)

          覺得不錯,給個三連吧(這是我最大的動力 ) b( ̄▽ ̄)d


          主站蜘蛛池模板: 亚洲国产一区在线| 国产午夜精品一区理论片| 国产内射999视频一区| 无码一区二区三区免费视频| 三上悠亚精品一区二区久久| 精品无码国产AV一区二区三区| 亚洲电影一区二区三区| 国产午夜精品一区二区三区嫩草 | 无码欧精品亚洲日韩一区夜夜嗨| 中文字幕一区二区视频| 亚洲欧美日韩国产精品一区| 无码人妻一区二区三区在线| 国产精品va一区二区三区| 国产一区二区不卡老阿姨| 亚洲一区二区三区在线观看网站| 无码av免费一区二区三区试看| 3d动漫精品啪啪一区二区免费 | 精品视频一区二区三三区四区| 日韩亚洲一区二区三区| 亚州日本乱码一区二区三区| 无码av中文一区二区三区桃花岛| 在线播放偷拍一区精品| 无码人妻精品一区二区三区99不卡 | 亚洲一区精品视频在线| 亚洲熟妇成人精品一区| 色一乱一伦一区一直爽| 亚洲av一综合av一区| 国产精品久久久久一区二区三区 | 日韩一区二区免费视频| 97久久精品无码一区二区天美 | 精品国产不卡一区二区三区| 国产免费播放一区二区| 欧美日本精品一区二区三区| 国产肥熟女视频一区二区三区| 国产怡春院无码一区二区| 国产成人无码一区二区三区| 免费无码A片一区二三区| 久久精品午夜一区二区福利 | 国产精品一区二区不卡| 无码丰满熟妇一区二区| 夜精品a一区二区三区|