UserMedia API：使用浏览器访问摄像头拍照

使用 UserMedia API 访问摄像头的功能

最新版本的 chrome、firefox、 opera 已经支持

 

 

 

 

跟新：加入关闭摄像头方法

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html>
<head>   
<title>Camera and Video Control with HTML5 Example</title>
<style>   
    video,img { display: block; margin: 0 0 20px 0; }
</style>
</head>
<body>
 
<div id="page">
 
<div id="contentHolder">
<!--
<div>
<!-- camera--照相机；camcorder--摄像机；microphone--录音 -->
<input id="uploadimg" type="file" accept="image/*" capture="camera" />
</div>
-->
 
<section class="left">
<h1>Camera and Video Control with HTML5</h1>
    <video id="video" autoplay ></video>
    <button id="btnStop" data-status='1'>stop</button>
    <button id="btn">Take Photo</button><br />   
    <img id="photo" />
    <script>
    document.getElementsByTagName('input')[0].addEventListener('change',function(){
        var file=this.files[0];
        var formatDate = function(date){
            return date.getFullYear()
            +'-'+(date.getMonth()+1)
            +'-'+date.getDate()
            +' '+date.getHours()
            +':'+date.getMinutes()
            +':'+date.getSeconds();
        };
        var s = 'now:  '+formatDate(new Date())+'<hr />';
        for(var k in file){
            if(file.hasOwnProperty(k)&&typeof(k)=='string'){
                if(k=='lastModifiedDate'){
                    s+= k+':  '+formatDate(file[k])+'<br/>';
                }else{
                    s+= k+':  '+file[k]+'<br/>';
                }
            }
         
        }
         
         
        var el = document.createElement('div');
         
        el.innerHTML = s;
        this.parentNode.appendChild(el);
         
        /*
         var reader = new FileReader();
         reader.onloadend = function() {
             console.log('reader>>>',this);
         };
          
        reader.readAsDataURL(file);
        */
    },false);
     
     
     
     
     
        window.addEventListener("DOMContentLoaded", function(){
            var width = 480;
            var photo = document.getElementById("photo");
            var video = document.getElementById("video");
            var canvas = document.createElement("canvas");
            var context = canvas.getContext("2d");               
            var mediaErr = function(error) {
                    console.log("media error: ",error);
                };
            var mediaConf = {
                        video: true , //开始摄像头
                        audio: false //开启麦克风
                    };
            window.videoStream;
             
             //stop camera
             document.getElementById('btnStop').addEventListener('click',function(){
                 if(this.dataset.status==1){
                     videoStream.stop();
                     this.dataset.status=0;
                     this.innerHTML='play';
                 }else{
                     openMedia();
                     this.dataset.status=1;
                     this.innerHTML='stop';
                 }
                  
             });
              
              
              
            //event:take photo
            document.getElementById("btn").addEventListener("click", function(){               
                context.drawImage(video, 0, 0, video.width, video.height);               
                photo.setAttribute('src', canvas.toDataURL('image/png'));                       
            });       
             
            //event: resize video
            video.addEventListener('play', function(ev){
                    setTimeout(function(){                       
                        if(video.videoWidth){
                            height = video.videoHeight/(video.videoWidth/width);
                            video.setAttribute('width', width);
                            video.setAttribute('height', height);
                            canvas.setAttribute('width',width);
                            canvas.setAttribute('height',height);   
                            photo.setAttribute('width', width);
                            photo.setAttribute('height', height);                                                       
                        }else{
                            setTimeout(arguments.callee,100);
                        }
                    },100);
            }, false);
             
             
            // open media
            function openMedia(){
                if(navigator.getUserMedia) { // Standard, opera
                    navigator.getUserMedia(mediaConf, function(stream) {
                        videoStream = stream;
                        video.src = stream;
                        video.play();
                    }, mediaErr);   
                } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed, chrome
                    navigator.webkitGetUserMedia(mediaConf, function(stream){
                        videoStream = stream;
                        video.src = window.webkitURL.createObjectURL(stream);
                        video.play();
                    }, mediaErr);
                }else if(navigator.mozGetUserMedia){ // firefox
                    navigator.mozGetUserMedia(mediaConf,function(stream){  
                        videoStream = stream;
                        video.mozSrcObject = stream;
                        video.play();           
                    },mediaErr);
                     
                }else{
                    console.log('your browser do not support UserMedia API');
                }
            }
            openMedia();
             
        }, false);
 
    </script>
         
</section>
 
 
</div>
 
 
</body>
</html>

　　

posted @   ecalf  阅读(4364)  评论(7)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· 展开说说关于C#中ORM框架的用法！
· SQL Server 2025 AI相关能力初探
· Pantheons：用 TypeScript 打造主流大模型对话的一站式集成库
点击右上角即可分享
微信分享提示