在 Web 開發過程中,有時需要訪問用戶的設備來獲取特定的信息,比如攝像頭。jQuery 提供了一種簡單的方式來訪問手機攝像頭,接下來將介紹如何實現。
首先,需要先獲取到頁面中的視頻元素和按鈕元素,并綁定點擊事件。
<video id="videoElement" width="640" height="480" autoplay=""></video>
<button id="startButton">開始</button>
<script>
$(function() {
var video = document.querySelector("#videoElement");
// 點擊按鈕事件
$("#startButton").click(function() {
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
video.srcObject = stream;
video.play();
});
}
});
});
</script>
以上代碼中,通過 navigator.mediaDevices.getUserMedia() 方法請求訪問攝像頭,并將返回的流對象設置為 video 元素的 srcObject 屬性。在調用 play() 方法后,視頻就開始播放了。
接下來,需要將視頻中的畫面截圖并顯示在畫布上,需要用到 canvas 元素和按鈕元素。
<video id="videoElement" width="640" height="480" autoplay=""></video>
<canvas id="canvasElement" style="display:none;"></canvas>
<button id="startButton">開始</button>
<button id="captureButton">截圖</button>
<script>
$(function() {
var video = document.querySelector("#videoElement");
var canvas = document.querySelector("#canvasElement");
var context = canvas.getContext("2d");
// 點擊開始按鈕事件
$("#startButton").click(function() {
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
video.srcObject = stream;
video.play();
});
}
});
// 點擊截圖按鈕事件
$("#captureButton").click(function() {
context.drawImage(video, 0, 0, canvas.width, canvas.height);
canvas.style.display = "block";
});
});
</script>
在以上代碼中,可以看到增加了 canvas 元素和 context 對象,用來繪制視頻畫面。在點擊截圖按鈕時,會通過 drawImage() 方法將視頻畫面繪制在 canvas 上,并設置 canvas 元素的顯示。
以上就是使用 jQuery 訪問手機攝像頭的簡單實現方式。需要注意的是,由于不同瀏覽器的支持程度不同,可能需要對代碼進行適當的修改。
上一篇css div設置