手把手教你如何實現拍照功能

時間 2019-11-08

標籤手把手如何實現拍照功能简体版

原文原文鏈接

實現手機拍照功能，純JS書寫

First：web

先上圖爲主，再作詳細講解：

須要注意的是這裏的攝像頭是主要是經過瀏覽器中的一個叫作Navigator屬性在JS代碼運行時打開頁面自動開啓

不明白？直接上代碼！canvas

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

<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>