js调用摄像头-阿里云开发者社区

开发者社区> prosperlee> 正文

js调用摄像头

简介: 详情源码请参见下方的 GitHub  !!! 1 2 调用移动端摄像头 3 照相机: 4 摄像机: 5 6 7 8 9 开...
+关注继续查看

详情源码请参见下方的 GitHub  !!!

 1     <div>
 2         <b>调用移动端摄像头</b><br>
 3         <label>照相机: <input type="file" id='image' accept="image/*" capture='camera'></label>
 4         <label>摄像机: <input type="file" id='video' accept="video/*" capture='camcorder'></label>
 5     </div>
 6     <hr>
 7     <div class="box1">
 8         <div>
 9             <button onclick="getMedia()">开启摄像头</button>
10             <video id="video" width="600" height="400" autoplay="autoplay"></video>
11         </div>
12         <div>
13             <button onclick="takePhoto()">拍照</button>
14             <canvas id="canvas" width="600" height="400"></canvas>
15         </div>
16     </div>
17     <script>
18         function getMedia() {
19             let constraints = {
20                 video: {
21                     width: 600,
22                     height: 400
23                 },
24                 audio: true
25             };
26             //获得video摄像头区域
27             let video = document.getElementById("video");
28 
29             // 这里介绍新的方法,返回一个 Promise对象
30             // 这个Promise对象返回成功后的回调函数带一个 MediaStream 对象作为其参数
31             // then()是Promise对象里的方法
32             // then()方法是异步执行,当then()前的方法执行完后再执行then()内部的程序
33 
34             // 避免数据没有获取到
35             let promise = navigator.mediaDevices.getUserMedia(constraints);
36             // 成功调用
37             promise.then(function (MediaStream) {
38                 /* 使用这个MediaStream */
39                 video.srcObject = MediaStream;
40                 video.play();
41                 console.log(MediaStream); // 对象
42             })
43             // 失败调用
44             promise.catch(function (err) {
45                 /* 处理error */
46                 console.log(err); // 拒签
47             });
48         }
49 
50         function takePhoto() {
51             //获得Canvas对象
52             let video = document.getElementById("video");
53             let canvas = document.getElementById("canvas");
54             let ctx = canvas.getContext('2d');
55             ctx.drawImage(video, 0, 0, 600, 400);
56         }
57     </script>

 

GitHub:Fuck me on GitHub Fuck me on GitHub

留下你的足迹求推荐呦

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
8500 0
MIPS中的异常处理和系统调用【转】
转自:http://blog.csdn.net/jasonchen_gbd/article/details/44044091 权声明:本文为博主原创文章,转载请附上原博链接。 异常入口 系统调用是用户态和内核态通信的一种方式,用户程序可以直接调用系统调用的接口陷入内核中执行相关任务,完成后返回用户态继续运行。
1058 0
php中使用exec,system等函数调用系统命令
php的内置函数exec,system都可以调用系统命令(shell命令),当然还有passthru,escapeshellcmd等函数。   在很多时候利用php的exec,system等函数调用系统命令可以帮助我们更好更快的完成工作。
682 0
Node.js调用mysql的存储过程
例子仅在windows下测试通过,没有放在linux下测试。如有问题,可以电邮给我~ 1、安装node.js、mysql,此处略(自行搜索吧)…; 2、创建一个名为test的数据库,然后建一张名为user_info的表(仅供测试)… 这里假定mysql使用的用户名为root,密码为123456 相应...
902 0
linux strace-跟踪进程的系统调用或是信号产生情况,lstrace-跟踪己丑年调用库函数情况,进程跟踪调试命令
本工具可以用来做大多数排除,比如mount一个NFS,很慢,找不出原因,我们可以使用strace命令来跟中mount这个经常所有的调用过程。 strace 命令是一种强大的工具,它能够显示所有由用户空间程序发出的系统调用。
1379 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
10322 0
不用AJAX实现前台JS调用后台C#方法(小技巧)
纯属小技巧,高手见笑了。一提到如何在前台JS调用后台C#方法,AJAX成为了必然的想法。只是实现的细节采用AJAX 1.0或者AjaxPro的区别。其实如果不用AJAX,我们也能够很方便地利用JS调用后台方法。
774 0
百度地图的js调用
百度地图的js调用
1108 0
+关注
51
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载