如何使用html5調用iPhone的后置攝像頭

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

創新互聯公司是專業的仲巴網站建設公司，仲巴接單;提供網站建設、成都網站建設,網頁設計,網站設計,建網站,PHP網站建設等專業做網站服務;采用PHP框架,可快速的進行仲巴網站開發網頁制作和功能擴展;專業做搜索引擎喜愛的網站,專業的做網站團隊,希望更多企業前來合作!

!DOCTYPE?html

html?xmlns=""

head

titleHTML5?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"/videohr?/

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

canvas?id="canvas1"?height="120px"?/canvashr?/

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支持訪問后置攝像頭的

html5調用json數據接口怎么寫

HTML5中可以通過localStorage數據與JSON對象的轉換，快速實現存儲更多數據的功能。

將localStorage數據轉成JSON對象，需要調用JSON對象的parse()方法，JSON.parse(data)。其中data就是localStorage對象獲取的數據，調用該方法將返回一個裝載data數據的JSON對象。

通過stringify()方法，將一個實體對象轉換為JSON格式的文本數據，JSON.stringify(obj)。obj表示任意一個實體對象，該方法返回一個由實體對象轉成JSON格式的文本數據集。

下例所示：

function addStu(){

var sno=$$("sno").value,

name=$$("name").value,

sex=$$("sex").value,

score=$$("score").value;

//聲明一個實體對象，將學生的信息當作對象的成員

var

dataSet=new Object;

dataSet.sno=sno;

dataSet.name=name;

dataSet.sex=sex;

dataSet.score=score;

//把dataSet這個對象轉換成JSON格式的文本數據

var

list=JSON.stringify(dataSet);

localStorage.setItem(sno,list);

getlocalData();

}

function getlocalData(){

var addInfo="";

for(var i=0;i

var key=localStorage.key(i);

//把json格式的字符串轉換成JSON對象

var

dataSet=JSON.parse(localStorage.getItem(key));

addInfo+="

"+dataSet.sno

+""+dataSet.name

+""+dataSet.sex

+""+dataSet.score

+"";

$$("allInfo").innerHTML=addInfo;

}

}

html5是什么干什么的

HTML的全稱是超文本標記語言，是一種標記語言。它包括一系列標簽，可以統一網絡上文檔的格式，將分散的互聯網資源連接成一個邏輯整體。HTML是由HTML命令組成的描述性文本，可以解釋文字、圖形、動畫、聲音、表格、鏈接等。Html是一種用來描述網頁的語言。它被稱為超文本標記語言，它是一種標記語言。它包括一系列標簽，可以統一網絡上文檔的格式，將分散的互聯網資源連接成一個邏輯整體。

如何在html5獲取接口方法中返回的map信息

定位功能（Geolocation）是HTML5的新特性，因此只有在支持HTML5的現代瀏覽器上運行，特別是手持設備如iphone，地理定位更加精確。首先我們要檢測用戶設備瀏覽器是否支持地理定位，如果支持則獲取地理信息。注意這個特性可能侵犯用戶的隱私，除非用戶同意，否則用戶位置信息是不可用的，所以我們在訪問該應用時會提示是否允許地理定位，我們當然選擇允許即可。

function getLocation(){

if (navigator.geolocation){

navigator.geolocation.getCurrentPosition(showPosition,showError);

}else{

alert("瀏覽器不支持地理定位。");

}

}

上面的代碼可以知道，如果用戶設備支持地理定位，則運行 getCurrentPosition() 方法。如果getCurrentPosition()運行成功，則向參數showPosition中規定的函數返回一個coordinates對象，getCurrentPosition() 方法的第二個參數showError用于處理錯誤，它規定當獲取用戶位置失敗時運行的函數。

我們先來看函數showError()，它規定獲取用戶地理位置失敗時的一些錯誤代碼處理方式：

function showError(error){

switch(error.code) {

case error.PERMISSION_DENIED:

alert("定位失敗,用戶拒絕請求地理定位");

break;

case error.POSITION_UNAVAILABLE:

alert("定位失敗,位置信息是不可用");

break;

case error.TIMEOUT:

alert("定位失敗,請求獲取用戶位置超時");

break;

case error.UNKNOWN_ERROR:

alert("定位失敗,定位系統失效");

break;

}

}

我們再來看函數showPosition(),調用coords的latitude和longitude即可獲取到用戶的緯度和經度。

function showPosition(position){

var lat = position.coords.latitude; //緯度

var lag = position.coords.longitude; //經度

alert('緯度:'+lat+',經度:'+lag);

}

利用百度地圖和谷歌地圖接口獲取用戶地址

上面我們了解了HTML5的Geolocation可以獲取用戶的經緯度，那么我們要做的是需要把抽象的經緯度轉成可讀的有意義的真正的用戶地理位置信息。幸運的是百度地圖和谷歌地圖等提供了這方面的接口，我們只需要將HTML5獲取到的經緯度信息傳給地圖接口，則會返回用戶所在的地理位置，包括省市區信息，甚至有街道、門牌號等詳細的地理位置信息。

我們首先在頁面定義要展示地理位置的div，分別定義id#baidu_geo和id#google_geo。我們只需修改關鍵函數showPosition()。先來看百度地圖接口交互，我們將經緯度信息通過Ajax方式發送給百度地圖接口，接口會返回相應的省市區街道信息。百度地圖接口返回的是一串JSON數據，我們可以根據需求將需要的信息展示給div#baidu_geo。注意這里用到了jQuery庫，需要先加載jQuery庫文件。