摘要：實現(xiàn)手機(jī)拍照功能，純書寫先上圖為主，再做詳細(xì)講解需要注意的是這里的攝像頭是主要是通過瀏覽器中的一個叫做屬性在代碼運行時打開頁面自動開啟不明白直接上代碼的提供了訪問媒體的能力基于該特性開發(fā)者可以不依賴任何瀏覽器插件下去訪問視頻和音頻等設(shè)備如不

First：

先上圖為主，再做詳細(xì)講解：

需要注意的是這里的攝像頭是主要是通過瀏覽器中的一個叫做Navigator屬性在JS代碼運行時打開頁面自動開啟

不明白？直接上代碼！

 // HTML 5? 的getUserMedia API提供了訪問媒體的能力, 基于該特性, 開發(fā)者可以不依賴任何瀏覽器插件下去訪問視頻和音頻等設(shè)備.如navigator.mediaDevices.getUserMedia
        //不同瀏覽器的api：

        //訪問用戶媒體設(shè)備的兼容方法
        function getUserMedia(constraints, success, error) {
            if (navigator.mediaDevices.getUserMedia) {
                //最新的標(biāo)準(zhǔn)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)
            })
        }

以上就是代碼的具體呈現(xiàn)，大部分已加入功能注釋，很容易理解，如果還不理解只能去先了解下navigator屬性了
1.代碼的前半段getUserMedia函數(shù)中的操作是為了實現(xiàn)兼容，很好理解因為必須保證自己的代碼可以在很多瀏覽器是無差別運行
2.代碼的第二部分IF語句中則是為了調(diào)用getUserMedia函數(shù)并且參數(shù)是一個對象加兩個函數(shù)的方式，其中對象的話就是媒體標(biāo)簽 video和audio 兩個為TRUE說明都要開啟 緊接著就是兩個函數(shù)一個是成功的回調(diào)其中實參為stream可以有些同學(xué)對這個參數(shù)不怎么理解不怕 一會截圖送上， 還有就是失敗的回調(diào)，在此不做過多講解。

以下是關(guān)于Stream的信息具體如圖中所示：

相信很多小伙伴已經(jīng)看見了 我console.log打印出后濕一個叫做MediaStream的對象

接下來，進(jìn)入第二步

Second:
創(chuàng)建兩個標(biāo)簽當(dāng)然是我們的video 和 button按鈕咯具體代碼如下顯示：

拍照

光有標(biāo)簽肯定是不行的接下來是具體的JS代碼的實現(xiàn)：

 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函數(shù)是怎么來的其實是：

很明顯我把之前的箭頭函數(shù)換個了一個成功的回調(diào)函數(shù)主要是處理video的src問題誕生的

在做最后總結(jié)之前，先把整體代碼奉上：

Third

    
    拍照

    

如上所示就是整體代碼，不長但實現(xiàn)了我們最基礎(chǔ)的拍照功能，其實是對navigator和stream的運用

結(jié)尾：

之前并不是很理解navigator標(biāo)簽的運用，但是經(jīng)過自己的這次經(jīng)歷相信有了一定的了解至于Navigator的更多應(yīng)用我會在筆記中再詳細(xì)的去整理，希望各位看客們能夠滿意