JS操作摄像头
<script src="javascript/jquery-1.9.1.min.js"></script> <fieldset>
<legend>第一步:读取户口本</legend> <button id="btnOpen2" class="btn btn-flat btn-primary" type="button" >打开摄像头</button> 可用摄像头<select id="videoSource2" class="form-control" style="width:200px; display:inline-block" ></select> <button id="snap2" class="btn btn-success btn-flat" style="display:none" type="button">拍照</button> <br /> <div id="vdoOne2" style="display:none">
<video id="video2" style="margin-top:15px;margin-bottom:15px;" width="350" autoplay></video>
<canvas id="canvasPreview2" style="margin-top:15px;" width="350" height="255"></canvas>
<canvas id="canvasUpload2" style="display:none;" width='350' height='255'></canvas> </div> <script>
var videoSelect2 = document.getElementById('videoSource2');
var videoElement2 = document.getElementById('video2'); var canvasPreview2 = document.getElementById('canvasPreview2');
var canvasUpload2 = document.getElementById('canvasUpload2');
var contextPreview2 = canvasPreview2.getContext('2d');
var contextUpload2 = canvasUpload2.getContext('2d'); // navigator.mediaDevices.enumerateDevices().then(gotDevices).then(getStream).catch(handleError);
videoSelect2.onchange = getStream2; function gotDevices2(deviceInfos) { for (var i = 0; i < deviceInfos.length; ++i) {
var deviceInfo = deviceInfos[i];
var option = document.createElement('option');
option.value = deviceInfo.deviceId;
if (deviceInfo.kind === 'videoinput') {
option.text = deviceInfo.label || '摄像头 ' + (videoSelect2.length + 1);
videoSelect2.appendChild(option);
} else {
console.log('Found ome other kind of source/device: ', deviceInfo);
}
} } var _streamCopy2 = null;
function getStream2() {
if (_streamCopy2 != null) {
try {
_streamCopy2.stop(); // if this method doesn't exist, the catch will be executed.
} catch (e) {
_streamCopy2.getVideoTracks()[0].stop(); // then stop the first video track of the stream
}
} var constraints2= {
audio: false,
video: {
optional: [
{
sourceId: videoSelect2.value
}
]
}
}; navigator.mediaDevices.getUserMedia(constraints2).then(gotStream2).catch(handleError2);
} function gotStream2(stream) {
_streamCopy2 = stream; // make stream available to console
videoElement2.srcObject = stream;
} function handleError2(error) {
alert(error.name + ": " + error.message);
} $("#btnOpen2").click(
function () { navigator.mediaDevices.enumerateDevices().then(gotDevices2).then(getStream2).catch(handleError2); $("#vdoOne2").css("display", "block");
$("#video2").css("display", "block");
$("#snap2").css("display", "inline-block");
$("#canvasPreview2").css("display", "none"); }); $("#snap2").click(
function () { var _h = $("#canvasPreview2").prop("height"); contextPreview2.drawImage(videoElement2, 0, 0, 350, _h);
contextUpload2.drawImage(videoElement2, 0, 0, 350, _h); $("#video2").css("display", "none");
$("#snap2").css("display", "none");
$("#canvasPreview2").css("display", "block"); var image = document.getElementById("canvasUpload2").toDataURL("image/jpeg");
image = image.replace('data:image/jpeg;base64,', ''); if (_streamCopy2 != null) {
try {
_streamCopy2.stop(); // if this method doesn't exist, the catch will be executed.
} catch (e) {
_streamCopy2.getVideoTracks()[0].stop(); // then stop the first video track of the stream
} } // $("#img_base64_2").val(image);
//$.post("face_id_img_Save.aspx", { data: image, filename: $("#hf_snapname").val() }); }); </script>
JS操作摄像头的更多相关文章
- JS操作未跨域iframe里的DOM
这里简单说明两个方法,都是未跨域情况下在index.html内操作b.html内的 DOM. 如:index.html内引入iframe,在index内如何用JS操作iframe内的DOM元素? 先贴 ...
- ThinkPHP 表单提交操作成功后执行JS操作如何刷新父页面或关闭当前页等操作
ThinkPHP 表单提交操作成功后执行JS操作如何刷新父页面或关闭当前页等操作 .操作成功后刷新父页面 $this->assign('jumpUrl', "javascript:wi ...
- jquery.cookie.js 操作cookie实现记住密码功能的实现代码
jquery.cookie.js操作cookie实现记住密码功能,很简单很强大,喜欢的朋友可以参考下. 复制代码代码如下: //初始化页面时验证是否记住了密码 $(document).ready( ...
- JS操作JSON总结
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScript 原生格式,这意 ...
- [荐]使用Js操作注册表
使用Js操作注册表 要操作注册表需要通过ActiveX控件调用WScript.shell对象,通过该对象的一些方法来操作. WshShell对象:可以在本地运行程序.操纵注册表内容.创建快捷方式或访问 ...
- 框架操作DOM和原生js操作DOM比较
问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...
- js操作textarea方法集合
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- js 操作ASP.NET服务器控件
js 操作ASP.NET服务器控件 在ASP.NET中使用js时,js获取DOM元素时,经常获取不到,这是因为获取的方法有误,现在介绍一方法,解决如何使用js获取ASP.NET控件在浏览器端生成htm ...
- js 操作select和option
js 操作select和option 1.动态创建select function createSelect(){ var mySelect = document.createElement_x(&qu ...
随机推荐
- ztree选父不选子选子不选父
var setting = { data: { simpleData: { enable: true } } ,check: { enable: true , chkStyle: 'checkbox' ...
- python 排序和查找算法
一.搜索 1.顺序查找 数据存储在具有线性或顺序关系的结构中时,可顺序访问查找 def sequential_search(ilist, item): pos = 0 while pos < l ...
- 【设计模式】Factory
前言 这篇博客将包括两种设计模式,一种是工厂模式,一种是抽象工厂模式.不管是哪一种设计模式,本质上在解决的问题是对象创建的问题.工厂,可以是简简单单的一个函数,也可以是一个有具体实现的类,也可以是一个 ...
- [b0009] 玩Hadoop中碰到的各种错误
1. Error: java.lang.RuntimeException: java.lang.ClassNotFoundException: Class mp.filetest.WordCount2 ...
- Modbus协议 CRC 校验码
CRC(循环冗余校验)在线计算 http://www.ip33.com/crc.html 里面的8005的多项式值,但网上看到的算法都是用A001来异或的 ---------------------- ...
- 10.Redis 主从架构
作者:中华石杉 Redis 主从架构 单机的 redis,能够承载的 QPS 大概就在上万到几万不等.对于缓存来说,一般都是用来支撑读高并发的.因此架构做成主从(master-slave)架构,一主多 ...
- PHP扩展使用-CURL
一.简介 功能:是一个可以使用URL的语法模拟浏览器来传输数据的工具库,支持的协议http.https.ftp.gopher.telnet.dict.file.ldap 资源类型:cURL 句柄和 c ...
- TensorFlow GPU版本的安装与调试
笔者采用python3.6.7+TensorFlow1.12.0+CUDA10.0+CUDNN7.3.1构建环境 PC端配置为GTX 1050+Intel i7 7700HQ 4核心8线程@2.8GH ...
- React中ref的三种用法 可以用来获取表单中的值 这一种类似document.getXXId的方式
import React, { Component } from "react" export default class MyInput extends Component { ...
- 201777010217-金云馨《面向对象程序设计(java)》第十六周学习总结
项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...