手把手教你如何实现拍照功能

Chaz 发布于2019-08-26 12:20 / 1482人阅读

摘要：实现手机拍照功能，纯书写先上图为主，再做详细讲解需要注意的是这里的摄像头是主要是通过浏览器中的一个叫做属性在代码运行时打开页面自动开启不明白直接上代码的提供了访问媒体的能力基于该特性开发者可以不依赖任何浏览器插件下去访问视频和音频等设备如不

实现手机拍照功能，纯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的更多应用我会在笔记中再详细的去整理，希望各位看客们能够满意

超融合服务器私有云手把手教你做图像识别手把手教你阿里云服务器搭建商城拍照功能交管app备案如何拍照

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108524.html

手把手教你如何实现拍照功能

摘要：实现手机拍照功能，纯书写先上图为主，再做详细讲解需要注意的是这里的摄像头是主要是通过浏览器中的一个叫做属性在代码运行时打开页面自动开启不明白直接上代码的提供了访问媒体的能力基于该特性开发者可以不依赖任何浏览器插件下去访问视频和音频等设备如不实现手机拍照功能，纯JS书写 First：先上图为主，再做详细讲解： showImg(https://segmentfault.com/img/...

Clect 2019-08-02 11:34 评论0 收藏0
手把手教你如何实现拍照功能

摘要：实现手机拍照功能，纯书写先上图为主，再做详细讲解需要注意的是这里的摄像头是主要是通过浏览器中的一个叫做属性在代码运行时打开页面自动开启不明白直接上代码的提供了访问媒体的能力基于该特性开发者可以不依赖任何浏览器插件下去访问视频和音频等设备如不实现手机拍照功能，纯JS书写 First：先上图为主，再做详细讲解： showImg(https://segmentfault.com/img/...

EasonTyler 2019-08-30 15:54 评论0 收藏0
手把手教你如何实现拍照功能

摘要：实现手机拍照功能，纯书写先上图为主，再做详细讲解需要注意的是这里的摄像头是主要是通过浏览器中的一个叫做属性在代码运行时打开页面自动开启不明白直接上代码的提供了访问媒体的能力基于该特性开发者可以不依赖任何浏览器插件下去访问视频和音频等设备如不实现手机拍照功能，纯JS书写 First：先上图为主，再做详细讲解： showImg(https://segmentfault.com/img/...

AdolphLWQ 2019-08-05 15:03 评论0 收藏0
iOS学习

摘要：为开源点赞如何写出一个丝滑的图片浏览器写的图片浏览器，与微信一致的交互体验是一个项目的依赖管理器，使用它可以让导入第三方库和处理依赖关系变得简单。【React Native 系列教程】Mac(OSX) 平台搭建 React Native 开发环境在 Mac 平台上开发 React Native 需要安装以下环境和工具： Note.jsReact Native Command Lin...

sshe 2019-06-25 16:33 评论0 收藏0
拍照党福利驾到华为云微认证教你实现图片压缩和水印添加

摘要：拍照党福利驾到华为云微认证教你实现图片压缩和水印添加在手机拍照成为日常的今天，用照片记录生活已成为人们的一种习惯。华为云微认证将总共送出个免费机会，奖项公布时间月日。拍照党福利驾到华为云微认证教你实现图片压缩和水印添加在手机拍照成为日常的今天，用照片记录生活已成为人们的一种习惯。拍照容易处理难，面对手机相册中大量的照片，你是否也苦恼过？删，舍不得；上传，会不会被盗图？能否发出足够...

MadPecker 2019-06-26 19:00 评论0 收藏0