time 
设为首页】【收藏本站
当前位置: 主页 > WEB教程 > Html教程 > 如何使用HTML5实现拍照上传应用

如何使用HTML5实现拍照上传应用

时间:2012-10-16 19:51 点击:2700次 字体:[ ]




      在HTML5规范的支持下,WebApp在手机上拍照已经成为可能。在下面,我将讲解Web App如何用手机进行拍照,显示在页面上并上传到服务器。

1、  视频流

        HTML5 The Media Capture API提供了对摄像头的可编程访问,用户可以直接用getUserMedia获得摄像头提供的视频流。我们需要做的是添加一个HTML5的Video标签,并将从摄像头获得视频作为这个标签的输入来源(请注意目前仅Chrome和Opera支持getUserMedia。补充:请使用Opera支持HTML5的新版本,如果是Chrome,版本需为Chrome 18.0.1008+,并使用about:flags来开启WebRTC,请看下图)。

如何使用HTML5实现拍照上传应用_www.fengfly.com
 

 

  1. <video id="video" autoplay=""></video> 
  2. <script> 
  3. var video_element = document.getElementById('video');  
  4. if (navigator.getUserMedia) { // opera should use opera.getUserMedia now, chrome use webkitGetUserMedia  
  5.          navigator.getUserMedia('video',success, error);  
  6. }  
  7. function success(stream) {  
  8.          video_element.src =stream;  
  9. }  
  10. </script> 
如何使用HTML5实现拍照上传应用_www.fengfly.com
视频流



本文地址 : http://www.fengfly.com/plus/view-209646-1.html
标签: HTML5
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: