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>

...全文

4276 32 打赏收藏转发到动态举报

写回复

用AI写文章

32 条回复

切换为时间正序

请发表友善的回复…

发表回复

闭包客 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。这种写法有多大意义？考虑到浏览器兼容性了吗？