<!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. c#，mysql，读取乱码问题

    1.首先保证数据库的表是UTF8类型:数据库是否是utf8无关紧要: 2.c#连接数据库语句添加“charset=utf8”一句:.exe.config是否添加这一句也无关紧要: 3.访问数据库数据用 ...

  2. PhotoShop基础工具 -- 移动工具

    还是学点美工的东西吧, 业余爱好   比学编程还难 PS版本 : PhotoShop CS6 1. 移动工具 (1) 工具栏和属性栏 工具栏 和 属性栏 : 左侧的是工具栏, 每选中一个工具, 在菜单 ...

  3. 福大软工1816：Alpha（9/10）

    Alpha 冲刺 (9/10) 队名:第三视角 组长博客链接 本次作业链接 团队部分 团队燃尽图 工作情况汇报 张扬(组长) 过去两天完成了哪些任务: 文字/口头描述: 1.完善通过父子进程调用wxp ...

  4. ACM 第十九天

    积性函数 积性函数线性筛,筛素数,u(n),欧拉函数: vis[]=vis[]=,mu[]=,phi[]=; ;i<=N;++i){ ,phi[i]=i-,prime[++cnt]=i; ,k= ...

  5. ejabberd学习1

    ejabberd是XMPP协议的一个实现,对大家的另一个意义就是,可以通过ejabberd来学习erlang. 1.从源码安装ejabberd. 可以参考ejabberd 简明配置.这个博文包括了安装 ...

  6. 3ds Max学习日记（五）

      把实验室要用的小工具做了出来后,忙里偷闲,把第四章没看完的视频看完了.修改器(modifier)什么的还是挺好玩的.   FFD,车削,倒角,倒角剖面,对称,挤出,晶格,扭曲,融化,弯曲,网格平滑 ...

  7. MyBatis原理系列

    原理分析之一:从JDBC到Mybatis 原理分析之二:框架整体设计 原理分析之三:初始化(配置文件读取和解析) 原理分析之四:一次SQL查询的源码分析

  8. BZOJ 2303 方格染色(带权并查集)

    要使得每个2*2的矩形有奇数个红色,如果我们把红色记为1,蓝色记为0,那么我们得到了这2*2的矩形里的数字异或和为1. 对于每个方格则有a(i,j)^a(i-1,j)^a(i,j-1)^a(i-1,j ...

  9. CodeChef LEMOVIE

    题意:给你n个数字(下标不同数值相同的数字应当被认为是不同的数字),有n!种排列方式.每种排列方式的价值定义为:第一次出现时比前面的所有数字都大的数值个数. 比如1,2,2,3这个排列中,1,2,3这 ...

  10. 【刷题】洛谷 P3809 【模板】后缀排序

    题目背景 这是一道模板题. 题目描述 读入一个长度为 \(n\) 的由大小写英文字母或数字组成的字符串,请把这个字符串的所有非空后缀按字典序从小到大排序,然后按顺序输出后缀的第一个字符在原串中的位置. ...