HTML5：攝像頭訪問

我對HTML5很新。我嘗試使用以下HTML5代碼訪問我的手機上的相機。它始終顯示「不支持本地網絡攝像頭」。看來我的手機瀏覽器（safari和android 2.1網頁瀏覽器）不支持相機。HTML5：攝像頭訪問

您能否告訴我應該使用哪種瀏覽器訪問相機？

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, maximum-scale=1.0"> 
    <style> 
     body {width: 100%;} 
     canvas {display: none;} 
    </style> 
    <script> 
     var video, canvas, msg; 
     var load = function() { 
      video = document.getElementById('video'); 
      canvas = document.getElementById('canvas'); 
      msg = document.getElementById('error'); 
      if(navigator.getUserMedia) { 
       video.onclick = function() { 
        var context = canvas.getContext("2d"); 
        context.drawImage(video, 0, 0, 240, 320); 
        var image = {"demo" : { 
         "type" : "device", 
         "image" : canvas.toDataURL("image/png") 
        }}; 
       }; 

       var success = function (stream) { 
        video.src = stream; 
       }; 

       var error = function (err) { 
        msg.innerHTML = "Error: " + err.code; 
       }; 

       navigator.getUserMedia('video', success, error); 

      } else { 
       msg.innerHTML = "Native web camera not supported :("; 
      } 

     }; 

     window.addEventListener('DOMContentLoaded', load, false); 
    </script> 
</head> 
<body> 
    <video id="video" width="240" height="320" autoplay> </video> 
    <p  id="error">Click on the video to send a snapshot to the receiving screen</p> 
    <canvas id="canvas" width="240" height="320"> </canvas> 
</body> 
</html>

來源

2012-02-24 love sunset

HTML5的攝像頭API還很新，它甚至不是很廣泛的支持*臺式機*，更不用說移動設備。你不能依賴它可用。 – Kitsune 2012-02-24 13:27:12

看到這裏的演示HTML5的麥克風和攝像頭訪問在Chrome ..這是最新鮮的東西.. http://www.youtube.com/watch？feature = player_detailpage＆v = VP0SV3YWOWA＃t = 1425s – Lloyd 2012-02-24 14:49:28

HTML5移動版不再支持「流血邊緣」 - 請參閱http://stackoverflow.com/a/13489553/957950瞭解如何直接從相機獲取圖片，或者通過http： //mobilehtml5.org/ts/?id=23。歡迎來到未來！仍然沒有懸浮板，對不起。 :( – brichins 2016-02-18 17:21:22

我認爲Opera是唯一支持這種HTML5擴展的移動瀏覽器。

查看該作者的記錄到此主題;

http://francisshanahan.com/index.php/2011/stream-a-webcam-using-javascript-nodejs-android-opera-mobile-web-sockets-and-html5/

來源

2012-02-24 13:26:29 Roger

謝謝大家看來，Opera 12不支持使用相機，有沒有什麼辦法通過HTML5訪問相機？ – 2012-02-24 20:07:56

的getUserMedia方法現在支持在Firefox 17 +，23 +的Chrome和Opera 12+。（參見caniuse.com）

Screenshot of the CanIUse.com support grid as of 2/24/12

來源

2012-02-24 13:30:56

我已經在我的ipad上安裝了Chrome，但仍然沒有打開視頻 – J888 2013-05-29 02:29:40

@Anthony，提問關於在手機上訪問攝像頭Firefox 17+，Chrome 23+，Opera 12+不能在移動設備上使用！ – 2013-07-08 06:04:34

歌劇桌面，歌劇移動和鉻（改變某些配置後）支持HTML5相機/麥克風訪問爲止。

來源

2012-04-04 14:15:30 Hasanavi

我需要在Chrome移動設備中設置哪些設置？ – 2013-01-04 09:20:26

這適用於火狐移動，Chrome行動，iPhone和Android：

<input type="file" id="mypic" accept="image/*">

來源

2012-10-01 12:41:26

這是否會在iPhone和Android手機上調用攝像頭？ – 2013-01-24 17:26:41

這就是而不是WebRTC或與getuserMedia（）相關，它與提議的HTML媒體捕捉有關，它可能會消失。更多信息[here]（http://dev.w3.org/2009/dap/camera/）。 – taco 2013-02-01 18:14:45

@ Travis M：它推出了Android攝像頭，我不知道iPhone，因爲我無法訪問iPhone。 – 2013-07-04 17:36:40

您可以使用Android版Chrome瀏覽由下鍍鉻啓用「啓用的WebRTC」標誌：//標誌

我測試在我的android手機上訪問html5頁面上的相機，它的工作。

來源

2013-06-24 09:13:09 Gunhan

我們已經取得了一些成功這種基本方法來自全國各地的網絡拼湊起來：

<form method="post" action="takephoto.php" enctype="multipart/form-data"> 
<input type="file" accept="image/*" name="file"> 
<input type="submit"> 
</form>

然後在PHP文件，我們使用生成現在（）用於存儲類似的東西唯一的文件名或。

來源

2013-08-07 19:01:15

這與[Jez D提供的]（http://stackoverflow.com/questions/9431475/html5-camera-access/12673480#12673480）基本相同，使用[HTML Media Capture API]（https ：//w3c.github.io/html-media-capture/）。 – 2016-07-27 10:13:54

不知道爲什麼這需要downvote。我剛剛回答了這個問題。沒有研究確定我是唯一一個曾經使用過這種方法的人。但是，謝謝你讓我保持直線和狹窄。 – 2016-08-02 16:28:12

不用擔心，這只是最好的做法，upvote或改善現有的答案，除非你是顯着不同的。 – 2016-08-02 19:39:32

我剛剛開始使用名爲Bridgeit的工具。

這是瀏覽器中的javascript和手機上的應用程序的組合。目前它似乎工作得很好。

http://bridgeit.mobi/

來源

2014-01-10 18:48:45 OrangeKing89

'bridgeit.camera（'id'，'callback'，{postURL：'url'}）'調用BridgeIt應用程序的相機功能，將event.preview中返回的圖像數據url縮略圖傳遞給回調，並上傳照片到指定的網址。 – 2014-01-24 23:07:40

<input type="file" accept="image/*;capture=camera">

檢查此鏈接Camera Acces using HTML5

支持：

Android 3.0的瀏覽器 - 第一個實現之一。看看這個視頻，看看它在行動。 Android版Chrome（0.16） Firefox移動10.0 iOS6的Safari和Chrome（部分支持）

來源

2015-03-20 09:30:25 user3475960

HTML5：攝像頭訪問

回答

相關問題