<!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. Python学习之路2 - 列表和元组

    列表 概念:Python内置的一种数据类型是列表:list.list是一种有序的集合,可以随时添加和删除其中的元素. 列表的使用 names = ['zhangsan','lisi','wangwu' ...

  2. Android 网络编程 API笔记 - java.net 包相关 接口 api

    Android 网络编程相关的包 : 9 包, 20 接口, 103 类, 6 枚举, 14异常; -- Java包 : java.net 包 (6接口, 34类, 2枚举, 12异常); -- An ...

  3. 向redis插入数据时，返回值问题

    向redis插入数据时,如果redis没有要插入的key,插入成功之后返回值为1 如果redis有这个key,插入成功之后返回值是0

  4. 《学习OpenCV》课后习题解答6

    题目:(P104) 使用cvCmp()创建一个掩码.加载一个真实的图像.使用cvsplit()将图像分割成红,绿,蓝三个单通道图像. a.找到并显示绿图. b.克隆这个绿图两次(分别命名为clone1 ...

  5. 【Linux】- CentOS搭建FTP服务器

    1.安装vsftpd yum install -y vsftpd 2.启动vsftpd服务 service vsftpd start 3.查看运行状态 netstat -nltp | 完毕!!! 参考 ...

  6. JAVA学习之HashCode

    public native int hashCode(); 返回该对象的哈希码值.支持此方法是为了提高哈希表(例如 java.util.Hashtable 提供的哈希表)的性能. 一.HashCode ...

  7. 【Python】Python中的引用和赋值

    本文转自:http://my.oschina.net/leejun2005/blog/145911 在 python 中赋值语句总是建立对象的引用值,而不是复制对象.因此,python 变量更像是指针 ...

  8. 【Python】安装python包时遇到"error: Microsoft Visual C++ 9.0 is required"的简答

    简答 在Windows下用pip安装Scrapy报如下错误, error: Microsoft Visual C++ 9.0 is required (Unable to find vcvarsall ...

  9. BZOJ4310 跳蚤（后缀数组+二分答案）

    注意到答案一定是原串的子串,于是考虑造出SA,二分答案是第几小的子串.第k小子串很容易在SA上求出.之后计算使他成为最大子串至少要在几个位置切割,对每个字典序比答案大的后缀,找到所有合法切割位置(求l ...

  10. Codeforces Round #510 Div. 2 Virtual Participate记

    这场打的顺手到不敢相信.如果不是vp的话估计肯定打不到这个成绩. A:最大显然,最小的话每次暴力给最小的+1. #include<iostream> #include<cstdio& ...