您的位置 首页 智能

js调用摄像头

js调用摄像头本篇文章给大家带来的内容是介绍js如何调用摄像头?js调用摄像头的方法(代码详解)。有一定的参考价值,有需要的朋友

js调用摄像头

本篇文章给大家带来的内容是介绍js如何调用摄像头?js调用摄像头的方法(代码详解)。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

1.jpg

详情源码请参见:https://github.com/ProsperLe

<div> <b>调用移动端摄像头</b><br> <label>照相机: <input type="file" id='image' accept="image/*" capture='camera'></label> <label>摄像机: <input type="file" id='video' accept="video/*" capture='camcorder'></label> </div> <hr> <div class="box1"> <div> <button onclick="getMedia()">开启摄像头</button> <video id="video" width="600" height="400" autoplay="autoplay"></video> </div> <div> <button onclick="takePhoto()">拍照</button> <canvas id="canvas" width="600" js调用摄像头 height="400"></canvas> </div> </div> <script> function getMedia() { let constraints = { video: { width: 600, height: 400 }, audio: true }; //获得video摄像头区域 let video = document.getElementById("video"); // 这里介绍新的方法,返回一个 Promise对象 // 这个Promise对象返回成功后的回调函数带一个 MediaStream 对象作为其参数 // then()是Promise对象里的方法 // then()方法是异步执行,当then()前的方法执行完后再执行then()内部的程序 // 避免数据没有获取到 let promise = navigator.mediaDevices.getUserMedia(constraints); // 成功调用 promise.then(function (MediaStream) { /* 使用这个MediaStream */ video.srcObject = MediaStream; video.play(); console.log(MediaStream); // 对象 }) // 失败调用 promise.catch(function (err) { /* 处理error */ console.log(err); // 拒签 }); } function takePhoto() { //获得Canvas对象 let video = document.getElementById("video"); let canvas = document.getElementById("canvas"); let ctx = canvas.getContext('2d'); ctx.drawImage(video, 0, 0, 600, 400); } </script>

以上就是js如何调用摄像头?js调用摄像头的方法(代码详解)的详细内容,更多请关注泉州SEO[www.234yp.com]其它相关文章!

关于更多js调用摄像头内容,可以收藏本网页。泉州seo优化 js如何调用摄像头?js调用摄像头的方法(代码详解)

本文来自网络,不代表厦门SEO立场,转载请注明出处:http://www.96096.cc/96096/12329.html

作者: 96096

联系我们

联系我们

0898-88881688

在线咨询: QQ交谈

邮箱: email@wangzhan.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部