實現手機拍照功能，純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的更多應用我會在筆記中再詳細的去整理，希望各位看客們能夠滿意