Node.js调用本地摄像头拍摄上传

最新推荐文章于 2024-08-10 08:38:24 发布
最新推荐文章于 2024-08-10 08:38:24 发布
阅读量1.2w 收藏 8
点赞数
分类专栏： Web前端 js node.js 文章标签： node javascript node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qfxsxhfy/article/details/52510503
版权
Web前端 同时被 3 个专栏收录
31 篇文章 0 订阅
订阅专栏
node.js
5 篇文章 0 订阅
订阅专栏
js
4 篇文章 0 订阅
订阅专栏

server.js

var express=require('express');
var fs=require('fs'); //文件操作
var bodyParser = require('body-parser');


var app=express(); //创建web应用程序
app.use(bodyParser.urlencoded({extended:false}));
app.use(bodyParser.json());


//获取所有数据
app.post("/uploadPics",function(req,res){
    var bitmap=new Buffer(req.body.imageData,'base64');
    fs.writeFile("./images/"+new Date().getTime()+".jpg",bitmap,function(err){
        if(err){
            res.send("0");
        }else {
            res.send("1");
        }
        res.end();
    });
});


//获取user下面的静态文件
app.get("/*",function(req,res){
    res.sendFile(__dirname+req.url);
});


app.listen(6666);


index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>调用摄像头</title>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/camera.js"></script>
<style type="text/css">
#camera_errbox {
width: 320px;
height: auto;
border: 1px solid #333333;
padding: 10px;
color: #fff;
text-align: left;
margin: 20px auto;
font-size: 14px;
}


#camera_errbox b {
padding-bottom: 15px;
}


.borderstyle{
-webkit-box-shadow:0 0 5px 3px rgba(255,0,0,.6),0 0 5px 6px rgba(0,182,0,.6),0 0 5px 10px rgba(255,255,0,.6);
-moz-box-shadow:0 0 5px 3px rgba(255,0,0,.6),0 0 5px 6px rgba(0,182,0,.6),0 0 5px 10px rgba(255,255,0,.6);
-ms-box-shadow:0 0 5px 3px rgba(255,0,0,.6),0 0 5px 6px rgba(0,182,0,.6),0 0 5px 10px rgba(255,255,0,.6);
-o-box-shadow:0 0 5px 3px rgba(255,0,0,.6),0 0 5px 6px rgba(0,182,0,.6),0 0 5px 10px rgba(255,255,0,.6);
box-shadow:0 0 5px 3px rgba(255,0,0,.6),0 0 5px 6px rgba(0,182,0,.6),0 0 5px 10px rgba(255,255,0,.6);
}


#navy_video{
float:left;
}


#canvas{
float:left;
margin-left:20px;
}


</style>
</head>
<body onLoad="init(this)" οncοntextmenu="return false" onselectstart="return false">
<center>
<video id="navy_video" width="320px" height="240px" autoplay class="borderstyle"></video>
<input id="snap" type="button" value="拍照"/>
<button οnclick="convertCanvasToImage()">保存</button>
<div id="camera_errbox">
<b>请点击“允许”按钮，授权网页访问您的摄像头！</b>
<div>若您并未看到任何授权提示，则表示您的浏览器不支持Media Capture或您的机器没有连接摄像头设备。</div>
</div>
<canvas id="canvas" width="160px" height="120px" class="borderstyle"></canvas>
</center>
</body>
</html>


camera.js

function init(t) {
accessLocalWebCam("navy_video");
}


window.URL = window.URL || window.webkitURL || window.msURL || window.oURL;
navigator.getUserMedia = navigator.getUserMedia|| navigator.webkitGetUserMedia || navigator.mozGetUserMedia|| navigator.msGetUserMedia;


function isChromiumVersionLower() {
var ua = navigator.userAgent;
var testChromium = ua
.match(/AppleWebKit\/.* Chrome\/([\d.]+).* Safari\//);
return (testChromium && (parseInt(testChromium[1].split('.')[0]) < 19));
}


function successsCallback(stream) {
document.getElementById('camera_errbox').style.display = 'none';
document.getElementById('navy_video').src = (window.URL && window.URL.createObjectURL) ? window.URL.createObjectURL(stream): stream;


}


function errorCallback(err) {


}


function accessLocalWebCam(id) {
try {
navigator.getUserMedia({
video : true
}, successsCallback, errorCallback);
} catch (err) {
navigator.getUserMedia('video', successsCallback, errorCallback);
}
}




window.addEventListener("DOMContentLoaded", function() {
var canvas = document.getElementById("canvas"), context = canvas
.getContext("2d"), video = document
.getElementById("navy_video"), videoObj = {
"video" : true
}, errBack = function(error) {
console.log("相机调用失败...", error.code);
};


if (navigator.getUserMedia) {
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if (navigator.webkitGetUserMedia) {
navigator.webkitGetUserMedia(videoObj, function(stream) {
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}


document.getElementById("snap").addEventListener("click", function() {
context.drawImage(video, 0, 0,$("#canvas").width(), $("#canvas").height());
});
}, false);




function convertCanvasToImage() {
var pic = document.getElementById("canvas").toDataURL("image/png");
pic = pic.replace(/^data:image\/(png|jpg);base64,/, "")


$.post('uploadPics',{imageData:pic},function(data){
data=parseInt($.trim(data));
if(data==0){
alert("图片上传失败...");
}else{
alert("图片上传成功...");
}
});
}


晨枫navy
关注
专栏目录
Node.js 通过https服务器利用js调用网络摄像头
小辣抓
03-05 1万+
前言最近写了一个js调用摄像头的代码，整体实现是非常简单，但是放到服务器上，通过外网访问后就会出现一个警告 我们需要通过js调用摄像头，但在此之前我们需要创建一个https服务器。所以，这篇博文就是帮助大家如何通过js 调用PC端的摄像头。如何通过js调用摄像头先看一下js调用摄像头的具体实现。 整个实现是基于Google提供的webRTC技术，它主要用来让浏览器实时获取和交换视频、音频和数
JS调用本地摄像头
芳
10-29 2045
JS调用本地USB摄像头&获取截图 <!doctype html> <html lang="en"> <head> <title>GET VIDEO</title> <meta charset="utf-8"> </head> <body> <input type="but...
nodejs-web调用摄像头
10-30
使用navigator下的一个getUserMedia方法调用摄像头，并进行一些视频处理。
Camera.js 使用教程
最新发布
gitblog_00416的博客
08-10 457
Camera.js 使用教程 camera.jsJavaScript wrapper for HTML5 camera input项目地址:https://gitcode.com/gh_mirrors/ca/camera.js 一、项目目录结构及介绍 Camera.js 是一个基于 HTML5 getUserMedia API 的简单封装库，旨在提供跨浏览器的用户摄像头视频流访问功能。以下是该项...
推荐项目：Node Camera - 轻松在Node.js中访问和流媒体摄像头
gitblog_00030的博客
06-14 474
推荐项目：Node Camera - 轻松在Node.js中访问和流媒体摄像头 node-cameraAccess and stream web camera in nodejs using opencv and websockets.项目地址:https://gitcode.com/gh_mirrors/no/node-camera 项目介绍 Node Camera 是一个开源的Node.js...
调用摄像头 在线直播-nodetest-HTML-代码
05-24
一个web网页，用HTML写的，css样式、JavaScript也在里面，会动，有特效，学习前端的朋友可以试着下载来看看，有些地方是可以借鉴的，挺不错的
node-webcam:Nodejs跨平台网络摄像头使用情况
05-23
跨平台网络摄像头的使用 安装 Linux #Linux relies on fswebcam currently #Tested on ubuntu sudo apt-get install fswebcam Mac OSX #Mac OSX relies on imagesnap #Repo https://github.com/rharder/imagesnap #Avaliable through brew brew install imagesnap 视窗 包含独立exe。 参见 用法 API用法 //Available in nodejs var NodeWebcam = require ( "node-webcam" ) ; //Default options var opts = { //Picture related width : 1280 ,
vue调用本地摄像头实现拍照功能
10-14
在许多需要交互的Web应用中，调用本地设备摄像头并实现拍照功能是很有实用价值的一项技术。本文主要介绍了如何在Vue项目中调用本地摄像头并实现拍照功能。 首先，需要了解的是Web摄像头功能的实现依赖于浏览器提供...
Node.js-获取polyfill支持所有主流浏览器甚至是IE6IE7IE8.....
08-10
总结来说，为了在各种浏览器，包括古老的IE6、IE7和IE8，实现Node.js开发的兼容性，我们可以使用polyfill库来模拟现代JavaScript特性。通过正确地安装和引入这些库，我们可以确保代码在各种环境下都能正常运行，从而...
node解码视频流，调用海康视频摄像头
u011485634的博客
09-16 1647
node解码视频流，调用海康视频摄像头
不使用flash的摄像头拍照,nodejs实现
03-11
不使用flash的摄像头拍照,使用nodejs 技术,html5来实现
node-linuxcam:从网络摄像头捕获并转换为jpeg。 仅Linux（v4l2）
05-12
节点linuxcam 从网络摄像头捕获图像并将其转换为rgb24。 仅Linux（v4l2） 安装 npm install linuxcam 用法 var cam = require ( 'linuxcam' ) ; cam . start ( "/dev/video0" , 320 , 240 ) ; var frame = cam . frame ( ) ; // Buffer 该缓冲区包含rgb24数据，您可以使用jpeg-fresh模块将其转换。 var Jpeg = require ( 'jpeg-fresh' ) . Jpeg ; var jpeg = new Jpeg ( frame . data , frame . width , frame . height , 'rgb' ) ; var jpeg_image = jpeg . encodeSync ( ) ; /
JS实现调用本地摄像头功能示例
10-18
主要介绍了JS实现调用本地摄像头功能,结合实例形式分析了Javascript基于浏览器对本地硬件操作简单实现技巧,需要的朋友可以参考下
nodered 实现win10摄像头自动拍照，并且可以识别各种码
03-28
node-red-contrib-image-tools 实现二维码识别
树莓派+摄像头: Node.js打造1D/2D条码扫描仪
yushulx的专栏
03-07 2829
树莓派正在被广泛应用在工业领域，条形码扫描就是其中一个应用。 准备工作 树莓派UVC摄像头Node.js for ARM支持ARM的条形码SDK: dbr-V4.2.0-linux-armv7l.zipnode-gyp npm install -g node-gyp   Camera数据获取 安装Node模块v4l2camera用于获取摄像头数据: npm insta
node-media-server摄像头环境搭建
@小刘同学nice
07-07 929
1.下载安装包：https://npmmirror.com/mirrors/node/v18.16.1/node-v18.16.1-x64.msi。4.将node配置在环境变量中。2.验证node，npm版本。3.更改npm全局路径。
使用nodejs和python构建一个远程监控系统1
2401_84093899的博客
04-14 947
一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。分享一些简单的前端面试题以及学习路线给大家，狂戳这里即可获取由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）一个好的心态和一个坚持的心很重要。
使用nodejs和python构建一个远程监控系统1，前端开发项目
2301_79655473的博客
04-05 595
前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档，需要的读者可以戳这里免费领取！[外链图片转存中…(img-ncbWjrXD-1712296789054)]由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档，需要的读者可以戳这里免费领取！
node.js搭建直播系统
09-14
### 回答1： 搭建直播系统可以使用 Node.js 来实现。 1. 首先，你需要了解 Node.js 的基本概念和用法，并安装 Node.js 环境。 2. 其次，你可以使用 Node.js 搭建服务器，用于接收客户端的请求和发送响应。 3. 为了实现直播功能，你可以使用 Node.js 中的流 (stream) 模块。流模块可以帮助你实时地处理和传输数据。 4. 接下来，你可以使用 Node.js 框架，如 Express、Koa 等，来简化开发过程。 5. 最后，你可以使用 Node.js 的子进程 (child process) 模块，来调用第三方的转码工具，将视频流转换为浏览器可以播放的格式。 以上是 Node.js 搭建直播系统的一个大致流程。如果你还有其他问题，可以随时给我提问。 ### 回答2： Node.js搭建直播系统是一个可行的选择。Node.js是一个基于事件驱动的JavaScript运行环境，适合用于构建高性能、可扩展的网络应用。它的非阻塞I/O模型使得它能够处理大量并发连接，而直播系统通常需要支持大量的同时在线用户。 在搭建直播系统时，可以使用Node.js的一些主要特性来实现： 1. WebSocket通信：Node.js提供了WebSocket模块，用于实现双向通信。直播系统可以利用WebSocket来实现实时的音视频传输和弹幕互动功能。 2. 非阻塞I/O：Node.js的非阻塞I/O模型使其能够同时处理多个连接，对于直播系统来说非常重要。直播系统需要同时接收和处理来自多个用户的音视频数据流，并将其传输给其他用户。 3. 实时数据传输：直播系统需要实时传输音视频数据给观看者。Node.js可以利用其事件机制和非阻塞I/O，实时处理、编码和传输音视频数据流，使得观看者可以几乎实时地观看到直播内容。 4. 弹幕互动：Node.js可以使用WebSocket实现弹幕互动功能，通过实时将用户发送的弹幕消息广播给其他观众，提高用户互动性和参与度。 需要注意的是，搭建直播系统不仅仅需要Node.js，还需要其他配套的技术组件，如音视频编解码、推流服务器、存储系统等。Node.js作为后端服务器，负责接收用户请求、处理数据传输和处理业务逻辑。整个直播系统需要有一定的架构设计和规划，包括高可用性、负载均衡和容错机制等。 总之，通过使用Node.js可以快速搭建直播系统，实现高性能、实时的音视频传输和互动功能。通过充分发挥Node.js的特点，可以满足大量同时在线用户的需求。 ### 回答3： Node.js是一个基于Chrome V8引擎的JavaScript运行环境，可以用于搭建各种类型的应用程序，包括直播系统。 要搭建一个基于Node.js的直播系统，首先需要安装Node.js运行环境和相关的模块。接下来，可以使用Node.js的一些特性和插件来进行实时的视频流传输和处理。 一种常见的方法是使用WebRTC（Web实时通信）技术来实现直播功能。WebRTC是一种支持实时音视频传输的开放标准，可以在浏览器中直接使用。 对于搭建直播系统，我们可以通过Node.js提供的Express框架来创建一个服务器，并在该服务器上创建WebSocket连接，用于实现实时数据传输。通过使用WebRTC的API，可以获取用户的音视频流并进行传输。可以使用MediaStream对象来捕获摄像头和麦克风的输入，然后通过RTCPeerConnection对象将流传输到其他用户。 在服务器端，可以使用Node.js的一些流处理库来处理和转发音视频流。例如，可以使用Node Media Server来处理音视频流，并将其转发给其他用户。 除了直播功能，也可以使用Node.js来实现一些其他的功能，比如用户认证、聊天室、弹幕等等。 总之，通过使用Node.js和相关的技术，我们可以搭建一个功能强大的直播系统，实现实时的音视频传输和处理，并提供其他附加功能，以满足用户的需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值