<%@ page language="java" import="java.util.*"  pageEncoding="UTF-8"%>

<%

	String path = request.getContextPath();

	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!doctype html>

<html>

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>人脸识别</title>

  <style type="text/css">

 *{

	margin:0;padding:0;

  }

	body{

		font-size:12px;

		font-family:"微软雅黑";

	}

	/* message start */

	.message{color:red;text-align:center;font-size:25px;font-weight:bold;margin:30px auto;}

	/* end message */

	/* content start */

	.content{height:600px;width:800px;margin:100px auto 0px;position:relative;overflow:hidden;}

	.content .f_scan{width:100%;height:100%;background:url(images/intro.png) no-repeat;background-size:cover;position:absolute;}

    /*end content  *

	/* btn start */

	#btn{width:280px;height:50px;border-radius:25px;margin:80px auto;

	background:#66cc66;font-size:22px;text-align:center;line-height:50px;

	color:#fff;display:block;text-decoration:none;}

	#btn:hover{background:#ff9999;}

	/*end btn  */

	#canvas{border:1px solid red}

  </style>

 </head>

 <body>

	<div class="message"></div>

	<div class="content">

		<video id="video" width="800" height="600"></video>

		<canvas id="canvas" width="800" height="600"></canvas>

		<div class="f_scan"></div>

	</div>

    <div id="btn">人脸识别</div>

 </body>

 <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>

 <script type="text/javascript">

 	$(function(){

		var video = document.getElementById("video");

		var canvas =  document.getElementById("canvas");

 		init_getvideo();

	 		$("#btn").click(function(){

	 			scan();

	 			var context =  canvas.getContext("2d");

		 		context.drawImage(video,0,0,800,600);

		 		var base  = canvas.toDataURL("image/png");

		 		var base64 = base.split("64,")[1];

				$.ajax({

					type:"post",

					url:"register.jsp",

					data:{"imgBase64":base64},

					success:function(data){

						 if(data){

							window.location.href = "http://www.itstaredu.com/";

						} else {

							$(".message").html("你长得太丑了！");

						}

					}

				});

		 	});

 	});

 	//初始化调用摄像头

 	function init_getvideo(){

 		var video = document.getElementById("video");

 		//navigator浏览器得到内置对象

 		var getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);

 		getUserMedia.call(navigator,{

 			video:true,

 			audio:false

 		},function(LocalMediaStream){

 			//将摄像头的流媒体赋值给video标签src地址

 			video.src = window.URL.createObjectURL(LocalMediaStream);

 			video.onloadedmetadata = function(e){//加载元数据

 				video.play();

 			}

 		},function(e){

 			console.log("获取流媒体错误",e);

 		});

 	};

 	//图像扫描

	function scan(){

 		var box = $(".content");

 		$(".f_scan").css({"bottom":box.height()}).animate(

 				{bottom:0},2000,function(){

 					$(this).css({"bottom":box.height()})

 		});

 	} ;

 </script>

</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. spark机器学习从0到1决策树(六）

      一.概念 决策树及其集合是分类和回归的机器学习任务的流行方法. 决策树被广泛使用,因为它们易于解释,处理分类特征,扩展到多类分类设置,不需要特征缩放,并且能够捕获非线性和特征交互. 诸如随机森林和 ...

  2. Java基础知识面试题及答案-整理

    1.String类可以被继承吗?  不能.String类在声明中使用final关键字修饰符.使用final关键字修饰的类无法被继承. Java语言的开发者为什么要将String类定义为final类呢? ...

  3. JAVA基础4---序列化和反序列化深入整理（JDK序列化）

    一.什么是序列化和反序列化? 序列化:将对象状态信息转化成可以存储或传输的形式的过程(Java中就是将对象转化成字节序列的过程) 反序列化:从存储文件中恢复对象的过程(Java中就是通过字节序列转化成 ...

  4. C#正则表达式基础

    namespace ---> System.Text.RegularExpressions. static void Main(string[] args) { // if (IsInputMa ...

  5. 人工智能中小样本问题相关的系列模型演变及学习笔记（二）：生成对抗网络 GAN

    [说在前面]本人博客新手一枚,象牙塔的老白,职业场的小白.以下内容仅为个人见解,欢迎批评指正,不喜勿喷![握手][握手] [再啰嗦一下]本文衔接上一个随笔:人工智能中小样本问题相关的系列模型演变及学习 ...

  6. GC总结

    概述 GC(Garbage Collection),需要完成的3件事 哪些内存需要回收? 什么时候回收? 如何回收? 为什么需要了解GC和内存分配?更好的监控和调节 排查各种内存溢出,内存泄漏 避免G ...

  7. 剑指Offer之链表中倒数第k个结点

    题目描述 输入一个链表,输出该链表中倒数第k个结点.   思路:首先计算出链表的长度,再计算出倒数第k个是正数第几个,找到该结点即可. public ListNode FindKthToTail(Li ...

  8. 【JavaScript数据结构系列】00-开篇

    [JavaScript数据结构系列]00-开篇 码路工人 CoderMonkey 转载请注明作者与出处 ## 0. 开篇[JavaScript数据结构与算法] 大的计划,写以下两部分: 1[JavaS ...

  9. JVM调优总结（五）-典型配置举例

    以下配置主要针对分代垃圾回收算法而言. 堆大小设置 年轻代的设置很关键 JVM中最大堆大小有三方面限制:相关操作系统的数据模型(32-bt还是64-bit)限制:系统的可用虚拟内存限制:系统的可用物理 ...

  10. 微信小程序语音同步智能识别的实现案例

    目录 一.背景 二.同声传译插件介绍 1. 微信小程序后台添加插件 2. 微信小程序启用插件 三.语音同步转换的前端实现 1.界面UI与操作 2.代码实现 四.后端SpringBoot实现语音文件上传 ...