js如何调用摄像头?js调用摄像头的方法(代码详解)

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

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

js如何调用摄像头?js调用摄像头的方法(代码详解)

详情源码请参见: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" 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>
本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

壳先生 » js如何调用摄像头?js调用摄像头的方法(代码详解)

发表评论

提供最优质的资源集合

立即查看 了解详情