HTML 调用电脑手机摄像头拍照

jxph040365 2014-07-01 03:31:34

关于调用电脑摄像头拍照怎么不行，
我在网上下载很多，运行都不行，
运行浏览器也没有提示。是用谷歌浏览器。



<!doctype html>

<html>

<head>

    <title>html5 capture test</title>

</head>

<body>

    <video autoplay></video>

    <img src="">

    <canvas style="display: none;"></canvas>

    <button id="capture">

        snapshot</button>



    <script type="text/javascript">

        var video = document.querySelector('video');

        var canvas = document.querySelector('canvas');

        var ctx = canvas.getContext('2d');

        var localMediaStream = null;



        var snapshot = function() {

            if (localMediaStream) {

                ctx.drawImage(video, 0, 0);

                document.querySelector('img').src = canvas.toDataURL('image/webp');

            }

        };



        var sizeCanvas = function() {

            setTimeout(function() {

                canvas.width = video.videoWidth;

                canvas.height = video.videoHeight;

                img.width = video.videoWidth;

                img.height = video.videoHeight;

            }, 100);

        };



        var btnCapture = document.getElementById('capture');

        btnCapture.addEventListener('click', snapshot, false);



        if (navigator.getUserMedia) {

            navigator.getUserMedia(

                { video: true },

                function(stream) {

                    video.src = stream;

                    localMediaStream = stream;

                    sizeCanvas();

                },

                function() {

                    alert('your browser does not support getUserMedia');

                }

            );

        }

        else if (navigator.webkitGetUserMedia) {

            navigator.webkitGetUserMedia(

                { video: true },

                function(stream) {

                    video.src = window.URL.createObjectURL(stream);

                    localMediaStream = stream;

                    sizeCanvas();

                },

                function() {

                    alert('your browser does not support webkitGetUserMedia');

                }

            );

        }

    </script>



</body>

</html>

...全文

4190 32 打赏收藏举报

写回复

32 条回复

切换为时间正序

当前发帖距今超过3年，不再开放新的回复

发表回复

闭包客 2016-09-23

不用插件不可能有这样的权限。

打赏
举报

回复赞

她微笑的脸_ 2016-09-23

webcam ,可以调用摄像头，和拍照

打赏
举报

回复赞

跳动de指尖 2016-09-12

flash可以调起摄像头，或者使用ActiveX；但是，都不是推荐的做法，而且一般使用不到。在移动端的网站中，一般使用<input type="file" /> ，一般浏览器会有拍照的选项的。

打赏
举报

回复赞

小大飞 2016-09-12

我顶！ html5文档上有吗？

打赏
举报

回复赞

我在地球 2016-09-06

比较成熟的方案是flash调用。但是接下来，chrome 浏览器不再支持 flash

打赏
举报

回复赞

tz1992 2016-09-06

楼主，云盘内容怎么删除了

打赏
举报

回复赞

tz1992 2016-09-06

楼主，帖子怎么删除了

打赏
举报

回复赞

baidu_31302759 2016-09-06

我觉得并不需要flash 因为html5 应该就具备此功能

打赏
举报

回复赞

kangliyang031440411 2016-05-28

我用火狐也跑不起来

打赏
举报

回复赞

dzwebs 2016-05-26

实话告诉你吧，我也是研究了几天了，使用火狐浏览器就可以了嘛，

打赏
举报

回复赞

怎么才能成为coder大牛 2016-05-25

楼主成功了？说详细点呗

打赏
举报

回复赞

frontlook 2015-08-16

放到服务器上跑就可以运行，亲测

打赏
举报

回复赞

以专业开发人员为伍 2015-07-19

至少应该纠正一个容易被人用来忽悠的说法：你使用的那些写法不是什么 HTML5 标准 api（尽管多年以前制定的 html5 此类 api 的支持也并不能够很好保证），你使用的是 chrome 的方言，而且谷歌开发的东西的兼容性的名称极差，往往不能支持2、3年就变了（更别说像微软以前那样一般都能支持几十年都兼容了）。

打赏
举报

回复赞

以专业开发人员为伍 2015-07-19

chrome号称“不支持插件”，但是它自己弄了一大堆相当于插件的 api 在它自己的浏览器里边，这其实巨大的讽刺。你使用chrome浏览器专用的 javascript api，而且这些也只是在chrome某个版本中支持（甚至在最新版都不支持或者api定义不同了），这种东西就相当于现在还去硬要使用 ie6 才支持的某些 api。这种写法有多大意义？考虑到浏览器兼容性了吗？

打赏
举报

回复赞

weiyiding2008 2015-07-18

用于手机浏览器，调用手机摄像头。

打赏
举报

回复赞

xiaowanzi80hou 2015-05-06

不知道这个问题有没有结局，但是有一点你可以考虑下，需要部署到服务器上，我测试你这段代码，部署到服务器上就行

打赏
举报

回复赞

jxph040365 2014-07-02

引用 3 楼 Z65443344 的回复:

浏览器有操作摄像头的功能? 你确实不需要ActiveX组件?

使用HTML5

打赏
举报

回复赞

於黾 2014-07-02

浏览器就是浏览页面,顶多上传下载文件你要在浏览器里直接调系统硬件,需要插件. 比如使用网银

打赏
举报

回复赞

於黾 2014-07-02

浏览器有操作摄像头的功能? 你确实不需要ActiveX组件?

打赏
举报

回复赞

jxph040365 2014-07-02

有谁弄过，是不是要配置什么东西，我就是直接用浏览器打开的。 Chrome 和Opera浏览器都安装了还是不行。

打赏
举报

回复赞

加载更多回复（11）