<!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调摄像头的更多相关文章

  1. 基于微信小程序的失物招领系统的Postmortem

    基于微信小程序的失物招领系统的Postmortem 设想和目标 1.我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 对于我们团队要解决的问题和实现的功能在项目开始就 ...

  2. [web开发] 利用微信小程序开发上海大学失物招领平台

    我从开始学微信小程序到最后完全写完这个小程序耗时四天,可以说开发难度非常之低,门槛也非常低,之前从来没接触过微信小程序,重新写下开发记录. 先放图: 1.前端开发 前端我用到了iview的ui框架,因 ...

  3. JSP+Spring+SpringMVC+Hibernate+Mysql实现的校园失物招领网站

    项目简介 项目来源于:https://github.com/wenlongup/LostAndFound 因原github仓库无数据库文件,经过本人修改,现将该仓库重新上传至个人gitee仓库. ht ...

  4. 发布HTML5 2D游戏引擎YEngine2D

    关于YEngine2D YEngine2D是一个开源的.采用HTML5技术和Javscript语言创建的2D游戏框架,用来构建web二维游戏. GitHub地址 最新版本 v0.1.2 浏览器支持 C ...

  5. web HTML5 调用摄像头的代码

    最近公司要求做一个在线拍照的功能,具体代码如下: <html> <head> <title>html5调用摄像头拍照</title> <style ...

  6. html5调用摄像头实现拍照

    技术时刻都在前进着.我们的需求也是时刻在改变着.最近在开发中遇到了用户进行账号注册时需要个人图像,网站提供自动拍照功能.还有在登录了PC之后,手机端进行登录时只需要扫描一下PC上的二维码就可以登录.这 ...

  7. [转]html5调用摄像头实例

    原文:https://blog.csdn.net/binquan_liang/article/details/79489989 最近在学习在做HTML5的项目,看了博客上html5调用摄像头拍照的文章 ...

  8. html5打开摄像头并用canvas模拟拍照

    网上很多关于用HTML5打开本地摄像头的文章,但各有瑕疵.根据我自己的亲身体验,我分享一下我用HTML5打开摄像头的经验. 废话不多说,直接看代码. HTML代码: <video id=&quo ...

  9. html5 chrome 摄像头 &&bootstrap

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

  1. jquery $(this).attr $(this).val方法使用介绍--useful

    $(this).attr(key); 获取节点属性名的值,相当于getAttribute(key)方法,本文整理了一些相关的示例,感兴趣的朋友可以参考下 $(this).attr(key); 获取节点 ...

  2. c++:参数型别的推导

    STL源码剖析--侯捷 总结 尽管现在的很多语言支持参数类型的判别,但是c/c++并不支持这一特性. 但是我们可以通过一些技巧使得c++具有自动判别参数类型的特性. 模板 我们都知道在模板类和模板函数 ...

  3. 在浏览器控制台调试php程序

    jsp中用system.out.print如果是在eclipse中调试的话,eclipse会自动拦截系统输出流, 然后输出在控制台中,而http输出流则不受影响,php好像无此功能, PHP是一种服务 ...

  4. 快速创建php server

    mkdir testmv test.html testphp -S localhost:8082http://localhost:8082/test.html

  5. kernel解读之 pick_next_rt_entity

    1328 static struct sched_rt_entity *pick_next_rt_entity(struct rq *rq, 1329 struct rt_rq *rt_rq) 133 ...

  6. Cut the Cake(大数相乘)

      MMM got a big big big cake, and invited all her M friends to eat the cake together. Surprisingly o ...

  7. Light OJ 1011 - Marriage Ceremonies（状压DP）

    题目大意: 有N个男人,和N个女人要互相匹配,每个男人和每个女人有个匹配值. 并且匹配只能是1对1的. 问所有人都匹配完成,最大的匹配值是多少?   状压DP,暴力枚举就OK了, 这个题目略坑,因为他 ...

  8. Ubuntu 12.04 下安装 Eclipse

    方法一:(缺点是安装时附加openjdk等大量程序并无法去除,优点是安装简单) $ sudo apt-get install eclipse 方法二:(优点是安装内容清爽,缺点是配置麻烦)1.安装JD ...

  9. OSGI在Eclipse中执行-console出错的问题

    在Eclipse中安装osgi插件后,执行出现异常:

  10. HDOJ(HDU) 2138 How many prime numbers(素数-快速筛选没用上、)

    Problem Description Give you a lot of positive integers, just to find out how many prime numbers the ...