代码改变世界

分享个好玩的东西-html5拍照

2012-07-10 10:27  滴水成兵  阅读(450)  评论(0)    收藏  举报

好久没写了，先贴出拍照的代码（建议用opera浏览器测试）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=yes">
    <meta name="description" content="A Polaroid-style camera within your browser. This is a getUserMedia example for those interested in HTML5 and Javascript web APIs.">
    <meta name="author" content="Daniel Davis">
    <style>
    /* RESET */
* {
    margin: 0;
    padding: 0;
}

/* TYPOGRAPHY */
body {
    color: #333;
    font-family: 'Helvetica Neue', 'Free Sans', 'Deja Vu Sans', Arial, Helvetica, sans-serif;
}
h1 {
    color: #ccc;
    font-size: 48px;
    margin: 12px 0 0 20px;
    position: absolute;
    text-shadow: 0 1px 0px #eee, 0 -1px 0px #999;
    text-transform: uppercase;
    width: 320px;
    z-index: -1;
}
footer {
    font-size: 0.9em;
}

/* GENERAL */
body {
    background: #ccc;
}

#camera {
    background: #ccc;
    border-bottom: solid 2px #333;
    box-shadow: 0 1px 0px 0px #666, 0 2px 0px 0px #888, 0 3px 0px 0px #aaa;
    margin: 0 auto;
    width: 360px;
}

#camera video {
    display:none;
}

#viewfinder {
    background: #000 url(lens.png) top left no-repeat;
    border: solid 2px #999;
    border-bottom: solid 2px #eee;
    border-radius: 6px;
    border-top: solid 2px #666;
    display: inline-block;
    height: 128px;
    margin: 12px 0 12px 48px;
    width: 128px;
}

#shutter {
    background: red;
    background: -moz-linear-gradient(top, #fcc, #f33 5%, #c00 80%);
    background: -ms-linear-gradient(top, #fcc, #f33 5%, #c00 80%);
    background: -o-linear-gradient(top, #fcc, #f33 5%, #c00 80%);
    background: -webkit-linear-gradient(top, #fcc, #f33 5%, #c00 80%);
    background: linear-gradient(top, #fcc, #f33 5%, #c00 80%);
    border: solid 2px #600;
    border-radius: 50%;
    box-shadow: 0 0 0px 5px #ddd, 0 5px 10px #333;
    cursor: pointer;
    display: inline-block;
    float: right;
    height: 64px;
    margin: 48px 43px 0 0;
    width: 64px;
}
#shutter:active {
    background: -ms-linear-gradient(top, #f33, #c00 80%);
    background: -moz-linear-gradient(top, #f33, #c00 80%);
    background: -o-linear-gradient(top, #f33, #c00 80%);
    background: -webkit-linear-gradient(top, #f33, #c00 80%);
    background: linear-gradient(top, #f33, #c00 80%);
    box-shadow: 0 0 0px 5px #ddd, 0 5px 10px #333, 0 1px 5px #600 inset;
}

#photo {
    background: #fff;
    box-shadow: 0 2px 4px #777;
    color: #111;
    display: block;
    height: 0;
    margin: 0 auto;
    width: 350px;
    -moz-transition: height 1.6s 0.3s linear;
    -ms-transition: height 1.6s 0.3s linear;
    -o-transition: height 1.6s 0.3s linear;
    -webkit-transition: height 1.6s 0.3s linear;
    transition: height 1.6s 0.3s linear;
}
#photo img {
    border: solid 1px #eee;
    height: 312px;
    margin: 24px 18px 0 18px;
    opacity: 0;
    width: 312px;
    -moz-transition: opacity 60s 1.9s;
    -ms-transition: opacity 60s 1.9s;
    -o-transition: opacity 60s 1.9s;
    -webkit-transition: opacity 60s 1.9s;
    transition: opacity 60s 1.9s;
}
#photo.developed {
    cursor: pointer;
    height: 425px;
}
#photo.developed img {
    opacity: 1;
}

#alert {
    background: #eee;
    box-shadow: 0 2px 4px #999;
    display: none;
    margin: 1em auto;
    padding: 1em;
    text-align:center;
}

footer {
    background: #ccc;
    border-radius: 1em;
    bottom: 0;
    box-shadow: 0 1px 1px #eee, 0 -1px 1px #999;
    display: block;
    margin: 1em;
    padding: 1em;
    position: absolute;
    right: 0;
    text-align: right;
    z-index: -1;
}
    </style>
    <title>Webaroid Instant Camera (getUserMedia example)</title>
</head>
<body>
    <div id="camera">
        <video src=""></video>
        <canvas id="viewfinder"></canvas>
        <!-- Lens image: http://openclipart.org/detail/19305/lente-objetiva-/-lens-objective-by-ricardo-19305 -->
        <button id="shutter"></button>    
        <h1>Webaroid Instant Camera</h1>    
    </div>

        
    <figure id="photo" title="Click to save">
        <img src="">
    </figure>

    <p id="alert"></p>

    <footer>
        <p>A <a href="http://dev.opera.com/articles/view/playing-with-html5-video-and-getusermedia-support/">getUserMedia</a> example by <a href="http://people.opera.com/danield/" rel="author">Daniel Davis</a>, <a href="http://www.opera.com/">Opera Software</a></p>
    </footer>

<script>
window.addEventListener('DOMContentLoaded', function() {
    // Check and display user's browser language. Default to English
    var user_lang = window.navigator.language || window.navigator.userLanguage;
    var lang = (user_lang.substring(0, 2) === 'ja') ? 'ja' : 'en';

    // Set global variables
    var viewfinder = document.getElementById('viewfinder');
    var shutter = document.getElementById('shutter');
    var photo = document.getElementById('photo');
    var img = document.querySelector('#photo img');
    var context = viewfinder.getContext('2d');
    var video = document.querySelector('video');
    var alertbox = document.getElementById('alert');
    var audio, audiotype;
    var messages = {
        'en' : {
            'error' : 'Oops, something went wrong. Please try again.',
            'nocamera' : 'Unable to show video. Is the camera working and connected?',
            'nosupport' : 'To view this demo, please use a browser that supports getUserMedia such as <a href="http://www.opera.com/next/">Opera 12</a>.'
        },
        'ch' : {
            'error' : '哎呀，发生了错误。请再试一次。',
            'nocamera' : '你不能观看视频。请检查相机是否正确连接。',
            'nosupport' : '要查看此演示，您将需要一个的相应getUserMedia的浏览器。例如，<a href="http://www.opera.com/next/">Opera 12版</a>。'
        }
    }
    
    // Get the stream from the camera using getUserMedia
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
    window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
    if (navigator.getUserMedia) {
        alertbox.style.display = 'none';
        
        // This beautiful hack for the options is from @kanasansoft:
        // http://www.kanasansoft.com/weblab/2012/06/arguments_of_getusermedia.html
        var gumOptions = {video: true, toString: function(){return 'video';}};        
        navigator.getUserMedia(gumOptions, successCallback, errorCallback);
        
        function successCallback(stream) {
            // Replace the source of the video element with the stream from the camera
            video.src = window.URL.createObjectURL(stream) || stream;
            video.play();
        }
        
        function errorCallback(error) {
            alertbox.innerHTML = messages[lang].error;
            alertbox.style.display = 'block';
            console.error('An error occurred: [CODE ' + error.code + ']');
            return;
        }
        
        // Prepare the audio file, depending on browser support
        audio = new Audio();
        audiotype = getAudioType(audio);
        if (audiotype) {
            audio.src = 'polaroid.' + audiotype;
        }
    } else {
        alertbox.innerHTML = messages[lang].nosupport;
        alertbox.style.display = 'block';
        console.log('Native web camera streaming (getUserMedia) is not supported in this browser.');
        return;
    }
    
    // Draw the video onto a canvas context
    function doDraw(video, context) {
        // Continually draw video onto the canvas
        window.setInterval(function() {
            context.drawImage(video, 0, 0);
        }, 40);
    }
    
    // Returns the audio type that the browser can play. Ignore MP3 because of licensing restrictions.
    function getAudioType(element) {
        if (element.canPlayType) {
            // CanPlayType returns maybe, probably, or an empty string.
            if (element.canPlayType('audio/mp4; codecs="mp4a.40.5"') !== '') {
                return('aac');
            } else if (element.canPlayType('audio/ogg; codecs="vorbis"') !== '') {
                return("ogg");
            }
        }
        return false;
    }

    shutter.addEventListener('mousedown', function() {
        // Get rid of the previous photo
        document.body.removeChild(photo);
        
        // Recreate the photo and empty image element
        photo = document.createElement('figure');
        photo.id = 'photo';
        photo.title = 'Click to save';
        document.body.appendChild(photo);
        img = document.createElement('img');
        photo.appendChild(img);        
    }, false);
    
    shutter.addEventListener('mouseup', function() {      
        // Copy the canvas data to the image element & start transition
        var strDataURI = viewfinder.toDataURL('image/jpeg');
        img.src = strDataURI;
        photo.className = 'developed';
        if (audiotype) {
            audio.play();
        }
        
        // Show a save dialog when the user clicks on the photo
        photo.addEventListener('click', function() {
            document.location.href = strDataURI.replace('image/jpeg', 'image/octet-stream');
        }, false);
    }, false);
    
    // Start drawing the video on page load thanks to "autoplay" attribute
    video.addEventListener('play', function() {
        // Check the camera stream is playing
        if (this.videoWidth === 0) {            
            alertbox.innerHTML = messages[lang].nocamera;
            alertbox.style.display = 'block';
            console.error('videoWidth is 0. Camera not connected?');
            return;
        }
        
        // Make the captured image square to fit the canvas
        if (this.videoWidth > this.videoHeight) {
            viewfinder.height = viewfinder.width = this.videoHeight;
        } else {
            viewfinder.width = viewfinder.height = this.videoWidth;
        }
        
        // Put the image from the video onto the canvas
        doDraw(this, context);
    }, false);   

}, false);
</script>
</body>
</html>