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

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按鈕咯具體代碼如下顯示：

拍照

光有標簽肯定是不行的接下來是具體的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

    
    拍照

    

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

結尾：

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