當前位置:編程學習大全網 - 編程語言 - 如何html5在瀏覽器裏訪問手機後置攝像頭

如何html5在瀏覽器裏訪問手機後置攝像頭

html5需要使用接口chrome30+ for android 已經實現了利用webcam,調用手機後置攝像頭,代碼如下:

<!DOCTYPE?html>

<html?xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>HTML5?GetUserMedia?Demo</title>

<meta?name="viewport"?content="width=device-width,?initial-scale=1.0,?maximum-scale=1.0"?/>

</head>

<body>

<input?type="button"?title="開啟攝像頭"?value="開啟攝像頭"?onclick="getMedia();"?/><br?/>

<video?height="120px"?autoplay="autoplay"></video><hr?/>

<input?type="button"?title="拍照"?value="拍照"?onclick="getPhoto();"?/><br?/>

<canvas?id="canvas1"?height="120px"?></canvas><hr?/>

<input?type="button"?title="視頻"?value="視頻"?onclick="getVedio();"?/><br?/>

<canvas?id="canvas2"?height="120px"></canvas>

<script?type="text/javascript">

var?video?=?document.querySelector('video');

var?audio,?audioType;

var?canvas1?=?document.getElementById('canvas1');

var?context1?=?canvas1.getContext('2d');

var?canvas2?=?document.getElementById('canvas2');

var?context2?=?canvas2.getContext('2d');

navigator.getUserMedia?=?navigator.getUserMedia?||?navigator.webkitGetUserMedia?||?navigator.mozGetUserMedia?||?navigator.msGetUserMedia;

window.URL?=?window.URL?||?window.webkitURL?||?window.mozURL?||?window.msURL;

var?exArray?=?[];?//存儲設備源ID

MediaStreamTrack.getSources(function?(sourceInfos)?{

for?(var?i?=?0;?i?!=?sourceInfos.length;?++i)?{

var?sourceInfo?=?sourceInfos[i];

//這裏會遍歷audio,video,所以要加以區分

if?(sourceInfo.kind?===?'video')?{

exArray.push(sourceInfo.id);

}

}

});

function?getMedia()?{

if?(navigator.getUserMedia)?{

navigator.getUserMedia({

'video':?{

'optional':?[{

'sourceId':?exArray[1]?//0為前置攝像頭,1為後置

}]

},

'audio':true

},?successFunc,?errorFunc);//success是獲取成功的回調函數

}

else?{

alert('Native?device?media?streaming?(getUserMedia)?not?supported?in?this?browser.');

}

}

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();

}

}

function?errorFunc(e)?{

alert('Error!'+e);

}

//?將視頻幀繪制到Canvas對象上,Canvas每60ms切換幀,形成肉眼視頻效果

function?drawVideoAtCanvas(video,context)?{

window.setInterval(function?()?{

context.drawImage(video,?0,?0,90,120);

},?60);

}

//獲取音頻格式

function?getAudioType(element)?{

if?(element.canPlayType)?{

if?(element.canPlayType('audio/mp4;?codecs="mp4a.40.5"')?!==?'')?{

return?('aac');

}?else?if?(element.canPlayType('audio/ogg;?codecs="vorbis"')?!==?'')?{

return?("ogg");

}

}

return?false;

}

//?vedio播放時觸發,繪制vedio幀圖像到canvas

//video.addEventListener('play',?function?()?{

//drawVideoAtCanvas(video,?context2);

//},?false);

//拍照

function?getPhoto()?{

context1.drawImage(video,?0,?0,90,120);?//將video對象內指定的區域捕捉繪制到畫布上指定的區域,實現拍照。

}

//視頻

function?getVedio()?{

drawVideoAtCanvas(video,?context2);

}

</script>

</body>

</html>

HTML5 The Media Capture API提供了對攝像頭的可編程訪問,用戶可以直接用getUserMedia獲得攝像頭提供的視頻流。但實際上用html5調用手機攝像頭存在很多問題:

1)谷歌的發布的Chrome到了21版本後,才新增了壹個用於高質量視頻音頻通訊的getUserMedia API,該API允許Web應用程序訪問攝像頭和麥克風,其他手機瀏覽器只有opera支持html5調用本地拍照功能

2)兩個瀏覽器均不支持訪問多個攝像頭:chrome不支持訪問後置攝像頭,pera支持訪問後置攝像頭的

  • 上一篇:長方形體積的公式
  • 下一篇:行政綜合和稅收業務崗位是什麽意思
  • copyright 2024編程學習大全網