js调用网络摄像头
不支持IE浏览器(需要使用flash插件), 支持移动端, 未经过完全测试
PC端使用的时候, HTML页面需要预留video标签, canvas标签
移动端使用的时候, HTML页面需要预留file标签, canvas标签, img标签
(function (window, document) {
window.camera = {
init: function (options) {
/**
* options 属性示例
* videoID: video控件ID
* canvasID: canvas控件ID
* fileID: type为file的input控件的ID
* imageID: img控件的ID
* videoEnable: 是否启用摄像头
* audioEnable: 是否启用麦克风
* videoWidth: 视频宽度
* videoHeight: 视频高度
* photoWidth: 拍照宽度
* photoHeight: 拍照高度
*/ _options = options;
if (isMobileTerminal()) {
initMobileTerminal();
} else {
initComputerTerminal();
}
},
photo: function () {
if (isMobileTerminal()) {
photoMobileTerminal();
} else {
photoComputerTerminal();
}
}
}; let _options = null; function initComputerTerminal() {
let videoDom = document.getElementById(_options.videoID);
if (!videoDom) {
alert('Video 控件无效');
return;
} let canvasDom = document.getElementById(_options.canvasID);
if (!canvasDom) {
alert('Canvas 控件无效');
return;
}
canvasDom.setAttribute('width', _options.photoWidth + 'px');
canvasDom.setAttribute('height', _options.photoHeight + 'px'); let parameters = {
video: _options.videoEnable ? {
width: _options.videoWidth,
height: _options.videoHeight
} : false,
audio: _options.audioEnable
}; navigator.mediaDevices.getUserMedia(parameters)
.then(function (MediaStream) {
video.srcObject = MediaStream;
video.play();
}).catch(function (reason) {
console.log(reason);
alert(reason);
});
} function photoComputerTerminal() {
let videoDom = document.getElementById(_options.videoID);
if (!videoDom) {
alert('Video 控件无效');
return;
} let canvasDom = document.getElementById(_options.canvasID);
if (!canvasDom) {
alert('Canvas 控件无效');
return;
} let context = canvasDom.getContext('2d');
context.drawImage(videoDom, 0, 0, _options.photoWidth, _options.photoHeight);
} function initMobileTerminal() {
let fileDom = document.getElementById(_options.fileID);
if (!fileDom) {
alert('File 控件无效');
return;
} fileDom.setAttribute('accept', 'image/*');
fileDom.setAttribute('capture', 'camera'); let canvasDom = document.getElementById(_options.canvasID);
if (!canvasDom) {
alert('Canvas 控件无效');
return;
} canvasDom.setAttribute('width', _options.photoWidth + 'px');
canvasDom.setAttribute('height', _options.photoHeight + 'px'); let imageDom = document.getElementById(_options.imageID);
if (!imageDom) {
alert('Image 控件无效');
return;
} fileDom.addEventListener('change', function () {
let file = fileDom.files[0];
let reader = new FileReader();
reader.onloadend = function () {
imageDom.setAttribute('src', reader.result); setTimeout(function () {
let context = canvas.getContext("2d");
context.drawImage(imageDom, 0, 0, _options.photoWidth, _options.photoHeight);
}, 300);
};
reader.readAsDataURL(file);
});
} function photoMobileTerminal() {
let fileDom = document.getElementById(_options.fileID);
fileDom.click();
} function isMobileTerminal() {
if (/AppleWebKit.*Mobile/i.test(navigator.userAgent) || /Mobile/.test(navigator.userAgent) || /MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))
return /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent);
return false;
}
})(window, document);
js调用网络摄像头的更多相关文章
- js 调用手机摄像头或相册并展示图片
效果图 手机浏览器.微信打开该网页,都支持调用摄像头拍照和打开相册. 先看最终结果: 每次点击“点击上传”,可以选择相册或者拍照,选完以后可以多展示一张图片,同时上传服务器. 点击“重新上传”,清空所 ...
- HTML调用PC摄像头【申明:来源于网络】
HTML调用PC摄像头[申明:来源于网络] ---- 地址:http://www.oschina.net/code/snippet_2440934_55195 <!DOCTYPE html> ...
- 【译】如何使用Vue捕获网络摄像头视频
几个月前,我一直关注着比特币的爆发并且在GDAX网站上注册账号.在注册验证的过程中,网站提示要通过计算机的网络摄像头提交我自己的一张照片作为照片ID.这是一个很酷的做法,让我思考一个问题:在网络浏览器 ...
- 使用HTML5+调用手机摄像头和相册
前言:前端时间使用HTML5做了一个WEB端APP,其中用到了H5页面调用手机摄像头的功能,当时也是花了不少时间去研究.最终是采用了HTML5plus(HTML5+)的方式完成了该功能,现将具体方法简 ...
- Android IOS WebRTC 音视频开发总结(八十五)-- 使用WebRTC广播网络摄像头视频(下)
本文主要介绍WebRTC (我们翻译和整理的,译者:weizhenwei,校验:blacker),最早发表在[编风网] 支持原创,转载必须注明出处,欢迎关注我的微信公众号blacker(微信ID:bl ...
- [转]JS调用Android里面的方法,Android调用JS里面的方法
FROM : http://blog.csdn.net/hj563308597/article/details/45197709 Android WebView 在公司Android的开发过程中遇到一 ...
- html5调用手机摄像头,实现拍照上传功能
今天做手机网站,想实现手机扫描二维码功能.首先实现在浏览器中调用手机摄像头,实现拍照功能并且把拍下的照片显示在页面并上传到服务器上,然后再在服务器端进行分析. 首先实现在浏览器中调用摄像头,当然用现在 ...
- TVideoGrabber如何将网络摄像头影像实时发布到网络
在TVideoGrabber中如何将网络摄像头影像实时发布到网络?如何设置正在运行TVideoGrabber的一台电脑,同时通过另一台电脑在网络中实时的观看在线视频呢? 在这里称发送视频流的电脑为“m ...
- H5混合开发二维码扫描以及调用本地摄像头
今天主管给了我个需求,说要用混合开发,用H5调用本地摄像头进行扫描二维码,我之前有做过原生安卓的二维码扫一扫,主要是通过调用zxing插件进行操作的,其中还弄了个闪光灯.但是纯H5的没接触过,心里没底 ...
随机推荐
- 由malloc和new引发的段错误
class Queue{ private: struct node{ string data; struct node * next,*priv; } private: struct node * p ...
- Spire.Cloud 在线编辑
简介 Spire.Cloud在线编辑器是一款基于网页的 Office 文件编辑工具,支持在网页中打开.编辑.打印 Word.Excel.PPT 文件,支持将文档保存到私有云盘.支持 IE.Chrome ...
- EFCore的外键级联删除导致的【可能会导致循环或多重级联路径】
之前也是经常遇到这个问题,但好在每次创建的实体不多,很容易就能找到是哪个外键导致级联循环删除问题 之前都是这么处理,因为创建的实体也不多,所以还处理得来 但最近跟别人合作写后端,别人写了好多实体,我一 ...
- Android BGradualProgress 多种渐变、直角or弧角、进度条、加载条
可实现多种渐变.直角or弧角.进度条.加载条 (Various gradient, right or arc angle, progress bar and loading bar can be re ...
- oracle数据库解决system表空间已爆满的问题
有时会发现数据库system表空间增长很快,使用以下语句查看system表空间使用量.也可以使用toad直接看. select b.tablespace_name "表空间", b ...
- django补充CBV和FBV模式
django补充CBV和FBV模式FBV模式---函数:经常用的方式CBV模式---类CBV中url连接时函数名后面要接.as_view()class index(views.View): @... ...
- hadoop集群搭建教程
1. 相关软件准备: VMware-workstation-full-15.0.4-12990004.exe CentOS-7-x86_64-DVD-1810.iso jdk-8u231-linux- ...
- 面试连环炮系列(十):一个线程调用两次start会怎么样
一个线程调用两次start会怎么样 Java的线程是不允许启动两次的,第二次调用必然会抛出IllegalThreadStateException,这是一种运行时异常. 谈谈线程的生命周期和状态转移 新 ...
- 【STM32-V6】STM32F429BIT6开发板开源, 丰富软件资源, 强劲硬件配置, 配套400多实例, 9套手册持续更新中2019-12-12
淘宝购买地址:淘宝购买链接 次.当前标准库最新版本V2.3,HAL库最新版本V1.1 安富莱微信公共平台,欢迎大家关注(打造高质量公众号) 新版用户手册,重在BSP驱动包设计方法,HAL库的框架学习, ...
- 本地的个人web网站上线的全过程,供大家参考(PHP,简易的LAMP环境搭建)
一 : 你需要准备的东西 1.本地能访问的网站,最好是改过host文件和apache的httpd-vhosts.conf,配置过本地域名的那种(减少传到线上出现的问题,文件路径不对呀啥的) 2.一个云 ...