cms調用手機攝像頭_手機網頁（html5）如何調用手機的攝像頭和相冊

1、html5怎樣調用手機攝像頭或者相冊?

HTML5技術支持WebApp在手機上拍照，顯示在頁面上並上傳到伺服器。這是手機微博應用中常見的功能，當然你也可以在其它類型應用中適當使用此技術。
1、視頻流
HTML5 的 The Media Capture（媒體捕捉） API 提供了對攝像頭的可編程訪問，用戶可以直接用 getUserMedia（請注意目前僅Chrome和Opera支持）獲得攝像頭提供的視頻流。我們需要做的是添加一個HTML5 的 Video 標簽，並將從攝像頭獲得的視頻作為這個標簽的輸入來源。
<video id=」video」 autoplay=」"></video>
<script>
var video_element=document.getElementById(『video』);
if(navigator.getUserMedia){ // opera應使用opera.getUserMedianow
navigator.getUserMedia(『video』,success,error); //success是回調函數,當然你也可以直接在此寫一個匿名函數
}
function success(stream){
video_element.src=stream;
}
</script>
此時，video 標簽內將顯示動態的攝像視頻流。下面需要進行拍照了。
2、拍照
拍照是採用HTML5的Canvas功能，實時捕獲Video標簽的內容，因為Video元素可以作為Canvas圖像的輸入，所以這一點很好實現。主要代碼如下：

var canvas=document.createElement(『canvas』); //動態創建畫布對象
var ctx=canvas.getContext(』2d』);
var cw=vw,ch=vh;
ctx.fillStyle=」#ffffff」;
ctx.fillRect(0,0,cw,ch);
ctx.drawImage(video_element,0,0,cw,ch,0,0,vw,vh); //將video對象內指定的區域捕捉繪制到畫布上指定的區域，可進行不等大不等位的繪制。
document.body.append(canvas);

3、圖片獲取
從Canvas獲取圖片數據的核心思路是用canvas的toDataURL將Canvas的數據轉換為base64位編碼的PNG圖像，類似於「data:image/png;base64,xxxxx」的格式。
var imgData=canvas.toDataURL(「image/png」);

這樣，imgData變數就存儲了一長串的字元數據內容，表示的就是一個PNG圖像的base64編碼。因為真正的圖像數據是base64編碼逗號之後的部分，所以要讓實際伺服器接收的圖像數據應該是這部分，我們可以用兩種辦法來獲取。
第一種：是在前端截取22位以後的字元串作為圖像數據，例如：
var data=imgData.substr(22);

如果要在上傳前獲取圖片的大小，可以使用：
var length=atob(data).length; //atob 可解碼用base-64解碼的字串

第二種：是在後端獲取傳輸的數據後用後台語言截取22位以後的字元串（也就是在前台略過上面這步直接上傳）。例如PHP里：
$image=base64_decode(str_replace(『data:image/jpeg;base64,』,」,$data);

4、圖片上傳
在前端可以使用Ajax將上面獲得的圖片數據上傳到後台腳本。例如使用jQuery時可以用：
$.post(『upload.php』,{『data』:data});

在後台我們用PHP腳本接收數據並存儲為圖片。
function convert_data($data){
$image=base64_decode(str_replace(『data:image/jpeg;base64,』,」,$data);
save_to_file($image);
}
function save_to_file($image){
$fp=fopen($filename,』w');
fwrite($fp,$image);
fclose($fp);
}

以上的解決方案不僅能用於Web App拍照上傳，也可以通過Canvas的編輯功能函數提供圖片編輯，例如裁剪、上色、塗鴉、圈點等功能，然後把用戶編輯完的圖片上傳保存到伺服器上。
在還在不斷補充修正的HTML5的驅動下，Web App與Native App之間的距離將越來越小。在可預見的不遠的未來，越來越多老的和新的開發項目必將會遷移到WEB應用上來。
相關規范：
The MediaCapture API：http://www.w3.org/TR/media-capture-api/
Canvas：http://dev.w3.org/html5/2dcontext/

2、如何調用手機攝像頭攝像

手機相機使用技巧可以參考以下介紹：
1.掌握光線及模式調節，盡量避免在逆光的情況下拍攝，有的手機支持閃光燈功能可以有效補充光線，不過有效距離比較短，適合近距離拍攝時使用。
2.協調手的把持度及拍攝姿勢，在拍攝時，右手握機對准拍攝對象，然後用左手托住右手，保持平穩。
3.注意手機與景物的平行。
4.部分手機支持許多模式拍攝，可以根據具體拍攝場景進行模式選擇。

3、win7怎麼調用手機攝像頭

用一款叫mobiola_webcam_3_0_11_wl_s60v3的軟體，該軟體分為手機客戶端和電腦客戶端，可以通過數據線，藍牙，WIFI將手機的攝像頭和電腦連接，特別是用無線的方式可以當個無線攝像頭。

只要打開手機客戶端，在打開電腦客戶端，手機客戶端就可以開始連接了。通過該軟體，可以在電腦上通過主攝像頭，次攝像頭，查看手機屏幕。

4、如何通過html5調用手機攝像頭?

HTML5 The Media Capture API提供了對攝像頭的可編程訪問，用戶可以直接用getUserMedia獲得攝像頭提供的視頻流。但實際上用html5調用手機攝像頭存在很多問題：
1）谷歌的發布的Chrome到了21版本後，才新增了一個用於高質量視頻音頻通訊的getUserMedia API，該API允許Web應用程序訪問攝像頭和麥克風,其他手機瀏覽器只有opera支持html5調用本地拍照功能
2）兩個瀏覽器均不支持訪問多個攝像頭：chrome不支持訪問後置攝像頭，pera支持訪問後置攝像頭的

android手機，瀏覽器chrome32版本下實現了瀏覽器調用設備攝像頭進行拍照。主要分3個步驟來完成:
1）獲取視頻流
添加一個HTML5的Video標簽，並將從攝像頭獲得視頻作為這個標簽的輸入來源

2）拍照
關於拍照功能，採用HTML5的Canvas實時捕獲Video標簽的內容，Video元素能作為Canvas圖像的輸入

    function scamera() {
                var videoElement = document.getElementByIdx_x_x('video');
                var canvasObj = document.getElementByIdx_x_x('canvas1');
                var context1 = canvasObj.getContext('2d');
                context1.fillStyle = "#ffffff";
                context1.fillRect(0, 0, 320, 240);
                context1.drawImage(videoElement, 0, 0, 320, 240);
            }
3）圖片獲取

要從Canvas獲取圖片數據，其核心思路是用canvas的toDataURL將Canvas的數據轉換為base64位編碼的PNG圖像

var imgData=canvas.toDataURL(「image/png」);

imgData格式如下：」data:image/png;base64,xxxxx「
真正圖像數據是base64編碼逗號之後的部分

5、手機APP上的攝像頭能不能在電腦端使用

手機APP是一個軟體，攝像頭是一個硬體，一個軟體上有個硬體？是怎麼回事呢？

6、html5怎麼調用手機攝像頭並且掃描二維碼

參考，需要載入cordova.js 方法：
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
pictureSource = navigator.camera.PictureSourceType;
destinationType = navigator.camera.DestinationType;
} //相冊
function fromCamera() {
var source = pictureSource.PHOTOLIBRARY; navigator.camera.getPicture(function (imageData) {
setimg(imageData);
}, function (message) {
if (source == pictureSource.CAMERA) alert('載入照相機出錯!' + message); else alert('載入相冊出錯!' + message);
}, { quality: 50, destinationType: destinationType.FILE_URI, sourceType: source }); } //拍照 function EditImgPz() { navigator.camera.getPicture(function (imageData) { setimg(imageData);
}, function (message) { alert(message);
}, { quality: 50, destinationType: navigator.camera.DestinationType.FILE_URI, sourceType: Camera.PictureSourceType.CAMERA, allowEdit: true, encodingType: Camera.EncodingType.JPEG, popoverOptions: CameraPopoverOptions, saveToPhotoAlbum: true }); }

7、html5如何調用手機攝像頭,實現拍照,拍視頻實現上傳功能

html5提供了 navigator.getUserMedia介面使用設備攝像頭，chrome28上測試已經可用，手機端瀏覽器測試發現只有opera瀏覽器可用。
瀏覽器未完善之前可以使用PhoneGap完成，它提供了 navigator.camera.getPicture介面，使用js可以方便調用設備攝像頭。

8、html5怎樣調用手機攝像頭或者相冊

只需要在Html5代碼中加入下列代碼就可以調用手機攝像頭或者相冊。

<input type="file" accept="image/*;capture=camera">輸入此行代碼可以調用相機。

<input type="file" accept="image/*" />選擇此行代碼刻意選擇調用相機，圖片或者相冊。

(8)cms調用手機攝像頭擴展資料:

一個網頁對應多個HTML文件，超文本標記語言文件以.htm（磁碟操作系統DOS限制的外語縮寫）為擴展名或.html（外語縮寫）為擴展名。可以使用任何能夠生成TXT類型源文件的文本編輯器來產生超文本標記語言文件，只用修改文件後綴即可。

標準的超文本標記語言文件都具有一個基本的整體結構，標記一般都是成對出現（部分標記除外例如：<br/>），即超文本標記語言文件的開頭與結尾標志和超文本標記語言的頭部與實體兩大部分。有三個雙標記符用於頁面整體結構的確認。

標記符<html>，說明該文件是用超文本標記語言（本標簽的中文全稱）來描述的，它是文件的開頭;而</html>，則表示該文件的結尾，它們是超文本標記語言文件的開始標記和結尾標記。

頭部內容

標記符< html>：說明該文件是用超文本標記語言來描述的，它是文件的開頭，而</html>則表示該文件的結尾，它們是超文本標記語言文件的開始標記和結尾標記。

<head></head>：這2個標記符分別表示頭部信息的開始和結尾。頭部中包含的標記是頁面的標題、序言、說明等內容，它本身不作為內容來顯示，但影響網頁顯示的效果。

頭部中最常用的標記符是標題標記符和meta標記符，其中標題標記符用於定義網頁的標題，它的內容顯示在網頁窗口的標題欄中，網頁標題可被瀏覽器用做書簽和收藏清單。

9、手機網頁（html5）如何調用手機的攝像頭和相冊

|||<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>web RTC 測試</title>
<style>
.booth {
width:400px;

background:#ccc;
border: 10px solid #ddd;
margin: 0 auto;
}
</style>
</head>
<body>
<div>
<video id="video" width="400" height="300"></video>
<button id='tack'> snap shot</button>
<canvas id='canvas' width='400' height='300'></canvas>
<img id='img' src=''>
</div>

<script>
var video = document.getElementById('video'),
canvas = document.getElementById('canvas'),
snap = document.getElementById('tack'),
img = document.getElementById('img'),
vendorUrl = window.URL || window.webkitURL;

//媒體對象
navigator.getMedia = navigator.getUserMedia ||
navagator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
navigator.getMedia({
video: true, //使用攝像頭對象
audio: false //不適用音頻
}, function(strem){
console.log(strem);
video.src = vendorUrl.createObjectURL(strem);
video.play();
}, function(error) {
//error.code
console.log(error);
});
snap.addEventListener('click', function(){

//繪制canvas圖形
canvas.getContext('2d').drawImage(video, 0, 0, 400, 300);

//把canvas圖像轉為img圖片
img.src = canvas.toDataURL("image/png");

})
</script>
</body>
</html>

10、html5或者JS怎樣調用手機攝像頭或者相冊？

你給的網頁用的是 <input accept="image/*" type="file">，在IOS端點擊時會提示選擇圖片或相機，安卓端要看瀏覽器對這兩個屬性的優化，部分瀏覽器會直接跳轉到資源管理器，優化做得好的可以直接提示選擇相冊或相機。

導航:首頁 > 萬維百科 > cms調用手機攝像頭

cms調用手機攝像頭

與cms調用手機攝像頭相關的知識