js调用摄像头并截图

<!DOCTYPE html&gt;
<html><head><meta charset="utf-8"><title></title>
</head><body><video id="video" width="640" height="480" autoplay></video><button id="snap">Snap Photo</button><canvas id="canvas" width="640" height="480"></canvas><h2>按钮模拟拍照</h2>
</body>
<script type="text/javascript">var aVideo = document.getElementById('video');var aCanvas = document.getElementById('canvas');var ctx = aCanvas.getContext('2d');navigator.getUserMedia = navigator.getUserMedia ||navigator.webkitGetUserMedia ||navigator.mozGetUserMedia ||navigator.msGetUserMedia; //获取媒体对象（这里指摄像头）navigator.getUserMedia({video: true}, gotStream, noStream); //参数1获取用户打开权限；参数二是一个回调函数，自动传入视屏流，成功后调用，并传一个视频流对象，参数三打开失败后调用，传错误信息function gotStream(stream) {// video.src = URL.createObjectURL(stream); // 老写法aVideo.srcObject = stream;aVideo.onerror = function() {stream.stop();};stream.onended = noStream;aVideo.onloadedmetadata = function() {alert('摄像头成功打开！');};}function noStream(err) {alert(err);}document.getElementById("snap").addEventListener("click", function() {ctx.drawImage(aVideo, 0, 0, 640, 480); //将获取视频绘制在画布上});
</script></html>

js调用摄像头并截图相关推荐

JS打开摄像头并截图上传
直入正题,JS打开摄像头并截图上传至后端的一个完整步骤 1. 打开摄像头主要用到getUserMedia方法,然后将获取到的媒体流置入video标签 2. 截取图片主要用到canvas绘图,使用dra ...
JS调用摄像头、实时视频流上传（一次不成功的试验）
JS调用摄像头.实时视频流上传(一次不成功的试验) 思路前端调用摄像头,获取视频流,从视频流中取一帧转图片,用websocket上传图片. 研究了一下发现了WebRTC这种技术,看到有博客说一些直播 ...
前端js调用摄像头进行录像并传到后端
js调用摄像头录像并传到后端参考自https://juejin.im/entry/5b91e8e7f265da0ac55e2cd6?tdsourcetag=s_pcqq_aiomsg 项目要求前端h ...
js调用摄像头解析二维码
因为需求做一个扫码功能,发觉网上的资料不是不能用就是不完善,遂借鉴各种资料把这个功能搞出来了. 注意要点: 1.需要https验证通过才可以, 2.仅支持安卓端,iOS理论上也没问题的但是就是摄像 ...
html+js 调用摄像头识别二维码
1. html调起摄像头,参考文档:https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia 2.识别二维码 ...
js调用摄像头拍照并访问后端代码
1.先上效果(注意我的摄像头是打开的这里获取的是实时的视频流): 图略,太丑了决定删了 2.index.html <!-- Copyright (c) 2018 ml5This software ...
Java通过webcam-capture调用摄像头并截图
需要的包: bridj-0.7.0.jar.webcam-capture-0.3.12.jar. slf4j-api-1.8.0-beta2.jar.slf4j-simple-1.8.0-beta2. ...
JS调用摄像头拍照，上传图片并显示到前端页面
本文实例为大家分享了JS实现截取视频画面的具体代码,供大家参考,具体内容如下: index.jsp 展示界面,按钮点击拍照,将拍照图片显示 <img id="showImage_img ...
Unity调用摄像头并截图
首先界面是这样的,很简易,脚本上挂了三个按钮直接上代码 using UnityEngine; using UnityEngine.UI;public class WebCamera : MonoBe ...

js调用摄像头并截图

js调用摄像头并截图相关推荐

最新文章

热门文章