国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

EasonTyler / 909人閱讀

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

實現手機拍照功能,純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按鈕咯具體代碼如下顯示:


光有標簽肯定是不行的接下來是具體的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的更多應用我會在筆記中再詳細的去整理,希望各位看客們能夠滿意

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/116961.html

相關文章

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

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

    Chaz 評論0 收藏0
  • 把手教你如何實現拍照功能

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

    Clect 評論0 收藏0
  • 拍照黨福利駕到 華為云微認證教你實現圖片壓縮和水印添加

    摘要:拍照黨福利駕到華為云微認證教你實現圖片壓縮和水印添加在手機拍照成為日常的今天,用照片記錄生活已成為人們的一種習慣。華為云微認證將總共送出個免費機會,獎項公布時間月日。 拍照黨福利駕到 華為云微認證教你實現圖片壓縮和水印添加 在手機拍照成為日常的今天,用照片記錄生活已成為人們的一種習慣。拍照容易處理難,面對手機相冊中大量的照片,你是否也苦惱過?刪,舍不得;上傳,會不會被盜圖?能否發出足夠...

    MadPecker 評論0 收藏0

發表評論

0條評論

EasonTyler

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<