html5 摄像头 直播,详解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";
});
如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
html5 摄像头 直播,详解HTML5 使用video标签实现选择摄像头功能相关推荐
- html5 video js控制摄像头的焦距,H5中使用video标签实现选择摄像头功能的示例
H5中使用video标签实现选择摄像头功能的示例 发布时间:2020-12-05 10:48:03 来源:亿速云 阅读:91 作者:小新 小编给大家分享一下H5中使用video标签实现选择摄像头功能的 ...
- HTML中的camera标签,详解HTML5 使用video标签实现选择摄像头功能
详解HTML5 使用video标签实现选择摄像头功能 1. html // jquery reference // // Open WebCam Snap Photo 2. javascript El ...
- html5录音兼容性,详解HTML5 录音遇到的坑
本文恩主要介绍了详解HTML5 录音的踩坑之旅,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧,希望能帮助到大家. 说实话,一开始都没接触过 HTML5 的 Audio A ...
- html5应用测试方法,详解html5的video标签测试应用
1.video标签的使用 属性:src(要播放的音频文件路径).autoplay(是否自动播放).control(进度条).loop(循环播放).onended(是否播放完毕的是一个事件) 2.实现了 ...
- .net html5页面缓存,详解HTML5中的manifest缓存使用
起源html5之前的网页,都是无连接,必须联网才能访问,这其实也是web的特色,这其实对于PC是时代问题并不大,但到了移动互联网时代,设备终端位置不再固定,依赖无线信号,网络的可靠性变得降低,比如坐在 ...
- 《HTML5 canvas开发详解(第2版)》——1.9 HTML5 Canvas对象
本节书摘来自异步社区<HTML5 canvas开发详解(第2版)>一书中的第1章,第1.9节,作者: [美]Steve Fulton , Jeff Fulton 更多章节内容可以访问云栖社 ...
- 《HTML5 Canvas开发详解》——1.7 2D上下文及其当前状态
本节书摘来自异步社区<HTML5 Canvas开发详解>一书中的第1章,第1.7节,作者: [美]Steve Fulton , Jeff Fulton 更多章节内容可以访问云栖社区&quo ...
- 《HTML5 canvas开发详解(第2版)》——1.3 本书使用的基础HTML页面
本节书摘来自异步社区<HTML5 canvas开发详解(第2版)>一书中的第1章,第1.3节,作者: [美]Steve Fulton , Jeff Fulton 更多章节内容可以访问云栖社 ...
- html5录音怎么保存到本地,详解HTML5 录音遇到的坑
本文恩主要介绍了详解HTML5 录音的踩坑之旅,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧,希望能帮助到大家. 说实话,一开始都没接触过 HTML5 的 Audio A ...
最新文章
- 一个不错的安卓下ssh客户端
- mysql5.6.22.0安装_皮带机滚筒用圆锥孔调心滚子轴承锁紧安装工艺
- Kafka端到端审计
- ros构建机器人运动学模型_古月私房课 | ROS机械臂开发中的主角MoveIt!
- python数据分析准备_使用Python进行数据分析I 环境准备
- mysql 缓存优缺点_MySQL查询缓存的优缺点
- 本质矩阵 基础矩阵 单应矩阵 (2)
- ant design vue table 高度自适应_Table行内的开关组件的使用
- excel (wps) 文件受保护处理方案
- 安装sqlserver 2017安装 需要安装oracle JRE7 更新 51(64位)或更高版本(已解决)
- Java使用WebService调用远程服务wsdl的方法,搭建一个demo,简单易用的教程
- mac回车键、空格键失灵解决方法
- 有关世界上第一台计算机的知识,计算机基础知识 1、世界上第一台电子计算机诞生于 A) 1943年 B) 1946年.doc...
- 30天150万公里,韦布望远镜抵达终点成功入轨,18镜合一进行时
- 如何动手搭建一套简单的直播系统
- Codeforces Round #784 (Div. 4)#蒻枸题解
- 9.4 GestureRecognizer muli 多个
- 类脑计算的研究进展与发展趋势
- wannacry 勒索病毒_WannaCry:勒索软件尸检
- 周立功阅读笔记-CANopen轻松入门基于DS301(一)
热门文章
- 数字孪生应用白皮书_【研究报告】数字孪生应用白皮书(2020版)
- .net 集合分成几个等数量集合_[C#.NET 拾遗补漏]08:强大的LINQ
- ES6-Object.is() 和Object.assign()
- SQL Server数据库的查询、排序
- lc 115. Distinct Subsequences
- HDU-4618 Palindrome Sub-Array 暴力枚举
- 你的Windows Phone 手机还没有升级7.5吗?我有办法,亲身体验!
- [zz]How to sign .EXE, .DLL and .CAB files?
- Prefactoring——Introduction
- 一条SQL查询语句是如何执行的? MySql杂谈