html5怎么調(diào)用系統(tǒng)相機

!DOCTYPE?html??

創(chuàng)新互聯(lián)溝通電話：13518219792，為您提供成都網(wǎng)站建設網(wǎng)頁設計及定制高端網(wǎng)站建設服務，創(chuàng)新互聯(lián)網(wǎng)頁制作領域10余年，包括成都混凝土攪拌罐車等多個行業(yè)擁有多年的網(wǎng)站設計經(jīng)驗，選擇創(chuàng)新互聯(lián)，為企業(yè)保駕護航！

head??

titleHTML5?GetUserMedia?Demo/title??

?meta?charset="utf-8"

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，所以要加以區(qū)分??

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是獲取成功的回調(diào)函數(shù)??

}??

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播放時觸發(fā)，繪制vedio幀圖像到canvas??

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

//????????????drawVideoAtCanvas(video,?context2);??

//????????},?false);??

//拍照??

function?getPhoto()?{??

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

}??

//視頻??

function?getVedio()?{??

drawVideoAtCanvas(video,?context2);??

}??

/script??

/body

HTML5都有哪些新特性呢？

HTML5新特性如下：

1、脫機緩存。您可以在關閉瀏覽器并再次打開時還原數(shù)據(jù)，以減少網(wǎng)絡流量。

2、音頻和視頻可以自由嵌入，多媒體形式更加靈活。

3、地理位置。地理位置定位使得定位導航不再是專屬導航軟件，地圖也不需要下載很大的地圖包。它可以通過緩存、去哪里、去哪里以及更靈活的方式來解決。

4、畫布繪制提高了移動平臺的繪制能力。canvas API可以用來繪制一個簡單的熱點地圖來收集用戶體驗數(shù)據(jù)，并支持對圖像的移動、旋轉、縮放等常規(guī)編輯。

5、豐富的互動方式。提高交互能力：拖動、撤消歷史操作、文本選擇等。

6、與原生app相比，開發(fā)維護成本低。降低開發(fā)和維護成本；？使頁面更小，減少用戶不必要的開銷；性能更好，功耗更低。

7、CSS3視覺設計師的輔助利器支持。CSS3支持字體嵌入、布局和最令人印象深刻的動畫功能。

8、HTML5調(diào)用相機、相冊和通訊錄的功能。

擴展資料：

2014年10月29日，萬維網(wǎng)聯(lián)盟宣布，HTML第五次重大修訂，經(jīng)過近8年的努力，標準規(guī)范終于完成。HTML5旨在支持移動設備上的多媒體。引入了新的語法特性來支持這一點，如視頻、音頻和畫布標記。HTML5還引入了一些新功能，這些功能可以真正改變用戶與文檔交互的方式，包括增強靈活性的新解析規(guī)則、新屬性、過時或冗余屬性等。

如何通過html5調(diào)用攝像頭拍照

1. 項目背景

網(wǎng)站項目基于HTML5+AngularJs開發(fā)，正在做一個由HTML5調(diào)用攝像頭拍照，從而實現(xiàn)修改頭像的功能。起初覺得HTML5拍照很簡單，但是做的時候才發(fā)現(xiàn)HTML5獲取攝像頭并不是那么容易。

2. 如何調(diào)用攝像頭

$scope.photoErr = false;

$scope.photoBtnDiable = true;

var mediaStream = null,track = null;

navigator.getMedia = (navigator.getUserMedia ||

navigator.webkitGetUserMedia || navigator.mozGetUserMedia ||

navigator.msGetUserMedia);

if (navigator.getMedia) {

navigator.getMedia(

{

video: true

},

// successCallback

function (stream) {

var s = window.URL.createObjectURL(stream);

var video = document.getElementById('video');

video.src = window.URL.createObjectURL(stream);

mediaStream = stream;

track = stream.getTracks()[0];

$scope.photoBtnDiable = false; $scope.$apply();

},

// errorCallback

function (err) {

$scope.errorPhoto();

console.log("The following error occured:" + err);

});

} else {

$scope.errorPhoto();

}

代碼解析：

navigator為瀏覽器對象，包含瀏覽器的信息，這里就是用這個對象打開攝像頭。$scope為AndularJs語法。第一步聲明navigator.getMedia來調(diào)用瀏覽器不同的打開攝像頭函數(shù)，目前僅有getUserMedia、webkitGetUserMedia、mozGetUserMedia、msGetUserMedia四種方式分別對應通用瀏覽器、Google瀏覽器、火狐瀏覽器和IE瀏覽器，瀏覽器會自動判斷調(diào)用哪一個函數(shù)。第二步是調(diào)用打開瀏覽器，包含三個參數(shù)，分別為需要使用的多媒體類型、獲取成功返回的流數(shù)據(jù)處理函數(shù)以及操作失敗返回錯誤消息處理函數(shù)。其中，使用時不僅可以設置視頻還能設置使用麥克風，設置方式為：

{

video: true，

audio: true

}

調(diào)用成功即打開攝像頭后返回視頻流數(shù)據(jù)，我們可以將流數(shù)據(jù)設置到video標簽在界面上實時顯示圖像。mediaStream用來記錄獲取到的流數(shù)據(jù)，track在Chrome瀏覽器中用來跟蹤攝像頭狀態(tài)，這兩個變量都能用來關閉攝像頭。

3. 拍照

$scope.snap = function () {

var canvas = document.createElement('canvas');

canvas.width = "400";

canvas.height = "304";

var ctx = canvas.getContext('2d');

ctx.drawImage(video, 0, 0, 400, 304);

$scope.closeCamera();

$uibModalInstance.close(canvas.toDataURL("image/png"));

};

拍照時需要使用到canvas標簽，創(chuàng)建一個canvas標簽，設置我們需要拍照的尺寸大小，通過drawImage函數(shù)將video當前的圖像保存到canvas標簽，最后將圖像數(shù)據(jù)轉換為base64數(shù)據(jù)返回并關閉攝像頭，這樣就完成了我們的拍照功能。這里的$uibModalInstance對象是我們項目中打開彈出層的一個對象，用來控制彈出層的顯示。

4. 如何關閉攝像頭

$scope.closeCamera = function () {

if (mediaStream != null) {

if (mediaStream.stop) {

mediaStream.stop();

}

$scope.videosrc = "";

}

if (track != null) {

if (track.stop) {

track.stop();

}

}

}

正如前面所說，關閉攝像頭的方式是通過mediaStream和track變量，只不過，track只能關閉Chrome瀏覽器中的攝像頭，這也是Chrome 45版本以上關閉攝像頭的方式。

5. 集成到AndularJs

事實上，前面所說的都是在AndularJs中實現(xiàn)的，當然，這里只是實現(xiàn)了拍照并返回拍照數(shù)據(jù)，我們想要在其他地方也使用，就需要將這部分獨立出來，這里我們用到了AngularJs中的service機制，將這部分單獨做成一個service并在項目中注入，然后就可以在其他地方調(diào)用了。

service注冊:

app().registerService("h5TakePhotoService", function ($q, $uibModal) {

this.photo = function () {

var deferred = $q.defer();

require([config.server + "/com/controllers/photo.js"], function () {

$uibModal.open({

templateUrl: config.server + "/com/views/modal_take_photo.html",

controller: "photoModalController",

windowClass: "modal-photo"

}).result.then(function (e) {

deferred.resolve(e);

});

});

return deferred.promise;

}

});

調(diào)用方式：

$scope.takePhoto = function () {

h5TakePhotoService.photo().then(function (res) {

if (res != null res != "") {

$scope.myImage = res;

}

});

}

h5TakePhotoService為控制器中注入的拍照service對象，最后處理返回的圖像數(shù)據(jù)，設置數(shù)據(jù)顯示到界面上。

6. 兼容問題

主要存在Chrome瀏覽器中，本地測試時，Chrome瀏覽器中能夠正常使用，但是部署到服務器后就不能正常使用，報錯消息為 [object NavigatorUserMediaError]，這是因為Chrome瀏覽器在使用攝像頭時只支持安全源訪問，所以只能通過https訪問才能正常使用。

最后需要說一下，測試時只能通過訪問才能使用，不能通過方式訪問，即我們需要將代碼部署才能訪問，可以在Visual Studio、 java web、php中完成。

現(xiàn)在HTML5可以調(diào)用攝像頭錄像嗎

可以的

input type="file" accept="video/*;capture=camcorder"

input type="file" accept="audio/*;capture=microphone"

input type="file" accept="image/*;capture=camera"直接調(diào)用相機

input type="file" accept="image/*" /調(diào)用相機 圖片或者相冊

還是要根據(jù)手機的類型來說，有些手機只能調(diào)相機，有些手機只能調(diào)相冊，或者兩者都行。

怎么用html5或js調(diào)用手機的攝像頭拍照上傳以及調(diào)用手機相冊選取照片

1、實現(xiàn)頭的方法代碼。

2、編寫CSS樣式的方法代碼。

3、html上傳代碼。

4、JS處理方法代碼。

5、測試結果如下。

注意事項：

JavaScript是一種網(wǎng)絡腳本語言，在web應用開發(fā)中得到了廣泛的應用，它經(jīng)常被用來為網(wǎng)頁添加各種動態(tài)功能，為用戶提供更加流暢美觀的瀏覽效果，通常JavaScript腳本被嵌入到HTML中來實現(xiàn)自己的功能。

當前文章：html5調(diào)用相機,h5調(diào)用相機拍照
網(wǎng)站鏈接：http://chinadenli.net/article21/dsgeicd.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供面包屑導航、ChatGPT、營銷型網(wǎng)站建設、全網(wǎng)營銷推廣、App開發(fā)、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)