<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操作摄像头的更多相关文章

  1. JS操作未跨域iframe里的DOM

    这里简单说明两个方法,都是未跨域情况下在index.html内操作b.html内的 DOM. 如:index.html内引入iframe,在index内如何用JS操作iframe内的DOM元素? 先贴 ...

  2. ThinkPHP 表单提交操作成功后执行JS操作如何刷新父页面或关闭当前页等操作

    ThinkPHP 表单提交操作成功后执行JS操作如何刷新父页面或关闭当前页等操作 .操作成功后刷新父页面 $this->assign('jumpUrl', "javascript:wi ...

  3. jquery.cookie.js 操作cookie实现记住密码功能的实现代码

    jquery.cookie.js操作cookie实现记住密码功能,很简单很强大,喜欢的朋友可以参考下.   复制代码代码如下: //初始化页面时验证是否记住了密码 $(document).ready( ...

  4. JS操作JSON总结

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScript 原生格式,这意 ...

  5. [荐]使用Js操作注册表

    使用Js操作注册表 要操作注册表需要通过ActiveX控件调用WScript.shell对象,通过该对象的一些方法来操作. WshShell对象:可以在本地运行程序.操纵注册表内容.创建快捷方式或访问 ...

  6. 框架操作DOM和原生js操作DOM比较

    问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...

  7. js操作textarea方法集合

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

  8. js 操作ASP.NET服务器控件

    js 操作ASP.NET服务器控件 在ASP.NET中使用js时,js获取DOM元素时,经常获取不到,这是因为获取的方法有误,现在介绍一方法,解决如何使用js获取ASP.NET控件在浏览器端生成htm ...

  9. js 操作select和option

    js 操作select和option 1.动态创建select function createSelect(){ var mySelect = document.createElement_x(&qu ...

随机推荐

  1. ztree选父不选子选子不选父

    var setting = { data: { simpleData: { enable: true } } ,check: { enable: true , chkStyle: 'checkbox' ...

  2. python 排序和查找算法

    一.搜索 1.顺序查找 数据存储在具有线性或顺序关系的结构中时,可顺序访问查找 def sequential_search(ilist, item): pos = 0 while pos < l ...

  3. 【设计模式】Factory

    前言 这篇博客将包括两种设计模式,一种是工厂模式,一种是抽象工厂模式.不管是哪一种设计模式,本质上在解决的问题是对象创建的问题.工厂,可以是简简单单的一个函数,也可以是一个有具体实现的类,也可以是一个 ...

  4. [b0009] 玩Hadoop中碰到的各种错误

    1. Error: java.lang.RuntimeException: java.lang.ClassNotFoundException: Class mp.filetest.WordCount2 ...

  5. Modbus协议 CRC 校验码

    CRC(循环冗余校验)在线计算 http://www.ip33.com/crc.html 里面的8005的多项式值,但网上看到的算法都是用A001来异或的 ---------------------- ...

  6. 10.Redis 主从架构

    作者:中华石杉 Redis 主从架构 单机的 redis,能够承载的 QPS 大概就在上万到几万不等.对于缓存来说,一般都是用来支撑读高并发的.因此架构做成主从(master-slave)架构,一主多 ...

  7. PHP扩展使用-CURL

    一.简介 功能:是一个可以使用URL的语法模拟浏览器来传输数据的工具库,支持的协议http.https.ftp.gopher.telnet.dict.file.ldap 资源类型:cURL 句柄和 c ...

  8. TensorFlow GPU版本的安装与调试

    笔者采用python3.6.7+TensorFlow1.12.0+CUDA10.0+CUDNN7.3.1构建环境 PC端配置为GTX 1050+Intel i7 7700HQ 4核心8线程@2.8GH ...

  9. React中ref的三种用法 可以用来获取表单中的值 这一种类似document.getXXId的方式

    import React, { Component } from "react" export default class MyInput extends Component { ...

  10. 201777010217-金云馨《面向对象程序设计(java)》第十六周学习总结

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...