js摄像头
<!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摄像头的更多相关文章
- vlc+flv.js 摄像头 H5 直播
背景 业务需求:用最短的时间搞定摄像头直播到Web页面.因为没有过这方面经验,所以走了很多弯路,其实也不算弯路吧,大部分时间花在学习基础概念,寻找快速方案中.惯性思维想当然的以为找组件,配地址就能搞定 ...
- cesium and three.js【转】
https://blog.csdn.net/zhishiqu/article/details/79077883 这是威尔逊Muktar关于整合Three.js与铯的客人帖子.Three.js是一个轻量 ...
- 基于HTML5实现的超酷摄像头（HTML5 webcam）拍照功能 - photobooth.js
在线演示 WebRTC可能是明年最受关注的HTML5标准了,Mozilla为此开发了一套帮助你控制硬件的API,例如,摄像头,麦克风,或者是加速表.你可以不依赖其它的插件来调用你需要的本机硬件设备. ...
- JS打开摄像头并截图上传
直入正题,JS打开摄像头并截图上传至后端的一个完整步骤 1. 打开摄像头主要用到getUserMedia方法,然后将获取到的媒体流置入video标签 2. 截取图片主要用到canvas绘图,使用dra ...
- js vue 在页面中将摄像头放在一个标签里展示，(模仿手机拍照功能)
1.HTML <video id="video" autoplay class="fileImg"></video> <canva ...
- JS调用摄像头并上传图片到服务器
本功能只能把图片转成base64码上传,如何上传图片还没有修改出来,有兴趣的朋友弄出来了,请给我留下言,谢谢了! 直接上代码,需要的朋友直接复制就可以使用了. <!DOCTYPE html> ...
- 使用JS调用手机本地摄像头或者相册图片识别二维码/条形码
接着昨天的需求,不过这次不依赖微信,使用纯js唤醒手机本地摄像头或者选择手机相册图片,识别其中的二维码或者是条形码.昨天,我使用微信扫一扫识别,效果超棒的.不过如果依赖微信的话,又怎么实现呢,这里介绍 ...
- js如何调用电脑的摄像头
闲来无事,用js写了一个调用摄像头的demo,并用canvas显示保存.这个功能很实用,比如上传用户的头像,即时拍照及时上传. Html: <video width="200px&qu ...
- js 调用手机摄像头或相册并展示图片
效果图 手机浏览器.微信打开该网页,都支持调用摄像头拍照和打开相册. 先看最终结果: 每次点击“点击上传”,可以选择相册或者拍照,选完以后可以多展示一张图片,同时上传服务器. 点击“重新上传”,清空所 ...
随机推荐
- 通过蓝牙共享网络设置Charles抓包
在办公室连接WiFi时,电脑和移动设备分配到的IP地址不在同一网段, 但是Android系统提供了一个非常方便的功能,可以搭建一个网络使得这两台设备处于同一网段,实现无障碍访问,使用Charles抓包 ...
- ubantu 安装boost库 c++connector
安装libmysqlcppconn: sudo apt-get install libmysqlcppconn-dev 安装libboost: sudo apt-get install libboos ...
- Nginx 出现 403 Forbidden 最终解决方法
Nginx 出现 403 Forbidden 最终解决 步骤一: 检查目录权限.权限不足的就加个权限吧. 例子:chmod -R 755 / var/www 步骤二: 打开nginx.conf 例子: ...
- Mac 平台安装MySQL
Mac 平台安装MySQL 一.下载MySQL MySQL官网上https://dev.mysql.com/downloads/mysql/,下载Community Server版 出现如下界面, ...
- 使用极路由进行外网映射，本地电脑做服务器，运行javaWeb项目
最近在学习javaWeb,一个项目需要android访问服务器,于是使用自己的笔记本电脑作为服务器,需要进行端口映射.使得外网可以访问自己的javaWeb项目或者网站之类的.普通路由请看:http:/ ...
- 实用的在线预览数据字典的工具（php编写）
前言 无论是刚接手新项目,或者是维护老项目,有一个方便的数据字典可用是最棒哒! 本文是我为了方便使用数据字典而写的代码. 代码无版权,随便使用. 拷贝代码后,只需修改数据库名,主机,用户名,密码,开箱 ...
- 21 Flutter仿京东商城项目 商品详情 请求接口渲染数据 商品属性数据渲染
加群452892873 下载对应21可文件,运行方法,建好项目,直接替换lib目录,在往pubspec.yaml添加上一下扩展. cupertino_icons: ^0.1.2 flutter ...
- Oracle查询显示CLOB的内容
select dbms_lob.substr(note) from table
- Nonce
Nonce是或Number once的缩写,在密码学中Nonce是一个只被使用一次的任意或非重复的随机数值. 在加密技术中的初始向量和加密散列函数都发挥着重要作用,在各类验证协议的通信应用中确保验证信 ...
- linux ssh利用公钥免密登陆
1.安装检查ssh 如果没有ssh的话,需要安装 #yum install -y openssh-server openssh-clients 2.生成秘钥 ssh-keygen -t rsa 执行 ...