js调用摄像头拍照,js调用摄像头在线拍照,js调用电脑摄像头拍照

最新推荐文章于 2024-06-07 11:32:43 发布
最新推荐文章于 2024-06-07 11:32:43 发布
阅读量9.1k 收藏 11
点赞数 2
分类专栏： 我的兴趣知识库 文章标签： javaScript 摄像头 网页拍照 人脸采集 人脸识别
<!DOCTYPE html>
<html>


<head>
<meta charset="utf-8">
<title>人脸采集</title>
<script src="jquery.min.js"></script>
</head>


<body>
<video src="" id="video"></video>


<button id="rec">开始录制</button>


<button id="camera">拍照</button>
<!--canvs绘制-->
<canvas width="640" height="480" id="outrec"></canvas>
<!--base64绘制-->
<img id="imgvideo" style="display:none;" width="640" height="480" src="" />


<script type="text/javascript">
var video = document.getElementById("video"); //视频dom元素


//001.开启摄像头
$('#rec').click(function() {
//视频获取
var Devicestate = navigator.mediaDevices.getUserMedia({
video: true
})


Devicestate.then(function(mediaStream) {


video.src = window.URL.createObjectURL(mediaStream);
console.log(mediaStream)
video.onloadedmetadata = function(e) {
video.play();
};


});


//用户拒绝使用,或者没有摄像头
Devicestate.catch(function(err) {
console.log(err.name);
});


});


//002.点击拍照按钮
$('#camera').click(function() {
//视频转换到canvs
var outrec = document.getElementById("outrec");
var outreccon = outrec.getContext("2d");
outreccon.drawImage(video, 0, 0, 640, 480);


var img = outrec.toDataURL("image/jpeg", 0.5)


$('#imgvideo').attr('src', img);


// 调用方式
// 参数一： 选择器，代表canvas
// 参数二： 图片名称，可选
downloadCanvasIamge('#outrec', 'imgvideo');
//关闭摄像窗口页面
setTimeout(function(){
custom_close();
},1100);

});
// 下载Canvas元素的图片
function downloadCanvasIamge(selector, name) {
   // 通过选择器获取canvas元素
   var canvas = document.querySelector(selector)
   // 使用toDataURL方法将图像转换被base64编码的URL字符串
   var url = canvas.toDataURL('image/jpeg')
   // 生成一个a元素
   var a = document.createElement('a')
   // 创建一个单击事件
   var event = new MouseEvent('click')
   
   // 将a的download属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称
   a.download = name || '下载图片名称'
   // 将生成的URL设置为a.href属性
   a.href = url
   
   // 触发a的单击事件
   a.dispatchEvent(event)
}
//关闭摄像窗口页面
function custom_close(){
if(confirm("摄像拍照成功，确认是否关闭本窗口")){
//delete_file();
window.opener=null;
window.open('','_self');
window.close();
}else{


}
}
//关闭窗口之后删除下载的图片文件，ActiveXObject对象只能在IE浏览器创建
/*function delete_file(){
alert("删除文件");
var fso = new ActiveXObject("Scripting.FileSystemObject");
var imgHandle = fso.GetFile("C:\\Users\\yuzhangwei\\Downloads\\imgvideo.jpg"); 
imgHandle.Delete();
}*/


</script>
</body>


</html>
七月-星火流云
关注
  • 2
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery调用摄像头插件
03-31
jQuery调用摄像头插件
jQuery Webcam调用摄像头拍照插件
09-24
jQuery Webcam这个插件为直接在JavaScript中与摄像头通信提供了一个透明的访问层。它通一个SW文件与摄像头交互，可以显示Webcam输出和捕捉图象。如果有多个摄像头，它可以显示可用的摄像头列表，然后供用户选择其中任意一个。
javascript 调用摄像头进行直播/拍照
paipaicui的博客
02-19 371
MediaDevices.getUserMedia() 会提示用户给予使用媒体输入的许可，媒体输入会产生一个MediaStream，里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道（来自硬件或者虚拟视频源，比如相机、视频采集设备和屏幕共享服务等等）、一个音频轨道（同样来自硬件或虚拟音频源，比如麦克风、A/D 转换器等等），也可能是其他轨道类型。它返回一个 Promise 对象，成功后会resolve回调一个 MediaStream 对象。
js调用摄像头
最新发布
fakeend的博客
06-07 393
/1.首先定义一个constraints参数，navigator.mediaDevices.getUserMedia需要一个对象类型的参数,这个参数（constraints）指定了请求的媒体类型（如摄像头/麦克风）和相对应的参数。//调用video标签中的play()方法,play()方法没有参数和返回值，就是单纯的用于播放，与之对应的一个方法pause()可以控制video暂停。//MediaStream(媒体流)是一个接口，你可以把它视为一个对象，它有一些属性和方法。//启用摄像头，并设置尺寸。
js如何调用电脑的摄像头
weixin_30488313的博客
04-18 671
闲来无事，用js写了一个调用摄像头的demo，并用canvas显示保存。这个功能很实用，比如上传用户的头像，即时拍照及时上传。 Html: <video width="200px" height="150px"></video> <canvas width="200px" height="150px"></canvas> ...
vb调用摄像头实现拍照源码_纯JavaScript实现的调用设备摄像头并拍照的功能
weixin_39716877的博客
12-11 820
这篇文章本来不在Jerry计划内的，咱们SAP中国研究院今天已经正式上班了，Jerry也回到工作岗位开始搬砖了。今天一位同事问我关于本文标题描述的功能如何实现，Jerry在网上随便搜了一下，类似的例子非常多，这里随便找了一个例子做了精简，方便Jerry以后重用。其实之前Jerry的文章 只要200行JavaScript代码，就能把特斯拉汽车带到您身边，里面使用到的React-Native加上Vir...
js调用摄像头拍照
Liux- 的博客
06-11 1039
js调用本地摄像头拍照 <!doctype html> <html lang="en"> <head> <title>js调用摄像头拍照上传图片</title> <meta charset="utf-8"> </head> <body> <button onclick="openMedia()">开启摄像头</button> <video id="
PC端html调用摄像头拍照 JS调用摄像头实时显示及拍照
05-19
PC端JS调用摄像头实时显示及拍照, 纯html实现。 方便好用，不需要任何操作。简单容易，点开即用。
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
10-18
主要为大家详细介绍了Vue2.0实现调用摄像头进行拍照功能，以及图片上传功能引用exif.js，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
H5实现web调用摄像头在线照相
11-20
以下是对"H5实现web调用摄像头在线照相"这一主题的详细解释。 首先，我们要了解HTML5中的MediaDevices接口，这是实现在线照相功能的核心。MediaDevices接口提供了一系列方法来获取用户的音频、视频输入源，其中包括...
ASP调用摄像头拍照并保存
08-08
在ASP中调用摄像头拍照并保存的功能，对于在线交互式应用，如用户头像上传、远程会议或者在线教学等场景非常实用。这个功能的实现通常需要借助第三方组件或JavaScript库，以及一些服务器端处理图片的脚本。 首先，`...
js启用摄像头拍照
07-14
js启用摄像头拍照,启用摄像printScreen4web-struts2
基于html5、JS实现的拍照上传图片
01-26
原理：调出摄像头，拍照保存到画布，将图片URi传送到后台
纯JS人脸识别服务，带手动抓拍、自动抓拍功能并获取人脸照片
01-06
纯JS人脸识别服务，带手动抓拍、自动抓拍功能并获取人脸照片。还可以切换摄像头。直接可以运行。(谷歌浏览器访问。)
在线打开PC摄像头并拍照
09-15
使用C#编写的Activex插件，在打开PC端的摄像头设备，该摄像头不能被占用，使用360等浏览器时需打开兼容模式，并允许Activex运行
通用浏览器调用摄像头拍照
07-01
通过浏览器调用摄像头拍摄，支持ie与非ie
H5_JS调用摄像头_预览_拍照_兼容谷歌.rar
07-12
标签中提到了“摄像头拍照Js”，这指的是使用JavaScript来控制摄像头拍照的过程。在HTML5的MediaStream API中，`navigator.mediaDevices.getUserMedia()`方法用于获取用户的媒体流，可以是摄像头或麦克风。这个流...
strack.js调摄像头人脸识别拍照
weixin_44099195的博客
06-13 455
stracking.js调摄像头人脸识别拍照
javaScript实现人脸探测与捕获
陈小陈的博客
06-23 1823
javaScript实现人脸探测与捕获 思路 tracking.js库可以实现捕捉或实时跟踪相机返回的颜色或面部图像信息。基于对特定颜色的检测或人脸面部的出现和移动来触发相对应的检测事件，比如调用该库的人脸探测API可实现人脸探测。进入人脸登录页面系统自动打开相机，视频区域开始监听人脸。当人脸出现在相机前，触发人脸探测机制，通过 标签对人脸位置以方框的形式进行标记，当探测到的人脸趋于稳定状态，拍摄当前人脸，通过 绘制成图片。由于字节流更适用于互联网传输，将采集的人脸图片转为Base64码，以此通过接口传输
js调用摄像头拍照录像
03-23
在JavaScript中，可以通过使用WebRTC（Web实时通信）技术来调用摄像头进行拍照和录像。以下是一种常见的实现方式： 1. 首先，需要在HTML文件中创建一个video元素，用于显示摄像头捕获的视频流： ```html <video id="videoElement" autoplay></video> ``` 2. 接下来，在JavaScript中获取video元素，并使用getUserMedia方法请求用户授权访问摄像头： ```javascript const videoElement = document.getElementById('videoElement'); navigator.mediaDevices.getUserMedia({ video: true }) .then(stream => { videoElement.srcObject = stream; }) .catch(error => { console.error('Error accessing camera:', error); }); ``` 3. 现在，摄像头的视频流已经显示在video元素中了。如果要拍照，可以使用canvas元素将当前视频帧绘制到画布上，并将画布内容保存为图像： ```javascript const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); // 在canvas上绘制当前视频帧 context.drawImage(videoElement, 0, 0, canvas.width, canvas.height); // 将画布内容保存为图像 const image = canvas.toDataURL('image/png'); ``` 4. 如果要录制视频，可以使用MediaRecorder API。首先，创建一个MediaRecorder对象，并指定要录制的媒体流： ```javascript const mediaRecorder = new MediaRecorder(stream); ``` 然后，定义一个数组用于存储录制的视频数据块： ```javascript const chunks = []; // 监听数据可用事件，将数据块添加到数组中 mediaRecorder.addEventListener('dataavailable', event => { chunks.push(event.data); }); ``` 接着，开始录制： ```javascript mediaRecorder.start(); ``` 最后，停止录制并将数据块合并为完整的视频文件： ```javascript mediaRecorder.stop(); mediaRecorder.addEventListener('stop', () => { const videoBlob = new Blob(chunks, { type: 'video/webm' }); const videoUrl = URL.createObjectURL(videoBlob); // 可以将videoUrl赋值给video元素的src属性，以播放录制的视频 }); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值