失物招领发布-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>