js调用本地摄像头demo
效果：
html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>TEST DEMO</title>
</head>
<body>
<div id="main" style="margin-left:10px;overflow-y:scroll;"><div><div><div><video style="width:250px;height:250px;border:5px solid black;"></video><img id="picture" style="width:250px;height:250px;border:5px solid black;"><canvas id="canvas" style="display: none;width:250px;height:250px"></canvas><button onclick="cameraForm.save()">拍摄</button><button onclick="cameraForm.close()">关闭摄像头</button><button onclick="cameraForm.open()">开启摄像头</button></div></div></div>
</div>
</body>
<script src="/jquery.js"></script>
<script src="/cameraForm.js"></script>
</html>js
let cameraForm = {video: null,base64Img: "",open: function () {// 视频大小let constraints = {audio: false, video: {width: 250, height: 250}};// 开启视频navigator.mediaDevices.getUserMedia(constraints).then(function (mediaStream) {cameraForm.video = document.querySelector('video');cameraForm.video.srcObject = mediaStream;cameraForm.video.onloadedmetadata = function (e) {cameraForm.video.play();};}).catch(function (err) {console.log(err.name + ": " + err.message);alert("摄像头打开失败")});},close: function () {//关闭摄像头cameraForm.video.srcObject.getTracks()[0].stop();},save: function () {// 使用canvas进行拍照let canvas = document.getElementById('canvas');let ctx = canvas.getContext('2d');ctx.drawImage(cameraForm.video, 0,0,250, 250);cameraForm.base64Img = canvas.toDataURL("image/png");document.getElementById('picture').src = cameraForm.base64Img;}
};
$(function () {cameraForm.open();});js调用本地摄像头demo相关推荐
- 摄像头网页服务器,js调用本地摄像头拍照并上传到web服务器
[实例简介] js调用本地摄像头拍照并上传到web服务器.后台使用java实现图片的接收和存储,上传的图片默认保存到项目下的images文件夹中. [实例截图] [核心代码] MyCamera └── ...
- js调用本地摄像头拍照截图，提交后台
今天有个需求,需要在前端界面调用本地摄像头,然后拍照结束后可以截取预览,最后将结果提交到后台.查了网上很多的插件,发现适合的非常少,于是决定自己修改一个. 这里我修改了一个jquery插件,把摄像头拍 ...
- JS调用本地摄像头拍照（兼容各大浏览器及IE8+）
最近做的项目遇到了个难题,使用video+canvas+getUserMedia()写的调用本地摄像头拍照不兼容IE. 原因:IE8及以下不支持HTML5标签:video和canvas:IE11及以下 ...
- html5 调用摄像头 支持IE,JS调用本地摄像头拍照（兼容各大浏览器及IE8+）
最近做的项目遇到了个难题,使用video+canvas+getUserMedia()写的调用本地摄像头拍照不兼容IE. 原因:IE8及以下不支持HTML5标签:video和canvas:IE11及以下 ...
- 使用JS调用本地摄像头录制视频
最近项目中使用到了录制视频功能,为了防止以后再次使用时不记得怎么使用,简单记录一下. function start() { TotalTimelenth=0; videoConstraints.dev ...
- Vue 使用 navigator.mediaDevices.getUserMedia 调用本地摄像头实现录像以及拍照功能
目录 前言 API `MediaDevices.getUserMedia()` 拍照功能实例 完整代码 实现效果 录像功能实例 完整代码 实现效果 总结 前言 最近在做开源实例: Vue.js 实战系 ...
- three.js 调用网络摄像头
three.js 调用网络摄像头 <!DOCTYPE html> <html lang="en"><head><title>thre ...
- ROS调用本地摄像头数据并在rviz里显示
ROS调用本地摄像头数据并在rviz里显示: 1 通过usb_cam驱动包启动摄像头 1.1 创建并编译usb_cam驱动程序 1.2 启动usb_cam_node节点 1.3 在rviz中显示本地摄 ...
- vue调用本地摄像头实现拍照
前言: vue调用本地摄像头实现拍照功能,由于调用摄像头有使用权限,只能在本地运行,线上需用https域名才可以使用. 实现效果: 1.摄像头效果: 2.拍照效果: 实现代码: <templat ...
最新文章
- 【转载】Eclipse 最常用快捷键 (动画讲解)，最简单的一些快捷键
- jsp页面间的传值方法
- 入门级实操教程!从概念到部署，全方位了解K8S Ingress!
- 怎么调整磁盘分区的大小
- WebRTC 音频模块单独编译 --【转载】
- centos 7 yum php swoole_自动化部署技能—搭建企业级YUM仓库
- mysql 序列号_mysql 序列号生成器(转)
- 自动控制原理（来自于b站的笔记整理，深入理解自动控制框架）
- HDU 5956 The Elder（斜率优化DP）
- 初中数学定理公式汇编
- Q-routing发展以及原始实验复现
- FL studio 20简易入门教程 -- 第四篇 -- 钢琴卷帘窗口与单轨乐器编辑界面
- apollo学习之---（19）commen-filter学习
- ubuntu18.04安装Qt5.9.9后没有QtCreator启动图标
- Qt TCP文件传输工具 源码分享
- 区块链产业月报丨中国区块链企业已达1400家，专利申请数量全球领先！
- 自动发帖程序的一些总结
- 深圳云计算培训学习：如何评价我国云计算的发展现状？--【千锋】
- 大学计算机操作题模拟,大学计算机一级模拟操作题1
- 猫儿PDF-Word格式转换经验谈
热门文章
- Response to preflight request doesn‘t pass access control check: No ‘Access-Control-Allow-Origin跨域问题
- has been blocked by CORS policy: Response to preflight request doesn‘t pass access control
- Git如何获取帮助（命令解释/命令详情）？
- 倾听：不只是听见（倾听有哪些挑战？如何利用倾听技巧更好的理解他人）
- Shiro中principal和credential的区别
- 远程视频专家系统，指导系统方案整理
- web前端入门到实战：css中border-style 属性
- Android中使用ADB 命令安装和卸载系统程序
- 【FPGA】Quartus Prime 20.1 精简版下载安装教程记录
- 计算机系统结构 之 指令系统