JS打开摄像头并截图上传

直入正题,JS打开摄像头并截图上传至后端的一个完整步骤

1. 打开摄像头主要用到getUserMedia方法,然后将获取到的媒体流置入video标签 2. 截取图片主要用到canvas绘图,使用drawImage方法将video的内容绘至canvas中 3. 将截取的内容上传至服务器,将canvas中的内容转为base64格式上传,后端(PHP)通过file_put_contents将其转为图片

要注意的是,在chrome以外的浏览器中,使用摄像头或多或少会出现一些问题,可能也是老问题了,所以以下代码主要基于chrome使用

比如在最新版FireFox中的报错,不知为啥

1. 打开摄像头

getUserMedia 有新版本和旧版本两种,建议使用新版本

旧版本位于navigator 对象下,根据浏览器不同有所不同

// 获取媒体方法(旧方法)
    navigator.getMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMeddia || navigator.msGetUserMedia;
if (navigator.getMedia) {
        navigator.getMedia({
            video: true
        }, function(stream) {
            mediaStreamTrack = stream.getTracks()[0];

            video.src = (window.URL || window.webkitURL).createObjectURL(stream);
            video.play();
        }, function(err) {
            console.log(err);
        });
    }

第一个参数中指示需要使用视频(video)或音频(audio),更多参见文档

第二个参数中指示调用成功后的回调,其中带一个参数(MediaStream),在旧版本中可以直接通过调用MediaStream.stop() 来关闭摄像头,不过在新版之中已废弃。需要使用MediaStream.getTracks()[index].stop() 来关闭相应的Track

第三个参数指示调用失败后的回调

新版本位于navigator.mediaDevices 对象下

if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({
            video: true,
            audio: true
        }).then(function(stream) {
            console.log(stream);

            mediaStreamTrack = typeof stream.stop === 'function' ? stream : stream.getTracks()[1];

            video.src = (window.URL || window.webkitURL).createObjectURL(stream);
            video.play();
        }).catch(function(err) {
            console.log(err);
        })
    }

与旧版类似,不过该方法返回了一个Promise对象,可以使用then和catch表示成功与失败的回调

更多参见文档

需要注意的是,MediaStream.getTracks() 返回的Tracks数组是按第一个参数倒序排列的

比如现在定义了

{
    video: true,
    audio: true
}

想关闭摄像头,就需要调用MediaStream.getTracks()[1].stop();

同理,0对应于audio的track

使用createObjectURL 将MediaStream写入video标签,就能够存储实时的媒体流数据(也可以方便的实时查看画面)

旧版本中webkitURL 对象以不被支持,需要使用URL对象

  <video width="200" height="150"></video>
    <canvas width="200" height="150"></canvas>

    <p>
        <button id="snap">截取图像</button>
        <button id="close">关闭摄像头</button>
        <button id="upload">上传图像</button>
    </p>

    <img id="uploaded" width="200" height="150" />

2. 截取图像

将内容写入即可

// 截取图像
    snap.addEventListener('click', function() {
        context.drawImage(video, 0, 0, 200, 150);
    }, false);

3. 关闭摄像头

// 关闭摄像头
    close.addEventListener('click', function() {
        mediaStreamTrack && mediaStreamTrack.stop();
    }, false);

4. 上传截取的图像

canvas.toDataURL('image/png')

// 上传截取的图像
    upload.addEventListener('click', function() {
        jQuery.post('/uploadSnap.php', {
            snapData: canvas.toDataURL('image/png')
        }).done(function(rs) {
            rs = JSON.parse(rs);

            console.log(rs);

            uploaded.src = rs.path;
        }).fail(function(err) {
            console.log(err);
        });
    }, false);

而这里的后端(PHP)则将获取的内容转换成图像文件保存

需要注意的是,要将base64的头部信息字段去掉再保存,否则似乎图像是损坏无法打开滴

<?php

    $snapData = $_POST['snapData'];
    $snapData = str_replace('data:image/png;base64,', '', $snapData);
    // $snapData = str_replace(' ', '+', $snapData);

    $img = base64_decode($snapData);

    $uploadDir = 'upload/';
    $fileName = date('YmdHis', time()) . uniqid();

    if (!(file_put_contents($uploadDir . $fileName, $img))) {
        echo json_encode(array('code' => 500, 'msg' => '文件上传失败'));
    } else {
        echo json_encode(array('code' => 200, 'msg' => '文件上传成功', 'path' => $uploadDir . $fileName));
    }

?>

完整JS代码

 1 <script type="text/javascript" src="jquery.js"></script>
 2     <script type="text/javascript">
 3     function $(elem) {
 4         return document.querySelector(elem);
 5     }
 6 
 7     // 获取媒体方法(旧方法)
 8     navigator.getMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMeddia || navigator.msGetUserMedia;
 9 
10     var canvas = $('canvas'),
11         context = canvas.getContext('2d'),
12         video = $('video'),
13         snap = $('#snap'),
14         close = $('#close'),
15         upload = $('#upload'),
16         uploaded = $('#uploaded'),
17         mediaStreamTrack;
18 
19     // 获取媒体方法(新方法)
20     // 使用新方法打开摄像头
21     if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
22         navigator.mediaDevices.getUserMedia({
23             video: true,
24             audio: true
25         }).then(function(stream) {
26             console.log(stream);
27 
28             mediaStreamTrack = typeof stream.stop === 'function' ? stream : stream.getTracks()[1];
29 
30             video.src = (window.URL || window.webkitURL).createObjectURL(stream);
31             video.play();
32         }).catch(function(err) {
33             console.log(err);
34         })
35     }
36     // 使用旧方法打开摄像头
37     else if (navigator.getMedia) {
38         navigator.getMedia({
39             video: true
40         }, function(stream) {
41             mediaStreamTrack = stream.getTracks()[0];
42 
43             video.src = (window.URL || window.webkitURL).createObjectURL(stream);
44             video.play();
45         }, function(err) {
46             console.log(err);
47         });
48     }
49 
50     // 截取图像
51     snap.addEventListener('click', function() {
52         context.drawImage(video, 0, 0, 200, 150);
53     }, false);
54 
55     // 关闭摄像头
56     close.addEventListener('click', function() {
57         mediaStreamTrack && mediaStreamTrack.stop();
58     }, false);
59 
60     // 上传截取的图像
61     upload.addEventListener('click', function() {
62         jQuery.post('/uploadSnap.php', {
63             snapData: canvas.toDataURL('image/png')
64         }).done(function(rs) {
65             rs = JSON.parse(rs);
66 
67             console.log(rs);
68 
69             uploaded.src = rs.path;
70         }).fail(function(err) {
71             console.log(err);
72         });
73     }, false);
74 
75     </script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Albert陈凯

2018-07-24 关于数据库‘状态’字段设计的思考与实践关于数据库‘状态’字段设计的思考与实践1. 问题综述2. 业务分析3. 问题一、订单表的‘订单状态’字段应当包含哪些状态值?4. 问题二、订

原文地址:https://blog.csdn.net/tan_jianhui/article/details/8571342

31710
来自专栏搞前端的李蚊子

IOS safari浏览器登陆时Cookie无法保存的问题

近期完成了一个儿童的测评项目,测试到最后的时候发现在ipad mini上登陆成功之后无法跳转页面,而安卓和pc端都可以,找了大半天bug,发现其他的苹果设备都没...

1K50
来自专栏前端大白专栏

最近在学习react-native 为之后的找工作做准备

21390
来自专栏EAWorld

生成全局唯一ID的3个思路,来自一个资深架构师的总结

标识(ID / Identifier)是无处不在的,生成标识的主体是人,那么它就是一个命名过程,如果是计算机,那么它就是一个生成过程。如何保证分布式系统下,并行...

73660
来自专栏程序员的知识天地

Web 前端模板引擎的选择

模板引擎负责组装数据,以另外一种形式或外观展现数据。 浏览器中的页面是 Web 模板引擎最终的展现。

1.2K30
来自专栏Golang语言社区

【Go 语言社区】在 Go 语言中,如何正确的使用并发

Glyph Lefkowitz最近写了一篇启蒙文章,其中他详细的说明了一些关于开发高并发软件的挑战,如果你开发软件但是没有阅读这篇问题,那么我建议你阅读一篇。这...

37290
来自专栏小巫技术博客

那些Android中的性能优化tips

11520
来自专栏Golang语言社区

在 Go 语言中,如何正确的使用并发

Glyph Lefkowitz最近写了一篇启蒙文章,其中他详细的说明了一些关于开发高并发软件的挑战,如果你开发软件但是没有阅读这篇问题,那么我建议你阅读一篇。这...

21100
来自专栏Java技术栈

TBSchedule应用实战之“性能怪兽(集群篇)“

本节的重点将采用原生java,tbs和xxl-job三个模型来测试处理50万业务数据,总结他们的差异,向读者朋友们展示为什么作者称tbs为性能怪兽。 本节以实际...

40370
来自专栏Timhbw博客

教你快速提取iOS App中的图片素材

2016-08-2819:40:36 发表评论 420℃热度 2.1 下载app安装包 2.2 利用工具获取图片资源 目录 平时玩手机,看到iOS app...

459110

扫码关注云+社区

领取腾讯云代金券