<div class="top">
<nav class="navbar navbar-default" role="navigation" >
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">简云</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<div>
<form class="navbar-form navbar-left" role="search" action="http://www.">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
</form>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span>注册</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span>登录</a></li>
</ul>
</div>
</div>
</nav>
<!--
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta content="telephone=no" name="format-detection" />
<title>测试</title>
</head>
<body>
<img id="imgd" src="">
<video id="video" width="320" height="240" autoplay></video>
<button id="snap">拍摄</button>
<canvas id="canvas" width="320" height="240"></canvas>
<script>
window.addEventListener("DOMContentLoaded", function() {
var canvas = document.getElementById("canvas"),//调用canvas接口
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function(error) {//错误处理
console.log("Video capture error: ", error.code);
};
if(navigator.getUserMedia) {//调用html5拍摄接口
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;//摄像机属于视频流，所以当然要输出到html5的video标签中了
video.play();//开始播放
}, errBack);
} else if(navigator.webkitGetUserMedia) { //WebKit内核调用html5拍摄接口
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);//同上
video.play();//同上
}, errBack);
}
else if(navigator.mozGetUserMedia) { //moz内核调用html5拍摄接口
navigator.mozGetUserMedia(videoObj, function(stream){
video.src = window.URL.createObjectURL(stream);//同上
video.play();//同上
}, errBack);
}
}, false);
document.getElementById("snap")
.addEventListener("click", function() {//获取拍照按钮绑定事件
var canvans = document.getElementById("canvas"),//调用canvas接口
context = canvas.getContext("2d");
context.drawImage(video, 0, 0, 640, 480);//调用canvas接口的drawImage方法绘制当前video标签中的静态图片，其实就是截图
var imgData = canvans.toDataURL();//获取图片的base64格式的数据
//这里就可以写上传服务器代码了
});
</script>
</body>
</html>
-->
plunk (1).zip （9个子文件） 
plunk (1) 
index.html 1KB
.DS_Store 6KB app main.ts 354B .DS_Store 6KB component .DS_Store 6KB header.html 4KB header.component.ts 353B app.module.ts 637B app.component.ts 164B资源评论
减肥啊啊啊啊啊2017-11-19就一普通demo 不值5分 没有博客说明的内容 就是一初步脚手架
放个会飞的屁2018-12-20还没用，用用再看，先打个四分
liangtao05102017-06-22骗子，不要脸
firstflag_csdn2017-09-05很好用，赞一个
