當前位置:首頁 » 網頁前端 » web手機攝像頭
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

web手機攝像頭

發布時間: 2022-10-04 00:10:25

『壹』 web camera是什麼

web camera:網路攝像頭

『貳』 如何遠程式控制制手機攝像頭

只需要安裝一個軟體,即可實現你通過網頁遠程式控制制手機攝像頭。

在手機上下載安裝AirDroidApp,並登錄AirDroid帳號

訪問AirDroid個人版 Web端,並登錄同一個AirDroid帳號

點擊相機圖標建立連接。

web網頁遠程式控制制攝像頭方式:

『叄』 手機web頁面怎麼調用攝像頭執行掃描,獲取數據

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

『肆』 如何html5在瀏覽器里訪問手機後置攝像頭

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

<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML5GetUserMediaDemo</title>
<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0"/>
</head>
<body>
<inputtype="button"title="開啟攝像頭"value="開啟攝像頭"onclick="getMedia();"/><br/>
<videoheight="120px"autoplay="autoplay"></video><hr/>
<inputtype="button"title="拍照"value="拍照"onclick="getPhoto();"/><br/>
<canvasid="canvas1"height="120px"></canvas><hr/>
<inputtype="button"title="視頻"value="視頻"onclick="getVedio();"/><br/>
<canvasid="canvas2"height="120px"></canvas>

<scripttype="text/javascript">
varvideo=document.querySelector('video');
varaudio,audioType;

varcanvas1=document.getElementById('canvas1');
varcontext1=canvas1.getContext('2d');

varcanvas2=document.getElementById('canvas2');
varcontext2=canvas2.getContext('2d');

navigator.getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia;
window.URL=window.URL||window.webkitURL||window.mozURL||window.msURL;

varexArray=[];//存儲設備源ID
MediaStreamTrack.getSources(function(sourceInfos){
for(vari=0;i!=sourceInfos.length;++i){
varsourceInfo=sourceInfos[i];
//這里會遍歷audio,video,所以要加以區分
if(sourceInfo.kind==='video'){
exArray.push(sourceInfo.id);
}
}
});

functiongetMedia(){
if(navigator.getUserMedia){
navigator.getUserMedia({
'video':{
'optional':[{
'sourceId':exArray[1]//0為前置攝像頭,1為後置
}]
},
'audio':true
},successFunc,errorFunc);//success是獲取成功的<ahref="https://www..com/s?wd=%E5%9B%9E%E8%B0%83%E5%87%BD%E6%95%B0&tn=44039180_cpr&fenlei=-bIi4WUvYETgN-"target="_blank"class="-highlight">回調函數</a>
}
else{
alert('Nativedevicemediastreaming(getUserMedia)notsupportedinthisbrowser.');
}
}

functionsuccessFunc(stream){
//alert('Succeedtogetmedia!');
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=newAudio();
audioType=getAudioType(audio);
if(audioType){
audio.src='polaroid.'+audioType;
audio.play();
}
}
functionerrorFunc(e){
alert('Error!'+e);
}


//將視頻幀繪制到Canvas對象上,Canvas每60ms切換幀,形成肉眼視頻效果
functiondrawVideoAtCanvas(video,context){
window.setInterval(function(){
context.drawImage(video,0,0,90,120);
},60);
}

//獲取音頻格式
functiongetAudioType(element){
if(element.canPlayType){
if(element.canPlayType('audio/mp4;codecs="mp4a.40.5"')!==''){
return('aac');
}elseif(element.canPlayType('audio/ogg;codecs="vorbis"')!==''){
return("ogg");
}
}
returnfalse;
}

//vedio播放時觸發,繪制vedio幀圖像到canvas
//video.addEventListener('play',function(){
//drawVideoAtCanvas(video,context2);
//},false);

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

//視頻
functiongetVedio(){
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支持訪問後置攝像頭的

『伍』 怎樣開啟對方手機攝像頭

手機遠程監控區域網內攝像頭的方法(以海康威視硬攝像頭為例):

1、首先把網路攝像機安裝好,通過網線連接到交換機,網路攝像機連接的好處就是不需要每條網線都必須要統一在一個交換機上。

比如:需要在遠處裝一個攝像機,如果要裝十個攝像機那麼傳統攝像機是必須每條同軸線都一定要同時插在一個錄像機上才能正常使用但網路攝像機可以多添加一個交換機,把那有十根網線的交換機變成只需要通過一條網線就拉到另一隻交換機上就可以正常使用,這樣不用大費周章,節省了很多人工。

2、用網線通過電腦連接到交換機上,就可以看到在線攝像了,也可以通過Wifi無線網路連接IPAD,筆記本,首先看你的此款攝像機是否支持手機觀看,如果支持而且此款IPCAM已經接入了公網,並且手機是智能手機那麼可以在線遠程監控了,也可以通過NVR錄像機連接交換機。

使用顯示屏連接上錄像機就可以隨時看到當場監控錄下的畫面圖像,遠程用戶則可以通過登錄IPC的域名對IPC進行觀看、控制、管理和錄像。遠程用戶登錄IPC都可通過網頁瀏覽器(IE)和相應的視頻集中管理軟體來實現,操作非常的方便,這樣就可以正常的使用網路攝像機了。

相關介紹:

攝像頭(CAMERA或WEBCAM)又稱為電腦相機、電腦眼、電子眼等,是一種視頻輸入設備,被廣泛的運用於視頻會議,遠程醫療及實時監控等方面。普通的人也可以彼此通過攝像頭在網路進行有影像、有聲音的交談和溝通。另外,人們還可以將其用於當前各種流行的數碼影像,影音處理。

攝像頭可分為數字攝像頭和模擬攝像頭兩大類。數字攝像頭可以將視頻採集設備產生的模擬視頻信號轉換成數字信號,進而將其儲存在計算機里。模擬攝像頭捕捉到的視頻信號必須經過特定的視頻捕捉卡將模擬信號轉換成數字模式,並加以壓縮後才可以轉換到計算機上運用。

『陸』 h5製作的web app 怎麼樣啟用手機攝像頭進行拍照

web app獲取不到手機裡面的底層功能,比如說打開攝像頭、打開相冊、獲取我們的地理位置信息、支付...都是做不到的,那如果你想開發一款app 需要用到原生底層能力的話,web app是滿足不了的

『柒』 h5製作的web app 怎麼樣啟用手機攝像頭進行拍照

web
app獲取不到手機裡面的底層功能,比如說打開攝像頭、打開相冊、獲取咱們的地理位置信息、支付...都是做不到的,那如果想開發一款app
需要用到原生底能力的話,web
app是滿足不了的

『捌』 手機web頁面怎麼調用攝像頭執行掃描,獲取數據

可以用手機中的微信掃一掃或是下載一些其它的掃描二維碼軟體。