<!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. 《梦断代码Dreaming In Code》阅读计划

    书籍是人类宝贵的精神财富,读书是人们重要的学习方式,是人生奋斗的航灯,是文化传承的通道,是人类进步的阶梯.学生作为学习人群的主体,必须把读书作为头等大事.学校就是一个学生在教师指导下自主读书的空间,而 ...

  2. object-oriented 第二次作业（2）

    面向对象程序设计自学计划 由于我的英文实在是很差,所以我就没有去考虑看英文的课程视频.网络上的课程有很多,什么学校的也有,一开始我不知道该如何开始选择课程.感觉每个都还可以.后来在群里的看到别人推荐的 ...

  3. Alpha 冲刺3

    队名:日不落战队 安琪(队长) 今天完成的任务 组织第三次站立式会议. 完成了个人信息前端界面. 明天的计划 草稿箱前端界面. 个人信息扩展界面框架. 还剩下的任务 回收站前端界面. 信息修改前端界面 ...

  4. YaoLingJump开发者日志（五）V1.0版本完成

    跳跃吧瑶玲下载连接 官网下载 百度网盘下载 提取码:apx9 介绍   总算完成V1.0版本了,下面来简单地介绍一下吧!   打开游戏,最开始会进入到"主界面".   右上角的按钮 ...

  5. 【Linux】- CentOS查看IP

    1.查询命令: ip addr 显示如图: 可以看到ens33没有inet这个属性,那么就没办法通过IP远程连接. 2.设置配置文件: vi /etc/sysconfig/network-script ...

  6. 【Linux】- ps 命令

    Linux ps命令用于显示当前进程 (process) 的状态. 语法 ps [options] [--help] 参数: -A     列出所有的行程 -w    显示加宽可以显示较多的资讯 -a ...

  7. Swoole和Swoft的那些事 (Http/Rpc服务篇)

    https://www.jianshu.com/p/4c0f625d5e11 Swoft在PHPer圈中是一个门槛较高的Web框架,不仅仅由于框架本身带来了很多新概念和前沿的设计,还在于Swoft是一 ...

  8. Java内存分配及垃圾回收机制

    Java内存区域 1.内存区域 jvm运行时数据区域 程序计数器 Java虚拟机栈 本地方法栈 方法区 Java堆 大图 2.概念解释 程序计数器   线程私有的一块很小的内存空间,它是当前线程所执行 ...

  9. DBGrid相关技术整理

    DBGrid相关技术整理: 注:对于DBGrid相关属性.方法的学习融入到技术整理过程中 一,多选 设置属性: Options->dgMultiSelect = True; ->dgRow ...

  10. 在Ubuntu系统下编译arcsim仿真器

    首先,用tar zxvf arcsim-0.2.1.tar.gz 将软件包解压 然后,打开里面的INSTALL文件,按照里面的步骤一步一步安装库.Ubuntu13.04下 1.BLAS sudo ap ...