1. 页面代码
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <title>Insert title here</title> </head> <body> <div id="contentHolder"> <video id="video" width="320" height="320" autoplay="autoplay"></video> <button id="snap" style="display: none"></button> <canvas style="display: none" id="canvas" width="320" height="320"></canvas> </div> </body> </html>
2.js代码
window.addEventListener('DOMContentLoaded', function () { var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'), video = document.getElementById('video'), videoObj = { video : true }, errBack = function (err) { console.log('Video capture error : ' , err.code ); }; navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; navigator.getUserMedia(videoObj, function (stream) { video.src = window.webkitURL.createObjectURL(stream); video.play(); }, errBack); });
3. 设备拥有多个摄像头的情况下如何开启其他摄像头
var audios = [], videos=[] function gotSources(sourceInfos) { for (var i = 0; i != sourceInfos.length; ++i) { var sourceInfo = sourceInfos[i]; if (sourceInfo.kind === 'audio') { audios.push(sourceInfo.id); } else if (sourceInfo.kind === 'video') { videos.push(sourceInfo.id); } else { console.log('some other kind of source: ', sourceInfo); } } } if (typeof MediaStreamTrack === 'undefined'){ alert('This browser does not support MediaStreamTrack.\n\nTry Chrome Canary.'); } else { MediaStreamTrack.getSources(gotSources); } function successCallback(stream) { window.stream = stream; // make stream available to console videoElement.src = window.URL.createObjectURL(stream); videoElement.play(); } function errorCallback(error){ console.log("navigator.getUserMedia error: ", error); } function start(){ if (!!window.stream) { videoElement.src = null; window.stream.stop(); } var constraints = { audio: { optional: [{sourceId: audios[0]}] }, video: { optional: [{sourceId: videos[0]}] } }; navigator.getUserMedia(constraints, successCallback, errorCallback); } start();
相关推荐
HTML5调用摄像头识别人体手掌DEMO演示
支持html5技术,可以调用摄像头来扫码,在web中运行,方便各个平台的开发
使用html5调用摄像头JS代码实现分享,html5调用摄像头js加h5实现.zip 含CSS html,js
HTML5 支持硬件开发 调用摄像头各种硬件代码上传 大家自己看!
HTML5调用摄像头拍照
html5调用摄像头实现拍照,亲测可行。正式部署需要使用https
这个是一个很好html5调用摄像头案列,包括apk包,源码,详解,
主要介绍了html5调用摄像头功能的实现代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
html5 用canvas video标签调用摄像头拍照ajax java实现上传
1. 拍照主要使用 navigator.mediaDevices.getUserMedia 2. 扫一扫有两种实现方式: a. zepto + qrcode 通过相册图片解析 b. html5-qrcode 通过拍照... 说明: H5调用摄像头要在Https 协议下,PC端和手机端都要测试。
参见个人csdn博客介绍 ------------------------------
HTML5调用摄像头,并拍照,希望对大家有帮助吧。。
H5调用本地摄像头实现扫一扫的功能实现。
本案例完整可以。 原理:通过H5调用手机摄像头拍照后解码,从而识别图片中的二维码。 使用时,将整个文件复制至手机,点击html文件运行即可。 感谢zhiqiang21的分享
简单两个js+html实现了调用摄像头获取静态图片后解析二维码数据, 并完善了获取二维码数据中文乱码问题。
h5调用摄像头拍照,并获取base64码,用hbuilder 封装app后 开启录音,相机,媒体等权限