html5 直接调用摄像头,HTML5调用摄像头并拍照

利用html5特性，调用摄像头，并利用canvas拍照

先简单的添加需要的控件PICTURE 并在script中定义var video = document.getElementById("video");var context = canvas.getContext("2d")var errocb = function () { console.log('sth wrong!'); }

然后，简单的说就是利用html5的api navigator.getUserMedia来开启设备的摄像头，浏览器上会出现图示中的提示if (navigator.getUserMedia) { // 标准的API navigator.getUserMedia({ "video": true }, function (stream) { video.src = stream; video.play(); }, errocb);} else if (navigator.webkitGetUserMedia) { // WebKit 核心的API navigator.webkitGetUserMedia({ "video": true }, function (stream) { video.src = window.webkitURL.createObjectURL(stream); video.play(); }, errocb); }

网上有些例子中，navigator.getUserMedia第一个参数是‘video’，这可能是早期的版本，现在必须是obj还有关于getUserMedia和webkitGetUserMedia 的判断，网上有这么写的navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);但要注意，他们绑定video.src的方法不一样，本人没有测过createObjectURL是否通用

拍照功能就是简单的调用canvas中的drawImage即可document.getElementById("picture").addEventListener("click", function () { context.drawImage(video, 0, 0, 640, 480); });所有script代码如图示

然后浏览器中就能看到摄像头，点击picture，就会在把当前摄像头的图片就会出现在右边了

举报/反馈

html5 直接调用摄像头,HTML5调用摄像头并拍照相关推荐

MediaDevices html5,HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
.kind === 'videoinput') { carema.push(deviceInfos.deviceId) } } deviceInfoId = carema[后置位置]; } var c ...
html5 在线摄像头,HTML5在线摄像头使用
HTML5在线摄像头应用最近在搞一个考试系统,系统要求要有随机拍照的功能,并且摄像头能够收到js的控制.在线摄像头嘛,就那两种实现的方式:cab或者flash. 暂且不论本人从没学过的flash(事 ...
html与摄像头怎么链接,HTML5将DSLR连接为网络摄像头(HTML5 connect DSLR as webcam)
HTML5将DSLR连接为网络摄像头(HTML5 connect DSLR as webcam) 最近我在html5中创建了一个应用程序来连接网络摄像头并拍照. 是否有可能使用dslr / slr作为 ...
mui教程2——窗口管理、调用相册、调用摄像头、调用重力感应、微信朋友圈界面（仿制）分析
一.窗口管理 1,页面初始化在app开发中,若要使用HTML5+扩展api,必须等plusready事件发生后才能正常使用,mui将该事件封装成了mui.plusReady()方法,涉及到HTML5 ...
html调起苹果手机摄像头_html5调用手机摄像头
capture表示,可以捕获到系统默认的设备,比如:camera--照相机:camcorder--摄像机:microphone--录音. accept表示,直接打开系统文件目录. 其实html5的in ...
HTML中的camera标签,详解HTML5 使用video标签实现选择摄像头功能
详解HTML5 使用video标签实现选择摄像头功能 1. html // jquery reference // // Open WebCam Snap Photo 2. javascript El ...
软件c#语言调用摄像头,C#调用摄像头的几种方式
C#调用摄像头的方式本文将讲诉在C#的winform程序中如何调用摄像头: 1.调用USB摄像头 2.调用普通IP摄像头 3.通过摄像头SDK进行调用使用的DLL 首先给上我所使用的DLL 调用U ...
HTML5 地理位置定位（HTML5 Geolocation）原理及应用（调用GPS）
地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理及各个 ...
html5 摄像头直播,详解HTML5 使用video标签实现选择摄像头功能
详解HTML5 使用video标签实现选择摄像头功能 1. html // jquery reference // // Open WebCam Snap Photo 2. javascript El ...

html5 直接调用摄像头,HTML5调用摄像头并拍照

html5 直接调用摄像头,HTML5调用摄像头并拍照相关推荐

最新文章

热门文章