HTML5 + JS 调取摄像头拍照下载

<video id="video" width="640" height="480" autoplay></video>
<br>
<button id="snap">Snap Photo</button>

<button onclick="sendUrl()">提交下载</button>
<canvas id="canvas" width="640" height="480"></canvas>
<img src="" alt="1111">

下面是JS+html5调用电脑摄像头，目前处于安全考虑谷歌不支持

window.addEventListener("DOMContentLoaded", function() {
            var canvas = document.getElementById("canvas"),
            context = canvas.getContext("2d"),
            video = document.getElementById("video"),
            videoObj = { "video": true },
            errBack = function(error) {
                console.log("Video capture error: ", error.code); 
            };
            if(navigator.getUserMedia) { // Standarda
                navigator.getUserMedia(videoObj, function(stream) {
                    video.src = stream;
                    video.play();
                }, errBack);
            } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
                navigator.webkitGetUserMedia(videoObj,function(stream){
                video.src = window.webkitURL.createObjectURL(stream);
                video.play();
            }, errBack);
            }
            else if(navigator.mozGetUserMedia) { // Firefox-prefixed
                navigator.mozGetUserMedia(videoObj, function(stream){
                    video.src = window.URL.createObjectURL(stream);
                    video.play();
                }, errBack);
            }
            document.getElementById("snap").addEventListener("click", function() {
                context.drawImage(video, 0, 0, 640, 480);
            });
            
        }, false);

现在是将canvas里面的图片下载到本地，以便于file上传

function download(type) {
            //设置保存图片的类型
            var imgdata = canvas.toDataURL(type);
            //将mime-type改为image/octet-stream,强制让浏览器下载
            var fixtype = function (type) {
                type = type.toLocaleLowerCase().replace(/jpg/i, 'jpeg');
                var r = type.match(/png|jpeg|bmp|gif/)[0];
                return 'image/' + r;
            }
            imgdata = imgdata.replace(fixtype(type), 'image/octet-stream')
            //将图片保存到本地
            var saveFile = function (data, filename) {
                var link = document.createElement('a');
                link.href = data;
                link.download = filename;
                var event = document.createEvent('MouseEvents');
                event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                link.dispatchEvent(event);
            }
            var filename = new Date().toLocaleDateString() + '.' + type;
            saveFile(imgdata, filename);
        }

下面调用展示

        function sendUrl(){
            var canvas = document.getElementById('canvas'),
            var imgSrc = canvas.toDataURL();
            document.getElementsByTagName('img')[0].src = imgSrc;
            context.clearRect(video, 0, 0, 640, 480)
            var type = 'png';
            download(type);
            clearCanvas() 
            
        }