網站調用手機攝像頭源碼_安卓手機如何在網頁上調用手機攝像頭

『壹』手機網頁（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>

『貳』 html5調用手機攝像頭，實現拍照上傳功能

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

『叄』打開網站調用攝像頭實現視頻相關代碼

這么犀利的功能只給10分。你還可以小氣點嗎用as3調用攝像頭，代碼如下：package {
import flash.display.Sprite;
import flash.text.*;
import flash.media.Camera;
import flash.events.StatusEvent;
import flash.events.ActivityEvent;
import flash.media.Video; public class CameraEx extends Sprite
{
private var label:TextField;
private var camera:Camera;

public function CameraEx()
{
label=addLabel("CameraEx");

camera=Camera.getCamera();

if(camera!=null){
camera.addEventListener(StatusEvent.STATUS,statusHandler);
camera.addEventListener(ActivityEvent.ACTIVITY,activityHandler);

var video:Video=new Video(200,200);
video.attachCamera(camera);
addChild(video);
video.x=20;
video.y=20;
}
else{
label.text="不能使用";
}
}

private function statusHandler(evt:StatusEvent):void{
if(camera.muted) label.text="不能使用";
}

private function activityHandler(evt:ActivityEvent):void{
if(evt.activating){
label.text="檢測開始";
}
else{
label.text="檢測停止";
}
}

private function addLabel(text:String):TextField{
var label:TextField=new TextField();
label.autoSize=TextFieldAutoSize.LEFT;
label.text=text;
addChild(label);
return label;
}
}
}網上DOWN的沒環境。自己試試。

『肆』如何通過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標簽，並將從攝像頭獲得視頻作為這個標簽的輸入來源

java">varvideo=document.getElementByIdx_x_x("video");
navigator.getUserMedia({video:true},function(stream){
video.src=window.webkitURL.createObjectURL(stream);
},function(error){alert(error);});

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

functionscamera(){
varvideoElement=document.getElementByIdx_x_x('video');
varcanvasObj=document.getElementByIdx_x_x('canvas1');
varcontext1=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圖像

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

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

『伍』 html5怎樣調用手機攝像頭或者相冊

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

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

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

(5)網站調用手機攝像頭源碼擴展閱讀:

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

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

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

頭部內容

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

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

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

『陸』安卓手機如何在網頁上調用手機攝像頭

根據你描述，這個功能是flash來實現的
只需根據提示安裝flash即可
自己是沒法增加這種功能的

『柒』 html5或者JS怎樣調用手機攝像頭或者相冊

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

『捌』如何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移動端頁面上調用手機攝像頭掃描二維碼並獲取二維碼信息代碼

html5移動端調用手機攝像頭掃描二維碼並獲取二維碼信息代碼如下：

[html]view plain

<!DOCTYPEhtml>

<title>HTML5codeReader</title>

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">

</head>

<styletype="text/css">

html,body{height:100%;width:100%;text-align:center;}

</style>

<scriptsrc="jquery-1.9.1.js"></script>

//這段代主要是獲取攝像頭的視頻流並顯示在Video簽中

varcanvas=null,context=null,video=null;

window.addEventListener("DOMContentLoaded",function()

{

try{

canvas=document.getElementById("canvas");

context=canvas.getContext("2d");

video=document.getElementById("video");

varvideoObj={"video":true,audio:false},

flag=true,

MediaErr=function(error)

{

flag=false;

if(error.PERMISSION_DENIED)

{

alert('用戶拒絕了瀏覽器請求媒體的許可權','提示');

}elseif(error.NOT_SUPPORTED_ERROR){

alert('對不起，您的瀏覽器不支持拍照功能，請使用其他瀏覽器','提示');

}elseif(error.MANDATORY_UNSATISFIED_ERROR){

alert('指定的媒體類型未接收到媒體流','提示');

}else{

alert('系統未能獲取到攝像頭，請確保攝像頭已正確安裝。或嘗試刷新頁面，重試','提示');

}

};

//獲取媒體的兼容代碼，目前只支持（Firefox,Chrome,Opera）

if(navigator.getUserMedia)

{

//qq瀏覽器不支持

if(navigator.userAgent.indexOf('MQQBrowser')>-1){

alert('對不起，您的瀏覽器不支持拍照功能，請使用其他瀏覽器','提示');

returnfalse;

}

navigator.getUserMedia(videoObj,function(stream){

video.src=stream;

video.play();

},MediaErr);

}

elseif(navigator.webkitGetUserMedia)

{

navigator.webkitGetUserMedia(videoObj,function(stream)

{

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

video.play();

},MediaErr);

}

elseif(navigator.mozGetUserMedia)

{

navigator.mozGetUserMedia(videoObj,function(stream){

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

video.play();

},MediaErr);

}

elseif(navigator.msGetUserMedia)

{

navigator.msGetUserMedia(videoObj,function(stream){

$(document).scrollTop($(window).height());

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

video.play();

},MediaErr);

}else{

alert('對不起，您的瀏覽器不支持拍照功能，請使用其他瀏覽器');

returnfalse;

}

if(flag){

alert('為了獲得更准確的測試結果，請盡量將二維碼置於框中，然後進行拍攝、掃描。請確保瀏覽器有許可權使用攝像功能');

}

//這個是拍照按鈕的事件，

$("#snap").click(function(){startPat();}).show();

}catch(e){

printHtml("瀏覽器不支持HTML5CANVAS");

}

},false);

//列印內容到頁面

functionprintHtml(content){

$(window.document.body).append(content+"<br/>");

}

//開始拍照

functionstartPat(){

setTimeout(function(){//防止調用過快

if(context)

{

context.drawImage(video,0,0,320,320);

CatchCode();

}

},200);

}

//抓屏獲取圖像流，並上傳到伺服器

functionCatchCode(){

if(canvas!=null)

{

//以下開始編數據

varimgData=canvas.toDataURL();

//將圖像轉換為base64數據

varbase64Data=imgData;//.substr(22);//在前端截取22位之後的字元串作為圖像數據

//開始非同步上

$.post("saveimg.php",{"img":base64Data},function(result)

{

printHtml("解析結果："+result.data);

if(result.status=="success"&&result.data!="")

{

printHtml("解析結果成功！");

}else{

startPat();//如果沒有解析出來則重新抓拍解析

}

},"json");

}

</script>

<body>

<divid="support"></div>

<divid="contentHolder">

<videoid="video"width="320"height="320"autoplay>

</video>

<canvasstyle="display:none;background-color:#F00;"id="canvas"width="320"height="320">

</canvas><br/>

<buttonid="snap"style="display:none;height:50px;width:120px;">開始掃描</button>

</div>

</body></html>

導航:首頁 > 源碼編譯 > 網站調用手機攝像頭源碼

網站調用手機攝像頭源碼

與網站調用手機攝像頭源碼相關的資料