HTML中的camera标签,详解HTML5 使用video标签实现选择摄像头功能
详解HTML5 使用video标签实现选择摄像头功能
1. html
// jquery reference
//
//
Open WebCam
Snap Photo
2. javascript
Elements for taking the snapshot
var canvasPreview = document.getElementById('canvasPreview');
var canvasUpload = document.getElementById('canvasUpload');
var contextPreview = canvasPreview.getContext('2d');
var contextUpload = canvasUpload.getContext('2d');
//#################### Video Source #######################3
var videoElement = document.querySelector('video');
var videoSelect = document.querySelector('select#videoSource');
navigator.mediaDevices.enumerateDevices()
.then(gotDevices).then(getStream).catch(handleError);
videoSelect.onchange = getStream;
function gotDevices(deviceInfos) {
for (var i = 0; i < deviceInfos.length; ++i) {
var deviceInfo = deviceInfos[i];
var option = document.createElement('option');
option.value = deviceInfo.deviceId;
if (deviceInfo.kind === 'videoinput') {
option.text = deviceInfo.label ||
'camera ' +
(videoSelect.length + 1);
videoSelect.appendChild(option);
} else {
console.log('Found ome other kind of source/device: ', deviceInfo);
}
}
}
var _streamCopy = null;
function getStream() {
if (_streamCopy != null) {
try {
_streamCopy.stop(); // if this method doesn't exist, the catch will be executed.
} catch (e) {
_streamCopy.getVideoTracks()[0].stop(); // then stop the first video track of the stream
}
}
var constraints = {
audio:false,
video: {
optional: [
{
sourceId: videoSelect.value
}
]
}
};
navigator.mediaDevices.getUserMedia(constraints).then(gotStream).catch(handleError);
}
function gotStream(stream) {
_streamCopy = stream; // make stream available to console
videoElement.srcObject = stream;
}
function handleError(error) {
alert(error.name + ": " + error.message);
}
//######################## End Video Source #################
// Get access to the camera!
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
videoElement.src = window.URL.createObjectURL(stream);
videoElement.play();
});
} else {
document.getElementById("pnlVideo1").style.display = "none";
}
Trigger photo take
document.getElementById("snap").addEventListener("click",
function() {
contextPreview.drawImage(videoElement, 0, 0, 300, 224);
contextUpload.drawImage(videoElement, 0, 0, 300, 224);
document.getElementById("video").style.display = "none";
document.getElementById("snap").style.display = "none";
document.getElementById("canvasPreview").style.display = "block";
var image = document.getElementById("canvasUpload").toDataURL("image/jpeg");
image = image.replace('data:image/jpeg;base64,', '');
$("#imgValue").val(image);
alert("image value :" + image);
});
Trigger photo take
document.getElementById("btnOpen1").addEventListener("click",
function() {
document.getElementById("vdoOne").style.display = "block";
document.getElementById("video").style.display = "block";
document.getElementById("snap").style.display = "block";
document.getElementById("canvasPreview").style.display = "none";
});
如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
本条技术文章来源于互联网,如果无意侵犯您的权益请点击此处反馈版权投诉
本文系统来源:php中文网
HTML中的camera标签,详解HTML5 使用video标签实现选择摄像头功能相关推荐
- html5 摄像头 直播,详解HTML5 使用video标签实现选择摄像头功能
详解HTML5 使用video标签实现选择摄像头功能 1. html // jquery reference // // Open WebCam Snap Photo 2. javascript El ...
- html5应用测试方法,详解html5的video标签测试应用
1.video标签的使用 属性:src(要播放的音频文件路径).autoplay(是否自动播放).control(进度条).loop(循环播放).onended(是否播放完毕的是一个事件) 2.实现了 ...
- HTML5中Head内标签详解(一):meta标签
引言: 我发现自己最近有点走偏了,越来越多的将学习的精力放在编程上,而渐渐的忽略了HTML这个简单又不简单的标记语言上.相信大家应该也有这样的经历.觉得HTML这种东西很简单不需要花费太多精力就能使用 ...
- 详解html5新增的标签与css3中伪类和伪元素
html5 / css3 基础篇(第一篇) 回顾 是的,你没看错!今天是一个全新的开始,今天这一讲我们就要开始h5和c3了,html 和 css的基础篇我们都告一段落了.html一共两篇,css走过了 ...
- html5标签详解,HTML5中figcaption标签用法详解
HTML5中figure和figcaption标签一般都是配套使用的,先了解下两者的基本定义,然后结合实例来说明两者的用法. 标签规定独立的流内容(图像.图表.照片.代码等等). figure元素的内 ...
- html5中ol的意思,详解HTML5中ol标签的用法
定义和用法 标签定义有序列表. HTML 4.01 与 HTML 5 之间的差异 在 HTML 4.01 中,不赞成使用 "start" 属性,在 HTML 5 中是允许的. 在 ...
- html5 超链接标签,详解HTML的a标签(超链接标签)
1.什么是标签 2.1.href 规定链接指向的页面的 URL. 1. 链接https.http地址: Baidu 2.链接Page,比如自定义的Page(.html) 3.使用对象连接,例如一个图片 ...
- html5 video js控制摄像头的焦距,H5中使用video标签实现选择摄像头功能的示例
H5中使用video标签实现选择摄像头功能的示例 发布时间:2020-12-05 10:48:03 来源:亿速云 阅读:91 作者:小新 小编给大家分享一下H5中使用video标签实现选择摄像头功能的 ...
- a标签,br标签,p标签详解
a标签,br标签,p标签详解 一.a标签 1.简介 2.语法 3.常用属性 二.br标签 1.简介 2.语法 三.p标签 1.简介 2.案例 一.a标签 1.简介 使用a锚链接可以从A页面转到B页面, ...
最新文章
- ubuntu下关于 undefined reference to 'pcap_flex'错误 以及 无法导入/找到libpcap.so.1错误...
- lighttpd安装及secdownload,fastcgi,proxy配置
- 50个Android开发人员必备UI效果源码[转载]
- Linux下安装JDK和验证
- iis服务器建立动态网站,09-IIS添加动态网站
- 吃相难看!它又又又涨价了......
- 用户角色权限设计思路
- 真正拖垮你的,是沉没成本
- 开源博客系统php 漂亮,26种基于PHP的开源博客系统
- php获取百度搜索的关键词,【2020年】百度搜索词获取,获取百度搜索的关键词【真实有效】...
- 利用ffmpeg将m3u8下载成mp4(利用ps1脚本解析json批量下载)
- 苹果手机上音乐播放的问题
- LOL召唤师信息查询工具(可查服务器、段位、胜点,隐藏分、战斗力)
- 锂电池和锂离子电池的区别
- 基于音乐/电影/图书的协同过滤推荐算法代码实现(基于用户推荐、基于项目推荐、基于SlopeOne算法推荐、基于SVD算法推荐、混合加权推荐)
- 多表关联查询(Oracle)
- 四川南溪仙源长江公路大桥通车 结束千年摆渡过江历史
- 用Java代码计算磁盘里的文件大小
- java 15k,广州-Java高级-15k-22k(月薪)
- Python实现利用MMR提取自动摘要
热门文章
- leetcode 740. Delete and Earn | 740. 删除并获得点数(暴力递归->傻缓存->DP)
- 【Git】git stash应用场景
- C语言文件操作(四)将txt格式汉字转化为txt格式16进制编码
- C++学习笔记:(六)public、protected、private继承详解
- Leecode 222. 完全二叉树的节点个数——Leecode日常刷题系列
- 【题意+推导讲解】1031 Hello World for U (20 分)_15行代码AC
- python实现编译器连接器_Python连接器
- 大学c语言程序设计实训课实验报告,大学一年级下学期C语言程序设计实验报告答案 完整版...
- python from sys import argv_笨方法学python之import sys与from sys import argv的区别
- Mysql数据库(一)——mysql数据库初体验