js通过浏览器调用摄像头并实现拍照

生成图片是通过canvas画到网页上

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>camera</title><style>#camera {float: left;margin: 20px;}#contentHolder {width: 300px;height: 300px;margin-bottom: 10px;}#btn_snap {margin: 0 auto;border: 1px solid #f0f0f0;background: #5CACEE;color: #FFF;width: 100px;height: 36px;line-height: 36px;border-radius: 8px;text-align: center;cursor: pointer;cursor: pointer;/*禁止选择*/-webkit-touch-callout: none;/* iOS Safari */-webkit-user-select: none;/* Chrome/Safari/Opera */-khtml-user-select: none;/* Konqueror */-moz-user-select: none;/* Firefox */-ms-user-select: none;/* Internet Explorer/Edge */user-select: none;/* Non-prefixed version, currently not supported by any browser */}#imgBoxxx {width: 200px;margin: 60px 20px 20px;/* border-radius: 50%; */}</style>
</head><body><div id="camera"><div id="contentHolder"><video id="video" width="300" height="300" autoplay></video><canvas style="display:none;" id="canvas" width="300" height="300"></canvas></div><div id="btn_snap" onclick="myfunction()">拍照</div></div><script>var canvas = document.getElementById("canvas"),pzBtn = document.getElementById("btn_snap"),context = canvas.getContext("2d"),video = document.getElementById("video");// alert('该页面会调用您的摄像头')// 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象if (navigator.mediaDevices === undefined) {navigator.mediaDevices = {};}// 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象// 使用getUserMedia，因为它会覆盖现有的属性。// 这里，如果缺少getUserMedia属性，就添加它。if (navigator.mediaDevices.getUserMedia === undefined) {navigator.mediaDevices.getUserMedia = function(constraints) {// 首先获取现存的getUserMedia(如果存在)var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;// 有些浏览器不支持，会返回错误信息// 保持接口一致if (!getUserMedia) {return Promise.reject(new Error('getUserMedia is not implemented in this browser'));}//否则，使用Promise将调用包装到旧的navigator.getUserMediareturn new Promise(function(resolve, reject) {getUserMedia.call(navigator, constraints, resolve, reject);});}}var constraints = {audio: false,video: {width: 720,height: 720}}navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {var video = document.querySelector('video');// 旧的浏览器可能没有srcObjectif ("srcObject" in video) {video.srcObject = stream;} else {//避免在新的浏览器中使用它，因为它正在被弃用。video.src = window.URL.createObjectURL(stream);}video.onloadedmetadata = function(e) {video.play();};}).catch(function(err) {console.log(err.name + ": " + err.message);});function myfunction() {var date = new Date().getTime();// 点击，canvas画图context.drawImage(video, 0, 0, 300, 300);// 获取图片base64链接var image = canvas.toDataURL('image/png');// 定义一个imgvar img = new Image();//设置属性和srcimg.id = "imgBox";img.src = image;//将图片添加到页面中document.body.appendChild(img);// base64转文件function dataURLtoFile(dataurl, filename) {var arr = dataurl.split(','),mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new File([u8arr], filename, {type: mime});}console.log(date);console.log(dataURLtoFile(image, date + '.png'));};</script>
</body></html>

js通过浏览器调用摄像头并实现拍照相关推荐

JS通过浏览器调用摄像头，基于windows操作系统。
方法一: <!doctype html> <html lang="en"> <head><title>GET VIDEO</t ...
Atititjs h5调用摄像头视频聊天拍照功能相机功能录像attilax总结
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! Atit ...
微信小程序开发（3） - 微信小程序调用摄像头静默隐藏拍照功能实现方式
微信小程序最近非常火热,小编最近做了一个微信小程序开发新项目,使用小程序开发考试系统,在使用App参加考试的时候调用摄像头抓拍用户是否作弊,在开发过程中遇到点问题,下面小编把问题描述和解决方法分享给大 ...
浏览器调用摄像头getUserMedia
浏览器调用摄像头getUserMedia 2018年启动QQ浏览器会启动摄像头的新闻闹得沸沸扬扬. 前段时间公司让研究一下这个浏览器启用摄像头的功能,希望能够实现浏览器网页扫描二维码的功能.现在写下来 ...
服务器项目前端调用摄像头失败,浏览器调用摄像头失败：NotSupportedError Only secure origins are allowed...
通过浏览器调用摄像头失败:NotSupportedError Only secure origins are allowed 错误报告 NotSupportedError Only secure or ...
【javascript】浏览器调用摄像头扫二维码踩坑记录
前言最近做一个项目需要用浏览器调用摄像头扫二维码,然后就踩了几个坑记录下. 踩坑记录我一开始发现了zxing这个库,他分为https://www.npmjs.com/package/@zxing/ ...
chrome浏览器调用摄像头
chrome浏览器调用摄像头 //var 是定义变量var canvans = document.getElementById("canvas");var video = docu ...
解决PC浏览器调用摄像头失败(本地可以,线上失败)
解决PC浏览器调用摄像头失败(本地可以,线上失败) 原因:浏览器为了安全http协议获取不到摄像头权限解决方案 1.切换https 如果域名可以使用https,切换为https即可 2.修改浏览器设 ...
如何让浏览器调用摄像头时，摄像头读取的是本地文件而不是进行摄像
如何让浏览器调用摄像头时,摄像头显示的画面是选择好的本地视频文件开始播放,而不是开始摄像,有偿问答

js通过浏览器调用摄像头并实现拍照

js通过浏览器调用摄像头并实现拍照相关推荐

最新文章

热门文章