getUserMedia

index.ejs

getUserMedia()方法有三个参数：

1.约束对象

2.成功回调函数，传入参数：LocalMediaStream

3.失败回调函数，传入参数：error object

<video autoplay></video>
<img src = ''></img>
<canvas style="display:none;"></canvas>

<script>
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.getmozGetUserMedia || navigator.msGetUserMedia;

    var video = document.querySelector('video');
    var canvas = document.querySelector('canvas');
    var ctx = canvas.getContext('2d');
    var localMediaStream = null;
    //
    function snapshot(){
        if(localMediaStream){
            console.log("snapshot");
            ctx.drawImage(video,0,0);
            //"image/webp" works in Chrome 18. In other browsers, this will fall back to image/png.
            document.querySelector('img').src = canvas.toDataURL('image/webp');
        }    
    }
    //???????
    video.addEventListener('click',snapshot,false);
    function fallback(e){
        //video.src = 'fallbackvideo.webm';
        video.src = '/Users/apple/Movies/faceExpressGit.mov'
    }
    var onFailSoHard = function(e){
        console.log('Reeejected!',e);
    };

    function success(stream){
        video.src = window.URL.createObjectURL(stream);
        localMediaStream = stream;
    };
    
    if(!navigator.getUserMedia){
        fallback();
    
    }else{
        navigator.getUserMedia({video:true,audio:true},success,fallback);
    }
    
    
    
    
    
    
/*function hasGetUserMedia(){
    //Note:Opera is unprefixed.
    return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.getmozGetUserMedia || navigator.msGetUserMedia);
}*/
//Not showing vendor refixes.

/*if(navigator.getUserMedia){
    //Good to go
    navigator.getUserMedia({video:true,audio:true},
    function(localMediaStream){
        var video = document.querySelector('video');
        video.src = window.URL.createObjectURL(localMediaStream);
        //Note: onloadmetadata doesn't fire in Chrome when using it with getUserMedia.
        //See crbug.com/110938.
        video.onloadedmetadata = function(e){
            //Ready to go.Do some stuff.
        };
    },onFailSoHard);
    
}else{
    alert('getUserMedia() is not supported in your browser');
    
}
    
*/
</script>