<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

</head>

<body>

    <video id="video" width="640" height="480" autoplay></video>

    <button id="snap">Snap Photo</button>

    <canvas id="canvas" width="640" height="480"></canvas>

    <h2>按钮模拟拍照</h2>

</body>

<script type="text/javascript">

    var aVideo = document.getElementById('video');

    var aCanvas = document.getElementById('canvas');

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

    navigator.getUserMedia = navigator.getUserMedia ||

        navigator.webkitGetUserMedia ||

        navigator.mozGetUserMedia ||

        navigator.msGetUserMedia; //获取媒体对象（这里指摄像头）

    navigator.getUserMedia({

        video: true

    }, gotStream, noStream); //参数1获取用户打开权限；参数二成功打开后调用，并传一个视频流对象，参数三打开失败后调用，传错误信息

    function gotStream(stream) {

        video.src = URL.createObjectURL(stream);

        video.onerror = function() {

            stream.stop();

        };

        stream.onended = noStream;

        video.onloadedmetadata = function() {

            alert('摄像头成功打开！');

        };

    }

    function noStream(err) {

        alert(err);

    }

    document.getElementById("snap").addEventListener("click", function() {

        ctx.drawImage(aVideo, 0, 0, 640, 480); //将获取视频绘制在画布上

    });

</script>

</html>

　　

js获取摄像头视频流的更多相关文章

  1. C# 基于Directshow.Net lib库 USB摄像头使用DirectShow.NET获取摄像头视频流

    https://blog.csdn.net/u010118312/article/details/91766787 https://download.csdn.net/download/u010118 ...

  2. [OpenCV]获取摄像头视频

    环境:Windows 8 64bit + VS2012 X64 + OpenCV 2.4.7 摄像头的捕捉使用VideoCapture类 Class VideoCapture    [OpenCV文档 ...

  3. JS调用摄像头并上传图片到服务器

    本功能只能把图片转成base64码上传,如何上传图片还没有修改出来,有兴趣的朋友弄出来了,请给我留下言,谢谢了! 直接上代码,需要的朋友直接复制就可以使用了. <!DOCTYPE html> ...

  4. iOS UIWebView中javascript与Objective-C交互、获取摄像头

    UIWebView是iOS开发中常用的一个视图控件,多数情况下,它被用来显示HTML格式的内容. 支持的文档格式 除了HTML以外,UIWebView还支持iWork, Office等文档格式: Ex ...

  5. Opencv+MFC获取摄像头数据，显示在Picture控件

    分为两步:OpenCV获取摄像头数据+图像在Picture上显示 第一步:OpenCV获取摄像头数据 参考:http://www.cnblogs.com/epirus/archive/2012/06/ ...

  6. JS打开摄像头并截图上传

    直入正题,JS打开摄像头并截图上传至后端的一个完整步骤 1. 打开摄像头主要用到getUserMedia方法,然后将获取到的媒体流置入video标签 2. 截取图片主要用到canvas绘图,使用dra ...

  7. js获取ip地址，操作系统，浏览器版本等信息，可兼容

    这次呢,说一下使用js获取用户电脑的ip信息,刚开始只是想获取用户ip,后来就顺带着获取了操作系统和浏览器信息. 先说下获取用户ip地址,包括像ipv4,ipv6,掩码等内容,但是大部分都要根据浏览器 ...

  8. iOS 获取摄像头当前方向

    在做二维码扫描和直播获取视频流的过程中,可能会用到 AVCaptureDevice AVCaptureVideoPreviewLayer AVCaptureSession 这几个参数,其中 1.定义显 ...

  9. 人脸检测及识别python实现系列（1）——配置、获取实时视频流

    人脸检测及识别python实现系列(1)——配置.获取实时视频流 1. 前言 今天用多半天的时间把QQ空间里的几篇年前的旧文搬到了这里,算是完成了博客搬家.QQ空间里还剩下一些记录自己数学学习路线的学 ...

随机推荐

  1. Java 集合框架之 Map

    Hashtable Hashtable 的实例有两个参数影响其性能:初始容量 和加载因子.容量 是哈希表中桶 的数量,初始容量就是哈希表创建时的容量.注意,哈希表的状态为 open:在发生“哈希冲突” ...

  2. Mysql 工作原理

    刚开始接触一个新的事物的时候,我觉得很有必要从其工作原理入手,弄清楚这个东西的来龙去脉,为接下来的继续深入学习做好铺垫,掌握好其原理有助于我们从整体上来把握这个东西,并且帮助我们在排错过程中理清思路. ...

  3. SVM之核函数

    SVM之问题形式化 SVM之对偶问题 >>>SVM之核函数 SVM之解决线性不可分 写在SVM之前——凸优化与对偶问题 上一篇SVM之对偶问题中讨论到,SVM最终形式化为以下优化问题 ...

  4. 菜鸟的飞翔日记-os篇

    一轮王道os复习感想 1概述 虽然去年有上操作系统这门必修课,考的成绩也算理想,本来还有点沾沾自喜,嗯,觉得自己学的还不错,知道有一天我拿起了王道,(没给王道打广告)看王道的原因完全在于为考研做准备, ...

  5. zabbix概念

    Zabbix是一个企业级的.开源的.分布式监控解决方案. Zabbix可以监控网络和服务的监控状况. Zabbix利用灵活的告警机制,允许用户对事件发送基于Email的告警. 这样可以保证快速的对问题 ...

  6. linux解压zip

    用 unzip 的先安装 yum install -y unzip #unzip file.zip -d /root  -d指解压路径 ,不写的话默认当前目录

  7. Atom IDE开发工具， ASCII艺术评论， ninimap 插件

    1 ASCII Art Comments One neat trick is to use ASCII art to create huge comments visible in the minim ...

  8. bzoj1143-祭祀

    题目 给出一个有向无环图,要在上面安放祭祀点.两个祭祀点必须不可达,求最多能安放多少个祭祀点. 分析 由于一条无法再延伸链上只能安放一个祭祀点,而我们要求的是最多能安放祭祀点的个数,所以要求的就是最长 ...

  9. 【bzoj5110】[CodePlus2017]Yazid 的新生舞会 Treap

    题目描述 求一个序列所有的子区间,满足区间众数的出现次数大于区间长度的一半. 输入 第一行2个用空格隔开的非负整数n,type,表示序列的长度和数据类型.数据类型的作用将在子任务中说明. 第二行n个用 ...

  10. 【bzoj2653】middle 可持久化线段树区间合并

    题目描述 一个长度为n的序列a,设其排过序之后为b,其中位数定义为b[n/2],其中a,b从0开始标号,除法取下整.给你一个长度为n的序列s.回答Q个这样的询问:s的左端点在[a,b]之间,右端点在[ ...