H5调用摄像头

看完一个坑爹的,然后发现还是靠自己靠谱。于是乎,就有了以下的代码。

先介绍下开启摄像头的方法:

主要有以下几种,具体哪个行上哪个吧。

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;  
        window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;  

然后具体实现:

 function getMedia() {  
            if (navigator.getUserMedia) {  
                navigator.getUserMedia({  
                    'video': {  
                        'optional': [{  
                            'sourceId': exArray[0] //0为前置摄像头,1为后置  
                        }]  
                    },  
                    'audio':true  
                }, successFunc, errorFunc);    //success是获取成功的回调函数  
            }  
            else {  
                alert('Native device media streaming (getUserMedia) not supported in this browser.');  
            }  
        }  

继续:Error不写了,自定义去

        function successFunc(stream) {  
            //alert('Succeed to get media!');  
            if (video.mozSrcObject !== undefined) {  
                //Firefox中,video.mozSrcObject最初为null,而不是未定义的,我们可以靠这个来检测Firefox的支持  
                video.mozSrcObject = stream; 
            }  
            else {  
                video.src = window.URL && window.URL.createObjectURL(stream) || stream;
            }  
  
            //video.play();  
  
            // 音频  
            audio = new Audio();  
            audioType = getAudioType(audio);  
            if (audioType) {  
                audio.src = 'polaroid.' + audioType;  
                audio.play();  
            }  
        } 

最后:完整代码

  
  
  
    HTML5 GetUserMedia Demo  
    
      
  
  
    









你可能感兴趣的:(H5)