js调用摄像头

详情源码请参见下方的 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>

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 正则去除html字符串中的注释、标签、属性

    ProsperLee
  • jQuer插件满屏气泡飘落动画效果

    ProsperLee
  • 图片懒加载

    插件地址:https://github.com/tuupola/jquery_lazyload/tree/2.x

    ProsperLee
  • video生成封面图

    根据video生成封面图,vedio要的url要允许跨域,可以设置nginx代理服务器来做

    windseek
  • CodeMirror 实现 JavaScript、 MySql 关键字的变色和自动实时提示 autocomplete

    https://codemirror.net/doc/manual.html#config

    一个会写诗的程序员
  • 下一个GAN?OpenAI提出可逆生成模型Glow

    该研究一经发表,立刻引起了机器学习社区的注意,有人对此表示:终于,我们有了 GAN 以外的优秀生成模型!

    CDA数据分析师
  • Laravel源码解析之HTTP Kernel

    由于 PHP 可以处理 WEB 和 CLI 两种接口请求,所以 Laravel中设计 HttpKernel 和 ConsoleKernel 来处理这两种类型的请...

    KevinYan
  • 一图看懂AI简史

    来自:talkingdata ? ? 接下来看看AI的薪水: ?

    小莹莹
  • 不服就干!千亿级别Quant挑战A股

    香港万得通讯社报道,A股是全球最大散户聚集体,专治各种不服。曾经的AI炒股也是铩羽而归,但是现在有一家千亿级基金公司表示在中国做量化投资非常有前途。

    量化投资与机器学习微信公众号
  • JavaScript 相关的工具代码

    当前 toLocaleTimeString 方法只能获取到 12 小时制的时间('上午09:10:01' | '下午08:10:24')

    柳醉梦声

扫码关注云+社区

领取腾讯云代金券