<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>Document</title>  
<style>  
video {  
    border: 1px solid #ccc;  
    display: block;  
    margin: 0 0 20px 0;  
    float:left;  
}  
#canvas {  
    margin-top: 20px;  
    border: 1px solid #ccc;  
    display: block;  
}  
</style>  
</head>  
<body>  
    <video id="video" width="500" height="400" autoplay></video>  
    <canvas id="canvas" width="500" height="400"></canvas>  
    <button id="snap">拍照</button>  
    <script type="text/javascript">  
        var context = canvas.getContext("2d");  
        //当DOM树构建完成的时候就会执行DOMContentLoaded事件  
        window.addEventListener("DOMContentLoaded", function() {  
            //获得Canvas对象  
            var canvas = document.getElementById("canvas");  
            //获得video摄像头区域  
            var video = document.getElementById("video");  
            var videoObj = {  
                "video" : true  
            };  
            var errBack = function(error) {  
                console.log("Video capture error: ", error.code);  
            };  
            //获得摄像头并显示到video区域  
            if (navigator.getUserMedia) { // Standard  
                navigator.getUserMedia(videoObj, function(stream) {  
                    video.src = stream;  
                    video.play();  
                }, errBack);  
            } else if (navigator.webkitGetUserMedia) { // WebKit-prefixed  
                navigator.webkitGetUserMedia(videoObj, function(stream) {  
                    video.src = window.webkitURL.createObjectURL(stream);  
                    video.play();  
                }, errBack);  
            } else if (navigator.mozGetUserMedia) { // Firefox-prefixed  
                navigator.mozGetUserMedia(videoObj, function(stream) {  
                    video.src = window.URL.createObjectURL(stream);  
                    video.play();  
                }, errBack);  
            }  
        }, false);  
        // 触发拍照动作  
        document.getElementById("snap").addEventListener("click", function() {  
            context.drawImage(video, 0, 0, 640, 480);  
        });  
    </script>  
</body>  
</html>   

Html5调用电脑摄像头-----火狐浏览器、360浏览器、搜狗浏览器、谷歌浏览器的更多相关文章

  1. HTML5调用手机摄像头,仅仅支持OPPOHD浏览器

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 搜狗浏览器总是打开123.sogou.com-记搜狗浏览器遭遇劫持一例

    昨日,因从网上下载了office2010破解工具,压缩包中有个文件为名为[office 2010激活工具\为保证永久激活,要先点击这个配置,再点击KMSELDIYI激活.exe],单击之后没有反应.后 ...

  3. chrome和搜狗浏览器的js问题

    1.在chrome中如果是js添加颜色必须用"#00CC00",必须加#号...不然会出问题,但是在搜狗浏览器中可以没有#号也能正确识别...

  4. localStorage和sessionStorage火狐浏览器和其他高级浏览器的区别

    例子: <script>window.onload=function(){ var oSetData = document.getElementById('setData'); var o ...

  5. win7系统IE浏览器主页被搜狗篡改问题的解决方法

    IE浏览器使用一段时间后可能大家就会遇到主页被篡改的问题,篡改之后主页就变成了搜狗页面,我们常用的百度搜索也变成了搜狗搜索,这不仅使得我们操作起 来不习惯,使用起来也会感觉非常别扭.那如果在使用IE浏 ...

  6. 搜狗浏览器特性页面JS

    http://ie.sogou.com/features4.2.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN ...

  7. 用meta name="renderer" content="webkit|ie-comp|ie-stand"来切换360双核安全浏览器的极速模式和兼容模式

    以下信息摘自360官方网站: 浏览模式:极速模式.兼容模式及IE9高速模式是360浏览器显示网页时使用的三种模式:极速模式表示极速模式兼容模式表示兼容模式IE9IE10模式表示IE9/IE10模式(仅 ...

  8. QQ浏览器、搜狗浏览器等兼容模式下，Asp.NetCore下，Cookie、Session失效问题

    原文:QQ浏览器.搜狗浏览器等兼容模式下,Asp.NetCore下,Cookie.Session失效问题 这些狗日的浏览器在兼容模式下,保存Cookie会失败,是因为SameSiteMode默认为La ...

  9. JS事件 卸载事件 当用户退出页面时（页面关闭、页面刷新等），触发onUnload事件，同时执行被调用的程序。注意：不同浏览器对onunload事件支持不同。

    卸载事件(onunload) 当用户退出页面时(页面关闭.页面刷新等),触发onUnload事件,同时执行被调用的程序. 注意:不同浏览器对onunload事件支持不同. 如下代码,当退出页面时,弹出 ...

随机推荐

  1. [学习笔记] 模拟退火 (Simulated Annealing)

    真没想到这东西真的在考场上用到了...顺便水篇blog以示诈尸好了(逃 模拟退火算法 模拟退火是一种随机化算法, 用于求函数的极值qwq 比如给出一个问题, 我们要求最优解的值, 但是可能的方案数量极 ...

  2. Java日志框架：logback详解

    为什么使用logback 记得前几年工作的时候,公司使用的日志框架还是log4j,大约从16年中到现在,不管是我参与的别人已经搭建好的项目还是我自己主导的项目,日志框架基本都换成了logback,总结 ...

  3. tomcat超时、内存不足

    1.Tomcat 启动超过45s启动失败,报超时错误 可以Eclipse 下Tomcat中扩大tomcat启动时间,默认为45 ,修改为245 2 . tomcat启动内存不足 Run - Run C ...

  4. 福州大学软件1715|W班-助教卞倩虹个人简介

    各位好,我是卞倩虹 本科阶段的专业是网络工程,通过学校的学习我掌握了基础的网络组网配置技术,常常在机房配置路由器和交换机等相关设备.后来我接触了软件编程,在深入了解和学习后编程语言后,自主开发了一些项 ...

  5. 《团队-OldNote-项目总结》

    我们小组做的是手机便签的app---OldNote 最开始我们想解决普通手机便签无法进行语音和照片的备忘这一问题,但是由于没有做过拍照和录音的经验怕由于技术原因无法达成目的,就没敢写在需求分析中.当完 ...

  6. 实验MyOD

    实验MyOD 编写MyOD.java 用java MyOD XXX实现Linux下od -tx -tc XXX的功能 提交测试代码和运行结果截图,加上学号水印,提交码云代码链接. 代码如下: (刚开始 ...

  7. JVM启动参数

    JVM参数的含义 实例见实例分析 参数名称 含义 默认值   -Xms 初始堆大小 物理内存的1/64(<1GB) 默认(MinHeapFreeRatio参数可以调整)空余堆内存小于40%时,J ...

  8. 使用 PHP 来做 Vue.js 的 SSR 服务端渲染

    对于客户端应用来说,服务端渲染是一个热门话题.然而不幸的是,这并不是一件容易的事,尤其是对于不用 Node.js 环境开发的人来说. 我发布了两个库让 PHP 从服务端渲染成为可能.spatie/se ...

  9. 原生ajax的请求函数

    ajax:一种请求数据的方式,不需要刷新整个页面:ajax的技术核心是 XMLHttpRequest 对象:ajax 请求过程:创建 XMLHttpRequest 对象.连接服务器.发送请求.接收响应 ...

  10. V7000数据恢复（存储文件系统损坏）案例_北亚数据恢复

    我们今天介绍的数据恢复案例是一起 v7000存储文件系统损坏导致的数据丢失,首先简单介绍一下设备基本情况:发生文件系统损坏的是一台挂载在Windows2003服务器上的v7000存储,划分了一个容量为 ...