手把手教你如何實現拍照功能
阿新 • • 發佈:2018-12-11
實現手機拍照功能,純JS書寫
First:
- 先上圖為主,再做詳細講解:
需要注意的是這裡的攝像頭是主要是通過瀏覽器中的一個叫做Navigator屬性在JS程式碼執行時開啟頁面自動開啟
不明白?直接上程式碼!
// HTML 5 的getUserMedia API提供了訪問媒體的能力, 基於該特性, 開發者可以不依賴任何瀏覽器外掛下去訪問視訊和音訊等裝置.如navigator.mediaDevices.getUserMedia //不同瀏覽器的api: //訪問使用者媒體裝置的相容方法 function getUserMedia(constraints, success, error) { if (navigator.mediaDevices.getUserMedia) { //最新的標準API navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error); } else if (navigator.webkitGetUserMedia) { //webkit核心瀏覽器 navigator.webkitGetUserMedia(constraints, success, error) } else if (navigator.mozGetUserMedia) { //firfox瀏覽器 navigator.mozGetUserMedia(constraints, success, error); } else if (navigator.getUserMedia) { //舊版API navigator.getUserMedia(constraints, success, error); } } if (navigator.mediaDevices || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia) { getUserMedia({ video: true, audio: true, }, (stream) => { console.log(stream) }, (err) => { console.log(err) }) }
以上就是程式碼的具體呈現,大部分已加入功能註釋,很容易理解,如果還不理解只能去先了解下navigator屬性了1.程式碼的前半段getUserMedia函式中的操作是為了實現相容,很好理解因為必須保證自己的程式碼可以在很多瀏覽器是無差別執行2.程式碼的第二部分IF語句中則是為了呼叫getUserMedia函式並且引數是一個物件加兩個函式的方式,其中物件的話就是媒體標籤 video和audio 兩個為TRUE說明都要開啟 緊接著就是兩個函式一個是成功的回撥其中實參為stream可以有些同學對這個引數不怎麼理解不怕 一會截圖送上, 還有就是失敗的回撥,在此不做過多講解。
- 以下是關於Stream的資訊具體如圖中所示:
- 相信很多小夥伴已經看見了 我console.log打印出後溼一個叫做MediaStream的物件
- 接下來,進入第二步
Second:建立兩個標籤當然是我們的video 和 button按鈕咯具體程式碼如下顯示:
<video src="" id="video" controls autoplay></video>
<button id="btn">拍照</button>
- 光有標籤肯定是不行的接下來是具體的JS程式碼的實現:
function success(stream) { console.log(stream) let $video = document.querySelector("#video") let url = window.URL.createObjectURL(stream) console.log(url) $video.src = url // $video.srcObject = stream } document.querySelector("#btn").onclick = function() { let el = document.createElement("canvas") el.width = 500; el.height = 300 el.style.display = "none" document.querySelector("body").appendChild(el) let canvas = el.getContext("2d") canvas.drawImage(document.querySelector("#video"), 0, 0, 500, 300) var url = el.toDataURL('image/jpeg'); var img = document.createElement("img") img.src = url document.querySelector("body").appendChild(img) document.body.removeChild(el) }
小夥伴們肯定很納悶這個success函式是怎麼來的其實是:
- 很明顯我把之前的箭頭函式換個了一個成功的回撥函式主要是處理video的src問題誕生的
在做最後總結之前,先把整體程式碼奉上:
Third
<body>
<video src="" id="video" controls autoplay></video>
<button id="btn">拍照</button>
<script>
//訪問使用者媒體裝置的相容方法
function getUserMedia(constraints, success, error) {
if (navigator.mediaDevices.getUserMedia) {
//最新的標準API
navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
} else if (navigator.webkitGetUserMedia) {
//webkit核心瀏覽器
navigator.webkitGetUserMedia(constraints, success, error)
} else if (navigator.mozGetUserMedia) {
//firfox瀏覽器
navigator.mozGetUserMedia(constraints, success, error);
} else if (navigator.getUserMedia) {
//舊版API
navigator.getUserMedia(constraints, success, error);
}
}
if (navigator.mediaDevices || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia) {
getUserMedia({
video: true,
audio: true
}, success, (err) => {
console.log(err)
})
}
function success(stream) {
console.log(stream)
let $video = document.querySelector("#video")
let url = window.URL.createObjectURL(stream)
console.log(url)
$video.src = url
// $video.srcObject = stream
}
document.querySelector("#btn").onclick = function() {
let el = document.createElement("canvas")
el.width = 500;
el.height = 300
el.style.display = "none"
document.querySelector("body").appendChild(el)
let canvas = el.getContext("2d")
canvas.drawImage(document.querySelector("#video"), 0, 0, 500, 300)
var url = el.toDataURL('image/jpeg');
var img = document.createElement("img")
img.src = url
document.querySelector("body").appendChild(img)
document.body.removeChild(el)
}
console.log(window.navigator.userAgent)
</script>
</body>
如上所示就是整體程式碼,不長但實現了我們最基礎的拍照功能,其實是對navigator和stream的運用
結尾:
之前並不是很理解navigator標籤的運用,但是經過自己的這次經歷相信有了一定的瞭解至於Navigator的更多應用我會在筆記中再詳細的去整理,希望各位看客們能夠滿意