JS調用本地攝影機功能步驟詳解
這次帶給大家JS呼叫本地攝影機功能步驟詳解，JS調用本地攝影機功能的注意事項有哪些，下面就是實戰案例，一起來看一下。
今天學習了一下js調用本地攝像頭，其實是實現不是很麻煩，下面是程式碼部分，連接上Tomcat伺服器，然後再到網頁上打開即可以看到效果了。 。快來玩一下吧！
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style>
video {
border: 1px solid #ccc;
display: block;
margin: 0 0 20px 0;
float:left;
}
canvas {
margin-top: 20px;
border: 1px solid #ccc;
display: block;
}
</style>
</head>
<body>
<video width="640" height="480" id="myVideo"></video>
<canvas width="640" height="480" id="myCanvas"></canvas>
<button id="myButton">截图</button>
<button id="myButton2">预览</button>
<button id="myButton3">
<a download="video.png">另存为</a>
</button>
</body>
<script>
window.addEventListener('DOMContentLoaded',function(){
var cobj=document.getElementById('myCanvas').getContext('2d');
var vobj=document.getElementById('myVideo');
getUserMedia({video:true},function(stream){
vobj.src=stream;
vobj.play();
},function(){});
document.getElementById('myButton').addEventListener('click',function(){
cobj.drawImage(vobj,0,0,640,480);
document.getElementById('myButton3').children[0].href=cobj.canvas.toDataURL("image/png");
},false);
document.getElementById('myButton2').addEventListener('click',function(){
window.open(cobj.canvas.toDataURL("image/png"),'_blank');
},false);
},false);
function getUserMedia(obj,success,error){
if(navigator.getUserMedia){
getUserMedia=function(obj,success,error){
navigator.getUserMedia(obj,function(stream){
success(stream);
},error);
}
}else if(navigator.webkitGetUserMedia){
getUserMedia=function(obj,success,error){
navigator.webkitGetUserMedia(obj,function(stream){
var _URL=window.URL || window.webkitURL;
success(_URL.createObjectURL(stream));
},error);
}
}else if(navigator.mozGetUserMedia){
getUserMedia=function(obj,success,error){
navigator.mozGetUserMedia(obj,function(stream){
success(window.URL.createObjectURL(stream));
},error);
}
}else{
return false;
}
return getUserMedia(obj,success,error);
}
</script>
</html>我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
#以上是JS調用本地攝影機功能步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
如何使用WebSocket和JavaScript實現線上語音辨識系統
Dec 17, 2023 pm 02:54 PM
如何使用WebSocket和JavaScript實現線上語音辨識系統引言：隨著科技的不斷發展，語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統，具備了低延遲、即時性和跨平台的特點，成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系
如何解決Windows Hello不支援的相機問題
Jan 05, 2024 pm 05:38 PM
在使用windowshello中，找不到支援的鏡頭，常見的原因是使用的攝影機不支援人臉辨識、攝影機驅動安裝不正確導致的，那麼接下來讓我們一起去看一下怎麼去設定。 windowshello找不到支援的攝影機教學：原因一：攝影機驅動安裝不對1、一般來說Win10系統可以自動為大部分攝影機安裝驅動程序，如下，插上攝影機之後會有通知;2、這時我們打開設備管理器看看，攝影機驅動是否安裝好，沒有的話就需要手動操作一下。 WIN+X，然後選擇裝置管理員;3、裝置管理員視窗中，展開照相機選項，會顯示相機的驅動型號
WebSocket與JavaScript：實現即時監控系統的關鍵技術
Dec 17, 2023 pm 05:30 PM
WebSocket與JavaScript：實現即時監控系統的關鍵技術引言：隨著互聯網技術的快速發展，即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用，並給出程式碼範例，詳細解釋其實作原理。一、WebSocket技
Win11攝影機問題解決方案：解決Win11攝影機無法使用的四種方法
Jan 29, 2024 pm 12:03 PM
攝影機是我們在使用電腦的時候可以幫助我們進行視訊聊天的工具，但是也有不少的用戶們在使用win11系統的時候發現自己的攝影機不能使用，那麼這是怎麼回事？使用者可以進入到疑難排解下來進行設定或是檢查相機的權限來進行操作就可以了。以下就讓本站來為用戶們來仔細的介紹一下Win11攝影機無法使用的四種解決方法吧。 Win11相機無法使用的四種解決方法解決方法一、使用內置疑難解答1、按+開啟設置，然後點選系統標籤中的疑難排解。 WindowsI4、依照螢幕上的指示完成故障排除程序並進行建議的變更。 5.使用
如何利用JavaScript和WebSocket實現即時線上點餐系統
Dec 17, 2023 pm 12:09 PM
如何利用JavaScript和WebSocket實現即時線上點餐系統介紹：隨著網路的普及和技術的進步，越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統，我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議，可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中，當使用者選擇菜餚並下訂單
如何打開攝影機 教你Win7攝影機怎麼打開
Jan 11, 2024 pm 07:48 PM
相信有用戶遇到這麼一個問題了，win7系統卻找不到攝像頭快捷在哪，只能從程序裡面調出攝像頭功能，不知道內情的人還以為是攝像頭的驅動沒有安裝呢，因此給有需要的win7用戶在使用相機的時候製造了不小的麻煩。下面，小編就來帶了Win7攝影機的開啟教學給大家。使用筆記型電腦的用戶都曉得筆記型自有攝影機功能，不像桌上型電腦需要連接攝影機，在筆記型win7系統中直接開啟攝影機就可以使用，非常方便。不過有用戶一般的情況下都沒有去摸索，嘗試很多方法還是失敗，下面，小編就來跟大家說說Win7攝像頭的打開方法
汽水音樂本地音樂怎麼添加
Feb 23, 2024 pm 07:13 PM
汽水音樂本地音樂怎麼添加?汽水音樂APP中可以添加自己喜愛的本地音樂，但是多數的小伙伴不知道如何添加本地音樂，接下來就是小編為用戶帶來的汽水音樂本地音樂添加方法圖文教程，有興趣的用戶快來一起看看吧！汽水音樂使用教學汽水音樂本地音樂怎麼添加1、先打開汽水音樂APP，主頁最下方【音樂】功能專區點擊;2、之後進入到播放頁面，點擊右下角【三個點】圖標;3、最後下方展開功能欄，選擇其中【下載】按鈕即可新增至本機音樂。
win10如何開啟相機並進行拍照操作
Jan 16, 2024 pm 10:06 PM
如果我們手邊沒有手機，只有電腦，但是需要拍照就可以使用電腦自帶的相機來拍照，那麼win10相機怎麼打開拍照呢，其實只要下載一個相機app就可以了。 win10相機怎麼打開拍照：1、首先我們使用快捷鍵「Win+i」開啟設定。 2.開啟後，進入其中的「隱私」設定。 3.然後在「相機」應用程式權限下把存取權限開啟。 4.開啟後，我們只要打開「相機」應用程式。 （如果沒有的話，可以去微軟商店下載一個）5、打開後，如果電腦自帶攝像頭或安裝了外接攝像頭就能拍照了。 （因為我們沒有安裝攝影機所以無法示範）
