<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>GetUserMedia实例</title>

</head>

<body>

        <!--

        理想情况下我们应该先判断你的设备上是否

        有摄像头或相机，但简单起见，我们在这里直接

        写出了HTML标记，而不是用JavaScript先判断

        然后动态生成这些标记

    -->

    <video id="video" width="640" height="480" style="border:solid 1px green" autoplay></video>

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

    <canvas id="canvas" width="640" height="480" style="border:solid 1px gray"></canvas>

</body>

<script type="text/javascript">

  // Put event listeners into place

window.addEventListener("DOMContentLoaded", function() {

    // Grab elements, create settings, etc.

    var canvas = document.getElementById("canvas"),

        context = canvas.getContext("2d"),

        video = document.getElementById("video"),

        videoObj = { "video": true },

        errBack = function(error) {

            console.log("Video capture error: ", error.code);

        };  

    // Put video listeners into place

    if(navigator.getUserMedia) { // Standard

        navigator.getUserMedia(videoObj, function(stream) {

            video.src = stream;

            video.play();

        }, errBack);

    } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed

        navigator.webkitGetUserMedia(videoObj, function(stream){

            video.src = window.webkitURL.createObjectURL(stream);

            video.play();

        }, errBack);

    }

    else if(navigator.mozGetUserMedia) { // Firefox-prefixed

        navigator.mozGetUserMedia(videoObj, function(stream){

            video.src = window.URL.createObjectURL(stream);

            video.play();

        }, errBack);

    }

       document.getElementById("snap")

       .addEventListener("click", function() {

    context.drawImage(video, 0, 0, 640, 480);

});

}, false);

</script>

<html>

js摄像头的更多相关文章

  1. vlc+flv.js 摄像头 H5 直播

    背景 业务需求:用最短的时间搞定摄像头直播到Web页面.因为没有过这方面经验,所以走了很多弯路,其实也不算弯路吧,大部分时间花在学习基础概念,寻找快速方案中.惯性思维想当然的以为找组件,配地址就能搞定 ...

  2. cesium and three.js【转】

    https://blog.csdn.net/zhishiqu/article/details/79077883 这是威尔逊Muktar关于整合Three.js与铯的客人帖子.Three.js是一个轻量 ...

  3. 基于HTML5实现的超酷摄像头（HTML5 webcam）拍照功能 - photobooth.js

    在线演示 WebRTC可能是明年最受关注的HTML5标准了,Mozilla为此开发了一套帮助你控制硬件的API,例如,摄像头,麦克风,或者是加速表.你可以不依赖其它的插件来调用你需要的本机硬件设备. ...

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

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

  5. js vue 在页面中将摄像头放在一个标签里展示，(模仿手机拍照功能)

    1.HTML <video id="video" autoplay class="fileImg"></video> <canva ...

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

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

  7. 使用JS调用手机本地摄像头或者相册图片识别二维码/条形码

    接着昨天的需求,不过这次不依赖微信,使用纯js唤醒手机本地摄像头或者选择手机相册图片,识别其中的二维码或者是条形码.昨天,我使用微信扫一扫识别,效果超棒的.不过如果依赖微信的话,又怎么实现呢,这里介绍 ...

  8. js如何调用电脑的摄像头

    闲来无事,用js写了一个调用摄像头的demo,并用canvas显示保存.这个功能很实用,比如上传用户的头像,即时拍照及时上传. Html: <video width="200px&qu ...

  9. js 调用手机摄像头或相册并展示图片

    效果图 手机浏览器.微信打开该网页,都支持调用摄像头拍照和打开相册. 先看最终结果: 每次点击“点击上传”,可以选择相册或者拍照,选完以后可以多展示一张图片,同时上传服务器. 点击“重新上传”,清空所 ...

随机推荐

  1. route按需加载的3种方式：vue异步组件、es提案的import()、webpack的require.ensure()

    1. vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载. 但是,这种情况下一个组件生成一个js文件.举例如下: { path: '/promisedemo' ...

  2. SQL-W3School-基础：SQL AND & OR 运算符

    ylbtech-SQL-W3School-基础:SQL AND & OR 运算符 1.返回顶部 1. AND 和 OR 运算符用于基于一个以上的条件对记录进行过滤. AND 和 OR 运算符 ...

  3. linux服务端导入oracle数据库.sql脚本

    一般情况下,后缀名为.sql或者为记事本类型的文本脚本可以通过打开后复制或者直接在客户端打开执行,但如果脚本比较大时(比如文件达到几百M以上), 普通文本工具和数据库客户端都无法打开,哪怕可以打开,也 ...

  4. ES6深入浅出-1 新版变量声明：let 和 const-1.视频 概述

    es7语法比较少,只占了一点点 ES 6 新特性一览:https://frankfang.github.io/es-6-tutorials/ 我用了两个月的时间才理解 let   https://zh ...

  5. scikit-learn机器学习(四)使用决策树做分类

    我们使用决策树来创建一个能屏蔽网页横幅广告的软件. 已知图片的数据判断它属于广告还是文章内容. 数据来自 http://archive.ics.uci.edu/ml/datasets/Internet ...

  6. Android学习笔记之View

    转载: 0.7562018.10.22 21:44:10字数 5,423阅读 189   导图 一.View事件体系 1.什么是 View 和 View的位置坐标 View是什么: View 是一种界 ...

  7. whereis which type find

    1. whereis  name whereis命令只能用于搜索程序名,而且只搜索二进制文件(参数-b).man说明文件(参数-m)和源代码文件(参数-s).如果省略参数,则返回所有信息. 2. wh ...

  8. 324rfwrtg5gft8oywtfbserkufgs

    324rfwrtg5gft8oywtfbserkufgs (tester.inf.nano)

  9. lnmp 命令 及其 TP5 部署遇到的一些问题

    1.添加站点域名命令: lnmp vhost add; 2.重置mysql密码: 第一种方法:用军哥的一键修改LNMP环境下MYSQL数据库密码脚本 一键脚本肯定是非常方便.具体执行以下命令: wge ...

  10. VMware Windows Server 2008 R2 X64 虚拟机安装教程

    首先进入VMware Workstation中,点击创建新的虚拟机 然后按如下步骤操作 然后进去选择拷贝的Windows 2008的映像文件 下面这个网址里面提供了各种映像文件的下载http://is ...