失物招领发布-HTML5调摄像头
<!DOCTYPE html>
<html lang="zh-cn"> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>主页</title> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <!-- core CSS -->
<link href="bootstrap3/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap3/css/bootstrap-theme.min.css" rel="stylesheet">
<!--响应式-->
<link href="css/responsive.css" rel="stylesheet">
<!--自定义CSS样式-->
<link href="css/main.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head> <body>
<form>
<!--<div>
<label for="index0">拾到失物时，如知道遗失者学号或者工号。。。。。。。</label>
</div>-->
<span>
<label for="index1">类型</label>
</span>
<select class="form-control">
<option>寻物</option>
<option>招领</option> </select> <!--<input type="text" class="form-control" placeholder="Text input">--> <div class="form-group">
<label for="index2">标题</label>
<input type="title" class="form-control" id="index2" placeholder="标题">
</div>
<div class="form-group">
<label for="index3">日期</label>
<input type="date" class="form-control" id="index3" placeholder="日期">
</div>
<div class="form-group">
<label for="index4">地点</label>
<input type="place" class="form-control" id="index4" placeholder="地点">
</div>
<div class="form-group">
<label for="index5">联系人</label>
<input type="name" class="form-control" id="index5" placeholder="联系人姓名">
</div> <select class="form-control">
<option>手机</option>
<option>QQ</option>
<input type="index" class="form-control" id="index6" placeholder="">
</select> <div class="form-group">
<label for="index7">详情</label>
<textarea class="form-control" rows="7"></textarea>
</div> <!--<div class="form-group">
<label for="index8">图片</label>
<input type="file" id="exampleInputFile">
<p class="help-block">请选择你要上传的图片</p>
</div>--> <div>
<button id='picture' style="width: 100%;" onclick="window.open('pic.html')">拍照上传</button>
</div>
<br /> <button type="submit" class="btn btn-default btn-lg btn-block">发布</button> </form> </body> </html>
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head> <body>
<video id="video" autoplay="" style='width:640px;height:480px'></video>
<div>
<button id='picture' style="width: 100%;">确定</button>
</div>
<canvas id="canvas" width="640" height="480"></canvas> <script type="text/javascript">
var video = document.getElementById("video");
var context = canvas.getContext("2d");
var errocb = function() {
console.log('sth wrong!');
}
if (navigator.getUserMedia) { // 标准的API
navigator.getUserMedia({
"video": true
}, function(stream) {
video.src = stream;
video.play();
}, errocb);
} else if (navigator.webkitGetUserMedia) { // WebKit 核心的API
navigator.webkitGetUserMedia({
"video": true
}, function(stream) {
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errocb);
}
document.getElementById("picture").addEventListener("click", function() {
context.drawImage(video, 0, 0, 640, 480);
});
</script> </body> </html>
失物招领发布-HTML5调摄像头的更多相关文章
- 基于微信小程序的失物招领系统的Postmortem
基于微信小程序的失物招领系统的Postmortem 设想和目标 1.我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 对于我们团队要解决的问题和实现的功能在项目开始就 ...
- [web开发] 利用微信小程序开发上海大学失物招领平台
我从开始学微信小程序到最后完全写完这个小程序耗时四天,可以说开发难度非常之低,门槛也非常低,之前从来没接触过微信小程序,重新写下开发记录. 先放图: 1.前端开发 前端我用到了iview的ui框架,因 ...
- JSP+Spring+SpringMVC+Hibernate+Mysql实现的校园失物招领网站
项目简介 项目来源于:https://github.com/wenlongup/LostAndFound 因原github仓库无数据库文件,经过本人修改,现将该仓库重新上传至个人gitee仓库. ht ...
- 发布HTML5 2D游戏引擎YEngine2D
关于YEngine2D YEngine2D是一个开源的.采用HTML5技术和Javscript语言创建的2D游戏框架,用来构建web二维游戏. GitHub地址 最新版本 v0.1.2 浏览器支持 C ...
- web HTML5 调用摄像头的代码
最近公司要求做一个在线拍照的功能,具体代码如下: <html> <head> <title>html5调用摄像头拍照</title> <style ...
- html5调用摄像头实现拍照
技术时刻都在前进着.我们的需求也是时刻在改变着.最近在开发中遇到了用户进行账号注册时需要个人图像,网站提供自动拍照功能.还有在登录了PC之后,手机端进行登录时只需要扫描一下PC上的二维码就可以登录.这 ...
- [转]html5调用摄像头实例
原文:https://blog.csdn.net/binquan_liang/article/details/79489989 最近在学习在做HTML5的项目,看了博客上html5调用摄像头拍照的文章 ...
- html5打开摄像头并用canvas模拟拍照
网上很多关于用HTML5打开本地摄像头的文章,但各有瑕疵.根据我自己的亲身体验,我分享一下我用HTML5打开摄像头的经验. 废话不多说,直接看代码. HTML代码: <video id=&quo ...
- html5 chrome 摄像头 &&bootstrap
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
随机推荐
- 得到指定进程PID
//#include "targetver.h" #include "stdio.h" #include <windows.h> #include ...
- iscc2016-basic-心灵鸡汤
用winhex打开发现 ISCCCongratulations! You need remember: DEath IS JUST A PaRT oF lIFE,sOMeTHInG wE'RE aLL ...
- Unity3d开发IOS游戏 基础
Unity3d开发IOS游戏 基础 @阿龙 - 649998群 1.先说明两个问题,我在WIN7下面的U3D里面,用了雅黑字体,但是导出为ios后,字体就看不见了,这是为什么呢?这是需要在MAC下找 ...
- Zabbix的集中式监控
相对于传统的ZABBIX硬件系统级监控(CPU,内存,硬盘,网卡),应用级的监控就显得有些复杂了. 如果对不同的应该来不同的应用,配置会很多的. 如果我们能在一个指定的AGENT上监控所有的APACH ...
- 动态规划（决策单调优化）：BZOJ 4518 [Sdoi2016]征途
4518: [Sdoi2016]征途 Time Limit: 10 Sec Memory Limit: 256 MBSubmit: 532 Solved: 337[Submit][Status][ ...
- 光学字符识别OCR
1.功能: 光学字符识别(OCR,Optical Character Recognition)是指对文本资料进行扫描,然后对图像文件进行分析处理,获取文字及版面信息的过程 2.典型应用: 名片扫描 3 ...
- lightoj 1407 2-sat
这题的英语either...or....很蛋疼: m中,1:x与y至少一个出席:2:x出席,y随便,x不出席,y也不出席----这有个坑,可以推出y出席x也一定出席(这个关系必须要连上):3x与y至少 ...
- Intellij调试debug
先编译好要调试的程序. 1.设置断点 选定要设置断点的代码行,在行号的区域后面单击鼠标左键即可. 2.开启调试会话 点击红色箭头指向的小虫子,开始进入调试. IDE下方出现Debug视图,红色的箭头指 ...
- cgdb调试postgresql
之前一直用gdb调试代码,最近在搞pg的时候用了一个cgdb,体验很好,调试pg代码的时候真的很方便. 本文主要讲解在进行pg内核开发的时候,如何搭建一个环境,用cgdb方便快捷的调试postgres ...
- 关于lucene的IndexSearcher单实例,对于索引的实时搜索
Lucene版本:3.0 一般情况下,lucene的IndexSearcher都要写成单实例,因为每次创建IndexSearcher对象的时候,它都需要把索引文件加载进来,如果访问量比较大,而索引也比 ...