调用PC端摄像头拍照

HTML代码：

<div id="android-camera"><input type="button" title="开启摄像头" value="开启摄像头" onclick="getMedia()" /><video id="video" width="500px" height="500px" autoplay="autoplay"></video><canvas id="canvas" width="500px" height="500px"></canvas><button id="snap" onclick="takePhoto()">拍照</button>
</div>

js代码：

<script>
//调取摄像头function getMedia(){let constraints = {video:{width:500,height:500},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){video.srcObject = MediaStream;video.play();});}
//拍照function takePhoto(){//获取Canvas对象let video = document.getElementById("video");let canvas = document.getElementById("canvas");let ctx = canvas.getContext('2d');ctx.drawImage(video,0,0,500,500);}
</script>

调用手机、平板摄像头拍照

HTML代码：

<input id="uploadFile" type="file" name="uploadFile" accept="images/*" capture="camera" onchange="imgChange(event)" /> //visibility:hidden
<img src="" id="showImage" alt=""/>
<input type="button" value="开启摄像头" id="choose_photo" />

JS代码：

function imgChanfe(e){console.info(e.target.files[0]);  //图片文件var dom = $("input[id^='imgTest']")[0];var reader = new FileReader();reader.onload = (function(file){return function(e){var sss = $("#showImage");$("#showImage")[0].src = this.result};})(e.target.files[0]);reader.readAsDateURL(e.target.files[0]);
}
//按钮的点击事件
$("#choose_photo").click(function(){   //触发file点击事件$("#uploadFile").click();   //file的change事件
})

调用PC端、手机、平板摄像头拍照相关推荐

vue 实现pc端调取本地摄像头拍照生成base64数据 navigator.userAgent 功能
文章目录 1. 写在前面 2. demo摄像头拍照实现效果 3. https 方式实现摄像头拍照生成base64数据的 4. 配置浏览器的目标位置实现摄像头拍照功能 5. pc 端实现调用本地摄像头 ...
vue 调用pc端本地摄像头、麦克风实现拍照、录视频、录音并上传到服务器指定树文件夹
vue 调用pc端本地摄像头.麦克风实现拍照.录视频.录音并上传自己写blog只是为了下次方便使用过程确实很烦 ,自己摸索加各大网站cv查看可以直接使用 1.调用摄像头拍照录屏首先是npm ...
H5调用移动端手机摄像头
H5调用移动端手机摄像头 capture表示,可以捕获到系统默认的设备,比如:camera照相机:camcorder摄像机:microphone录音.accept表示,直接打开系统文件目录. < ...
VUE调用pc端摄像头
VUE项目调用pc端摄像头功能 (摄像头只可以用localhost启用项目访问,或者修改浏览器配置,底部有方法) 代码如下: <template> & ...
java后台中判断PC端/手机web端访问，并返回相应页面
这个代码其实不是由我本人发现的,而是在翻看公司项目时无意间发现,觉得很实用所以拿出来大家分享. 框架:Struts2+spring+ibatis, 主要实现是依靠Http请求头Header中的 &qu ...
pc端手机短信发送的介绍
发短信的客户端与手机运营商有关,共移动.联通.电信三大运营商. 移动移动手机用飞信,可以实现电脑到手机的免费发送短信,甚至可以实现手机多方语聊等功能. 电信电信手机发短信,介绍一个如下方法:主要是 ...
小米手机解BL锁时进入fastboot之后 PC端手机解锁工具一直显示未连接手机
1. 首先想到换数据线在自己换了几根数据线后未解决问题 2.重启电脑常见毛病重启解决,但是尝试后依旧没有反应 3.驱动问题,尝试更换驱动来自知乎的分享方法如果解锁软件没有显示连接手机,是驱动问 ...
h5移动端实时获取摄像头拍照-可以通过上传图片进行人脸识别
IOS系统要11以上,且必须是https ```js 拍照播放 ```
2300套php网站源码模板完整后台程序整站带数据,ID41:建材自适应PC手机平板微信Seo结构送2300套PHP整站源码...
多平台演示(兼容PC电脑/手机/平板/微信): http://www.2008o.com/jianwang/Html/jianwangzhan45/132.html(复制网址到浏览器访问) 源码大小1 ...

调用PC端、手机、平板摄像头拍照

调用PC端摄像头拍照

调用手机、平板摄像头拍照

调用PC端、手机、平板摄像头拍照相关推荐

最新文章

热门文章