js如何调用电脑的摄像头
2024-09-30 04:54:17
闲来无事，用js写了一个调用摄像头的demo，并用canvas显示保存。这个功能很实用，比如上传用户的头像，即时拍照及时上传。
Html:
<video width="200px" height="150px"></video>
<canvas width="200px" height="150px"></canvas>
<p>
<button id="start">打开摄像头</button>
<button id="snap">截取图像</button>
<button id="close">关闭摄像头</button>
</p>
JavaScript:
window.onload = function () {
var canvas = document.getElementsByTagName('canvas')[0],
context = canvas.getContext('2d'),
video = document.getElementsByTagName("video")[0],
snap = document.getElementById("snap"),
close = document.getElementById("close"),
start = document.getElementById("start"),
MediaStreamTrack;
start.addEventListener('click', function () {
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({
video: true,
audio: true
}).then(function (stream) {
console.log(stream);
MediaStreamTrack=typeof stream.stop==='function'?stream:stream.getTracks()[1];
video.src=(window.URL).createObjectURL(stream);
video.play();
}).catch(function(err){
console.log(err);
});
}else if(navigator.getMedia){
navigator.getMedia({
video: true
}).then(function (stream) {
console.log(stream);
MediaStreamTrack=stream.getTracks()[1];
video.src=(window.webkitURL).createObjectURL(stream);
video.play();
}).catch(function(err){
console.log(err);
});
}
});
snap.addEventListener('click', function () {
context.drawImage(video, 0, 0,200,150);
});
close.addEventListener('click', function () {
MediaStreamTrack && MediaStreamTrack.stop();
});
}
总结：上面这个Demo主要用到浏览器的摄像头组件，然后再将图片源赋给canvas。其中遇到一个坑：代码需要托管到服务器端，即在客户端访问才能调用浏览器成功。这种禁止本地调用的做法可能是出于浏览器的安全性和用户的隐私考虑。
最新文章
- 解析opencv中Box Filter的实现并提出进一步加速的方案（源码共享）。
- ABAP之声母韵母
- 动态时间规整（DTW） 转载
- MyEclipse启动Tomcat服务器时老是跳到Debug调试上
- 使用SoundPool播放音效
- yarn的基本组成和工作流程
- Windows系统中IIS 6.0+Tomcat服务器环境的整合配置过程
- synchronized关键字小结（一）
- Java 截取反斜杠--java使用split拆分特殊字符
- RESTEasy 3.X Helloworld
- 从C++到Qt（命令行编译，讲解原理）
- 9.19.3 反射和Properties(重要)
- android之获取屏幕的宽度和高度
- HDU 3374 String Problem
- JAVA实现等腰三角形
- Java学习——面向对象【3】
- Linux 下安装mysql 5.7
- 第5天(半天)【shell编程初步、grep及正则表达式】
- ASP.NET Core 简单实现七牛图片上传（FormData 和 Base64）
- JAVASCRIPT开发HTML5游戏--斗地主(网络对战PART4)