1. <%@ page language="java" import="java.util.*"  pageEncoding="UTF-8"%>
  2. <%
  3. 	String path = request.getContextPath();
  4. 	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  5. %>
  6. <!doctype html>
  7. <html>
  8.  <head>
  9.   <meta charset="UTF-8">
  10.   <meta name="Generator" content="EditPlus®">
  11.   <meta name="Author" content="">
  12.   <meta name="Keywords" content="">
  13.   <meta name="Description" content="">
  14.   <title>人脸识别</title>
  15.   <style type="text/css">
  16.  *{
  17. 	margin:0;padding:0;
  18.   }
  19. 	body{
  20. 		font-size:12px;
  21. 		font-family:"微软雅黑";
  22. 	}
  23. 	/* message start */
  24. 	.message{color:red;text-align:center;font-size:25px;font-weight:bold;margin:30px auto;}
  25. 	/* end message */
  26. 	/* content start */
  27. 	.content{height:600px;width:800px;margin:100px auto 0px;position:relative;overflow:hidden;}
  28. 	.content .f_scan{width:100%;height:100%;background:url(images/intro.png) no-repeat;background-size:cover;position:absolute;}
  29.     /*end content  *
  30. 	/* btn start */
  31. 	#btn{width:280px;height:50px;border-radius:25px;margin:80px auto;
  32. 	background:#66cc66;font-size:22px;text-align:center;line-height:50px;
  33. 	color:#fff;display:block;text-decoration:none;}
  34. 	#btn:hover{background:#ff9999;}
  35. 	/*end btn  */
  36. 	#canvas{border:1px solid red}
  37.   </style>
  38.  </head>
  39.  <body>
  40. 	<div class="message"></div>
  41. 	<div class="content">
  42. 		<video id="video" width="800" height="600"></video>
  43. 		<canvas id="canvas" width="800" height="600"></canvas>
  44. 		<div class="f_scan"></div>
  45. 	</div>
  46.     <div id="btn">人脸识别</div>
  47.  </body>
  48.  <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
  49.  <script type="text/javascript">
  50.  	$(function(){
  51. 		var video = document.getElementById("video");
  52. 		var canvas =  document.getElementById("canvas");
  53.  		init_getvideo();
  54. 	 		$("#btn").click(function(){
  55. 	 			scan();
  56. 	 			var context =  canvas.getContext("2d");
  57.  
  58. 		 		context.drawImage(video,0,0,800,600);
  59.  
  60. 		 		var base  = canvas.toDataURL("image/png");
  61. 		 		var base64 = base.split("64,")[1];
  62.  
  63. 				$.ajax({
  64. 					type:"post",
  65. 					url:"register.jsp",
  66. 					data:{"imgBase64":base64},
  67. 					success:function(data){
  68. 						 if(data){
  69. 							window.location.href = "http://www.itstaredu.com/";
  70. 						} else {
  71. 							$(".message").html("你长得太丑了！");
  72. 						}
  73.  
  74. 					}
  75.  
  76. 				});
  77.  
  78. 		 	});
  79.  
  80.  	});
  81.  	//初始化调用摄像头
  82.  	function init_getvideo(){
  83.  		var video = document.getElementById("video");
  84.  		//navigator浏览器得到内置对象
  85.  		var getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
  86.  		getUserMedia.call(navigator,{
  87.  			video:true,
  88.  			audio:false
  89.  		},function(LocalMediaStream){
  90.  			//将摄像头的流媒体赋值给video标签src地址
  91.  			video.src = window.URL.createObjectURL(LocalMediaStream);
  92.  			video.onloadedmetadata = function(e){//加载元数据
  93.  				video.play();
  94.  			}
  95.  		},function(e){
  96.  			console.log("获取流媒体错误",e);
  97.  		});
  98.  
  99.  	};
  100.  
  101.  	//图像扫描
  102. 	function scan(){
  103.  		var box = $(".content");
  104.  		$(".f_scan").css({"bottom":box.height()}).animate(
  105.  				{bottom:0},2000,function(){
  106.  					$(this).css({"bottom":box.height()})
  107.  		});
  108.  	} ;
  109.  
  110.  </script>
  111. </html>

　　

js实现初始化调用摄像头的更多相关文章

  1. 使用js调用摄像头拍照

    在一些浏览器里已经可以使用web api调用摄像头功能了. 基于此可以经行拍照摄像功能,网上找了些资料,然后实现了简单的拍照功能 演示地址 bingxl.cn/webrtc.html 代码 <! ...

  2. 微信公众号开发调用摄像头、拍摄或选择图片、OCR识别

     一 .准备工作       <1> 域名认证准备工作 在需要调用摄像头的接口页面引入微信的js,具体地址为:(支持https):http://res.wx.qq.com/open/js/ ...

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

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

  4. C/C++ OpenCV读取视频与调用摄像头

    原文:http://blog.csdn.net/qq78442761/article/details/54173104 OpenCV通过VideoCapture类,来对视频进行读取,调用摄像头 读取视 ...

  5. 转载 iOS js oc相互调用（JavaScriptCore） --iOS调用js

    iOS js oc相互调用(JavaScriptCore)   从iOS7开始 苹果公布了JavaScriptCore.framework 它使得JS与OC的交互更加方便了. 下面我们就简单了解一下这 ...

  6. 调试opencv调用摄像头程序时碰到的问题

    昨天晚上想把opencv学习笔记整理一下,当跑opencv调用摄像头的程序的时候老是出现Assertion failed (size.width>0 && size.height ...

  7. C# - VS2019调用AForge库实现调用摄像头拍照功能

    前言 作为一名资深Delphi7程序员,想要实现摄像头扫描一维码/二维码功能,发现所有免费的第三方库都没有简便的实现办法,通用的OpenCV或者ZXing库基本上只支持XE以上的版本,而且一维码的识别 ...

  8. C#调用摄像头（AForge）实现扫描条码解析（Zxing）功能

    网上找了很多代码,都比较零散,以下代码纯自己手写,经过测试.下面有链接,下载后可以直接使用. 介绍: 自动识别:点击Start按钮会调用PC摄像头,代码内置Timer,会每100毫秒识别一下当前摄像头 ...

  9. Android 调用摄像头功能【拍照与视频】

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/ma_hoking/article/details/28292973 应用场景: 在Android开发 ...

随机推荐

  1. 实战！我用 Wireshark 让你“看得见“ TCP

    每日一句英语学习,每天进步一点点: 前言 为了让大家更容易「看得见」 TCP,我搭建不少测试环境,并且数据包抓很多次,花费了不少时间,才抓到比较容易分析的数据包. 接下来丢包.乱序.超时重传.快速重传 ...

  2. CF915D Almost Acyclic Graph

    题目链接:http://codeforces.com/contest/915/problem/D 题目大意: 给出一个\(n\)个结点\(m\)条边的有向图(无自环.无重边,2 ≤ n ≤ 500, ...

  3. hibernate 异常分析：java.lang.NoClassDefFoundError: org/hibernate/Session

    原因: NoClassDefFoundError的含义就是说编译器找不到org/hibernate/Session这个类的定义 解决方法: 1.检查java中是否导入hibernate 包 impor ...

  4. Verilog代码和FPGA硬件的映射关系(三)

    组合逻辑和FPGA之间的映射关系我们知道了,那时序逻辑和FPGA之间又是一种怎样的映射关系呢?我们就以前面寄存器章节的例子来向大家说明,也一同把当时为什么用异步复位更节约资源的原因告诉大家.我们先来看 ...

  5. 【JavaScript数据结构系列】04-优先队列PriorityQueue

    [JavaScript数据结构系列]04-优先队列PriorityQueue 码路工人 CoderMonkey 转载请注明作者与出处 ## 1. 认识优先级队列 经典的案例场景: 登机时经济舱的普通队 ...

  6. 四、Spring-面向切面编程

    内容 面向切面编程基本原理 通过POJO创建切面 使用@AspectJ注解 为AspectJ切面注入依赖 关键词 横切关注点(cross-cutting concern) 继承 (inheritanc ...

  7. 【Ubuntu】Ubuntu中下载特定版本内核和设置某版本内核为默认启动内核

    0. 基本命令 uname -a # 查看当前所使用内核 dpkg -l | grep linux # dpkg后是lmn的l.查看当前操作系统的内核 dekg -l | grep linux-ima ...

  8. gopher 协议初探

    Gopher 协议初探 最近两天看到了字节脉搏实验室公众号上有一篇<Gopher协议与redis未授权访问>的文章,其中对gopher协议进行了比较详细的介绍,所以打算跟着后面复现学习一下 ...

  9. 【CTFHUB】Web技能树

    Web HTTP协议 请求方式

  10. 设计Dog类 代码参考

    #include <iostream> #include <string> using namespace std; class Dog { private: string n ...