`

html5调用摄像头

 
阅读更多
http://my.oschina.net/hxwny/blog/498201

代码片段如下:

css部分代码:
video { border: 1px solid #ccc; display:inline-block; }
 #canvas { border: 1px solid #ccc; display:inline-block;}
 #take_photo{background-color:orange;width:100px;height:30px;border:0px;}

  html部分代码:
id="video" width="480" height="320" autoplay>
id="canvas" width="480" height="320">
id="take_photo" type="button" value="take_photo"/> 

window.addEventListener("DOMContentLoaded", function() {
  var canvas = document.getElementByIdx_x("canvas"),
  context = canvas.getContext("2d"),
  video = document.getElementByIdx_x("video"),
  videoobj = {"video": true },
  errback = function(error) {
          console.log("error", error.code);
 };
  if(navigator.getUserMedia) {
            navigator.getUserMedia(videoobj, function( stream) {
                       video.src = stream;
                       video.play();
             }, errback);
  } else if (navigator.webkitGetUserMedia) {
                navigator.webkitGetUserMedia(videoobj,function(stream) {
                video.src = window.webkitURL.createObjectURL(stream);
                } , errback)
 }
  document.getElementByIdx_x("take_photo").addEventListener("click", function(){
         context.drawImage(video, 0, 0, 480, 320);
  });
}, false);
分享到:
评论

相关推荐

    Html5调用摄像头读取二维码(全部源码)

    在这个"Html5调用摄像头读取二维码(全部源码)"项目中,我们主要探讨的是如何利用HTML5的 getUserMedia API 和二维码识别库来实现在网页上直接通过摄像头扫描二维码的功能。 1. **getUserMedia API**: 这是HTML5 ...

    html5 调用摄像头

    其中,HTML5调用摄像头这一特性,是实现多媒体互动体验的重要一环。这一特性允许用户在浏览器中直接访问和使用电脑的摄像头,而无需借助外部插件,如Flash。 在HTML5中,主要通过`<input type="file">`元素的`...

    HTML5调用摄像头拍照

    HTML5是现代网页开发的重要标准,它引入了许多新特性,其中一项就是对多媒体的支持,使得在浏览器中调用摄像头拍照成为可能。这个功能极大地丰富了Web应用的交互性,为移动设备上的应用提供了更多可能性。 在HTML5...

    HTML5调用摄像头识别人体手掌DEMO演示

    HTML5调用摄像头识别人体手掌DEMO演示

    html5调用摄像头实现拍照

    html5调用摄像头实现拍照,亲测可行。正式部署需要使用https

    h5调用摄像头.rar

    首先,我们来看如何通过HTML5直接调用摄像头。HTML5的`<input>`标签提供了`accept`属性,可以限制用户选择文件的类型。当设置为`accept="image/*;capture=camera"`时,用户在点击输入框后会直接打开摄像头进行拍照。...

    mui-3.7.1.rar含有html5调用摄像头扫二维码mui.min.css和mui.min.js

    《使用MUI框架实现HTML5调用摄像头扫二维码功能》 在移动应用开发领域,MUI框架因其高效、便捷的特点,被广泛应用于构建接近原生App体验的Web应用。MUI是一个基于HTML5和CSS3的开源框架,旨在提供一套完整的解决...

    HTML5调用摄像头+视频特效+录制视频+录音+截图+变声+滤波+音频可视化

    HTML5是一种强大的网页开发技术,它为现代浏览器提供了丰富的功能,包括直接调用摄像头、处理视频和音频等。在这个项目中,我们将深入探讨如何利用HTML5的API来实现摄像头调用、视频特效、录制视频、录音、截图、变...

    h5调用摄像头拍照

    其中,HTML5调用摄像头拍照的功能让网页应用能够直接与用户的设备硬件进行交互,从而实现更丰富的功能。本篇将深入探讨如何利用HTML5来实现摄像头拍照并上传照片。 一、HTML5的MediaDevices接口 HTML5的...

    html5调用摄像头功能的实现代码

    HTML5调用摄像头功能是现代网页交互中非常常见的一项技术,主要用于实现网页端对用户摄像头的控制访问,为视频聊天、网页拍照等功能提供支持。HTML5通过引入MediaDevices API,实现了对用户媒体设备的访问,包括...

    html5调用摄像头js加h5实现.zip

    HTML5是现代网页开发的关键技术,它引入了许多新特性,其中一项便是通过JavaScript API调用摄像头功能。在本文中,我们将深入探讨如何使用HTML5和JavaScript(尤其是JS库addyosmani-getUserMedia.js)来实现实时访问...

    html5调用摄像头拍照ajax java上传

    调用摄像头和上传文件涉及用户隐私,因此在实现过程中必须确保符合相关法律法规和最佳实践。例如,获取用户明确同意访问摄像头,以及提供清晰的上传提示和隐私政策。 7. 图片格式转换: 通常,Base64编码的图片在...

    H5调用摄像头和扫一扫功能,亲测可用

    1. 拍照主要使用 navigator.mediaDevices.getUserMedia 2. 扫一扫有两种实现方式: a. zepto + qrcode 通过相册图片解析 b. html5-qrcode 通过拍照... 说明: H5调用摄像头要在Https 协议下,PC端和手机端都要测试。

    html5调用本地摄相头拍照上传相片

    HTML5的WebRTC(Web Real-Time Communication)是实现调用摄像头的关键技术。WebRTC允许浏览器之间进行实时的音视频通信,无需任何插件。通过`navigator.mediaDevices.getUserMedia()`方法,我们可以请求访问用户的...

    H5调用摄像头和扫一扫功能测

    1. 拍照主要使用 navigator.mediaDevices.getUserMedia 2. 扫一扫有两种实现方式: a. zepto + qrcode 通过相册图片解析 b. html5-qrcode 通过拍照解析...说明: H5调用摄像头要在Https 协议下,PC端和手机端都要测试。

    H5调用摄像头读取二维码完整示例(含源码和引用文件,可在手机中直接使用)

    首先,我们要理解H5调用摄像头的API——`getUserMedia`,它是HTML5 MediaDevices接口的一部分。这个API允许网页访问用户的媒体输入设备,如摄像头或麦克风。调用`navigator.mediaDevices.getUserMedia(constraints)`...

Global site tag (gtag.js) - Google Analytics