html pc调用摄像头进行拍照

前段时间，同事要我帮忙弄个浏览器调用摄像头拍照的demo给客户，一想，这个简单，直接上代码：

1 <video ></video>
2 <canvas ></canvas>
3 <button type="button" >拍照</button>
4 <button type="button" >停止</button>

 1 $(function() {
 2     var pageSelf = $('.page');
 3     var mediaStreamTrack = null;
 4     init()
 5     // 调用摄像头
 6     function init() {
 7         try{
 8             navigator.getUserMedia = navigator.getUserMedia ||
 9                 navigator.webkitGetUserMedia ||
10                 navigator.mozGetUserMedia ||
11                 navigator.mediaDevices.getUserMedia;
12         }catch(e) {
13             
14         }
15         if (navigator.getUserMedia) {
16             navigator.getUserMedia({
17                 audio: true,
18                 video: {
19                     width: 300,
20                     height: 400
21                 }
22             }, function(stream) {
23                 console.log(stream)
24                 mediaStreamTrack = typeof stream.stop === 'function' ? stream : stream.getTracks()[1];
25                 console.log(mediaStreamTrack)
26                 var video = document.getElementById("video");
27                 if ('srcObject' in video) {
28                     console.log('支持srcObject')
29                     video.srcObject = stream;
30                 } else {
31                     console.log('支持src')
32                     video.src = (window.URL || window.webkitURL).createObjectURL(stream);
33                 }
34                 video.play();
35             }, function(err) {
36                 // 调取摄像头失败
37                 console.log("The following error occurred: ");
38             });
39         } else {
40             console.log("getUserMedia not supported");
41             
42             // 调取摄像头失败
43         }
44     }
45     
46     pageSelf.on('click', '#takePhotos', function() {
47         takePhotos()
48     })
49     
50     pageSelf.on('click', '#stopTakePhotos', function() {
51         mediaStreamTrack && mediaStreamTrack.stop();
52     })
53     
54     // 拍照
55     function takePhotos() {
56         var video = document.getElementById("video"),
57             canvas = document.getElementById("canvas"),
58             context = canvas.getContext("2d"),
59             vHeight = video.offsetHeight,
60             vWidth = video.offsetWidth;
61         canvas.width = vWidth; // 改变画布的宽高
62         canvas.height = vHeight;
63         context.drawImage(video, 0, 0, vWidth, vHeight);
64         // 获取图片src  base64格式
65         photoSrc = document.getElementById("canvas").toDataURL("image/jpeg", 0.8);
66     }
67     
68 })

View Code  js