html5

最新推荐文章于 2017-04-26 20:23:14 发布

swt198852

最新推荐文章于 2017-04-26 20:23:14 发布

阅读量560

点赞数

CC 4.0 BY-SA版权

分类专栏： html

本文链接：https://blog.youkuaiyun.com/swt198852/article/details/8160055

html 专栏收录该内容

30 篇文章

订阅专栏

通过HTML5 Video和Canvas实现拍照的功能，功能很简单；另外，因为用到了getUserMedia()函数，目前只能在Chrome和Opera里使用，详见：Can I use getUserMedia/Stream API?

演示地址：HTML5 Webcam Photoing

基本原理：<video>元素用来从WebRTC（亦即你的摄像头）获取图像，然后通过<canvas>来抓取视频；

 
   01(function() { 
 
   02 var streaming = false, 
 
   03 video        = document.querySelector('#video'), 
 
   04 canvas       = document.querySelector('#canvas'), 
 
   05 startbutton  = document.querySelector('#startbutton'), 
 
   06 width = 400, 
 
   07 height = 0; 
 
   08   
 
   09 navigator.getMedia = ( navigator.getUserMedia || 
 
   10                         navigator.webkitGetUserMedia || 
 
   11                         navigator.mozGetUserMedia || 
 
   12                         navigator.msGetUserMedia); 
 
   13   
 
   14 navigator.getMedia( 
 
   15 { video: true, audio: false },  
 
   16 function(stream) { 
 
   17  if (navigator.mozGetUserMedia) { 
 
   18 video.mozSrcObject = stream; 
 
   19  }  else { 
 
   20 var vendorURL = window.URL || window.webkitURL; 
 
   21 video.src = vendorURL.createObjectURL(stream); 
 
   22  }  
 
   23  video.play(); 
 
   24 },  
 
   25 function(err) { 
 
   26  console.log("An error occured! " + err); 
 
   27 }  
 
   28 );  
 
   29   
 
   30 video.addEventListener('canplay', function(ev){ 
 
   31 if (!streaming) { 
 
   32  height = video.videoHeight / (video.videoWidth/width); 
 
   33  video.setAttribute('width', width); 
 
   34  video.setAttribute('height', height); 
 
   35  canvas.setAttribute('width', width); 
 
   36  canvas.setAttribute('height', height); 
 
   37  streaming = true;  
 
   38 }  
 
   39 },  false); 
 
   40   
 
   41 function takepicture() { 
 
   42 canvas.width = width; 
 
   43 canvas.height = height; 
 
   44 canvas.getContext('2d').drawImage(video, 0, 0, width, height); 
 
   45 }  
 
   46   
 
   47 startbutton.addEventListener('click', function(ev){ 
 
   48 takepicture(); 
 
   49 ev.preventDefault(); 
 
   50 },  false); 
 
   51 })();