<!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# dllimport

    DllImport会按照顺序自动去寻找的地方:1.exe所在目录 2.System32目录 3.环境变量目录.所以只需要你把引用的DLL 拷贝到这三个目录下 就可以不用写路径了 或者可以这样serve ...

  2. TCP系列32—窗口管理&流控—6、TCP zero windows和persist timer

    一.简介 我们之前介绍过,TCP报文中的window size表示发出这个报文的一端准备多少bytes的数据,当TCP的一端一直接收数据,但是应用层没有及时读取的话,数据一直在TCP模块中缓存,最终受 ...

  3. SQL SERVER技术内幕之10 可编程对象

    一.变量 变量用于临时保存数据值,以供在声明它们的同一批处理语句中引用.例如,以下代码先声明一个数据类型为INT的变量@i,再将它赋值为10; DECLARE @i as INT; SET @i = ...

  4. Pandas速查手册中文版（转）

    关键缩写和包导入 在这个速查手册中,我们使用如下缩写: df:任意的Pandas DataFrame对象 同时我们需要做如下的引入: import pandas as pd 导入数据 pd.read_ ...

  5. Redis 学习之数据类型

    该文使用centos6.5 64位 redis-3.2.8 [root@localhost bin]# netstat -tunpl |grep 6379  查看redis 是否启动成功 一.Stri ...

  6. mysql,oracle,sql server中的默认事务隔离级别查看,更改

    未提交读(隔离事务的最低级别,只能保证不读取物理上损坏的数据) 已提交读(数据库引擎的默认级别) 可重复读 可序列化(隔离事务的最高级别,事务之间完全隔离) 可串行化比较严谨,级别高; MySQL m ...

  7. KMP算法字符串查找子串

    题目: 经典的KMP算法 分析: 和KMP算法对应的是BF算法,其中BF算法时间复杂度,最坏情况下可以达到O(n*m),而KMP算法的时间复杂度是O(n + m),所以,KMP算法效率高很多. 但是K ...

  8. 分布式消息队列RocketMQ&Kafka -- 消息的“顺序消费”

    在说到消息中间件的时候,我们通常都会谈到一个特性:消息的顺序消费问题.这个问题看起来很简单:Producer发送消息1, 2, 3... Consumer按1, 2, 3...顺序消费. 但实际情况却 ...

  9. Bootstrap 折叠(collapse) 初见

    以下代码来自bootstrap中文网 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta c ...

  10. 使用WebClient类对网页下载源码,对文件下载保存及异步下载并报告下载进度

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAx4AAAI7CAIAAADtTtpYAAAgAElEQVR4nO3dX6xlV33Y8f3UJFUqHq