<!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. SpringMVC之ajax与表单 Post 数据提交差异小结

    最近在写一个富文本框的后台数据服务的时候遇到一些关于 ajax 提交与 表单提交的比较特殊的案例,这里拿来跟大家分享,希望能让大家有所启发. 1. 首先是常见表单提交在SpringMVC的控制器中的代 ...

  2. busybox中memdev的使用方法

    busybox中已经集成了devmem工具,你可以配置busybox即可. 在busybox的杂项中找到: CONFIG_USER_BUSYBOX_DEVMEM: devmem is a small ...

  3. pre-fork 分叉 软分叉 硬分叉 前叉实现 pre-fork implementation

    https://mp.weixin.qq.com/s/wIDTs2J1ZkLkAEHqQnkYnw 什么是分叉?为何对区块链发展至关重要? Uselink公有链 Uselink公有链 2018-12- ...

  4. cnpm与npm指定有什么区别？

    CNPM跟NPM用法完全一致,只是在执行命令时将故宫改为CNPM. 因为故宫安装插件是从国外服务器下载,受网络影响大,可能出现异常,如果故宫的服务器在中国就好了,所以我们乐于分享的淘宝团队干了这事来自 ...

  5. onNewIntent

    当Activity不是Standard模式,并且被复用的时候,会触发onNewIntent(Intent intent) 这个方法,一般用来获取新的Intent传递的数据 我们一般会把MainAcit ...

  6. 002-多线程-JUC集合-List-CopyOnWriteArrayList

    一.概述 CopyOnWriteArrayList是Java并发包中提供的一个并发容器,它是个线程安全且读操作无锁的ArrayList,写操作则通过创建底层数组的新副本来实现,是一种读写分离的并发策略 ...

  7. shared pointer

    #include <string>#include <fstream>#include <memory>#include <cstdio> class ...

  8. 一百三十五：CMS系统之UEditoe编辑器集成以及配置将图片上传到七牛

    富文本编辑框,选择UEditor 下载地址:http://ueditor.baidu.com/website/download.html 使用说明:http://fex.baidu.com/uedit ...

  9. java调用js脚本

    有些情况下,需要java去调用js,groovy等脚本语言,传入参数获取脚本运行的结果. js脚本例子: function add(a,b){ return a + b + number; } jav ...

  10. 二进制安装k8s-单个master节点、两个node--修改版--有个错误：好多地方确少APISERVER

    centos7.4安装k8s-.11版本,二进制 安装 配置系统相关参数 如下操作在所有节点操作 # 临时禁用selinux # 永久关闭 修改/etc/sysconfig/selinux文件设置 s ...