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：摄像头访问

回答

相关问题