JS调用本地摄像头功能步骤详解
这次给大家带来JS调用本地摄像头功能步骤详解，JS调用本地摄像头功能的注意事项有哪些，下面就是实战案例，一起来看一下。
今天学习了一下js调用本地摄像头，其实是实现不是很麻烦，下面是代码部分，连接上Tomcat服务器，然后再到网页上打开即可以看到效果了。。快来玩一下吧！
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style>
video {
border: 1px solid #ccc;
display: block;
margin: 0 0 20px 0;
float:left;
}
canvas {
margin-top: 20px;
border: 1px solid #ccc;
display: block;
}
</style>
</head>
<body>
<video width="640" height="480" id="myVideo"></video>
<canvas width="640" height="480" id="myCanvas"></canvas>
<button id="myButton">截图</button>
<button id="myButton2">预览</button>
<button id="myButton3">
<a download="video.png">另存为</a>
</button>
</body>
<script>
window.addEventListener('DOMContentLoaded',function(){
var cobj=document.getElementById('myCanvas').getContext('2d');
var vobj=document.getElementById('myVideo');
getUserMedia({video:true},function(stream){
vobj.src=stream;
vobj.play();
},function(){});
document.getElementById('myButton').addEventListener('click',function(){
cobj.drawImage(vobj,0,0,640,480);
document.getElementById('myButton3').children[0].href=cobj.canvas.toDataURL("image/png");
},false);
document.getElementById('myButton2').addEventListener('click',function(){
window.open(cobj.canvas.toDataURL("image/png"),'_blank');
},false);
},false);
function getUserMedia(obj,success,error){
if(navigator.getUserMedia){
getUserMedia=function(obj,success,error){
navigator.getUserMedia(obj,function(stream){
success(stream);
},error);
}
}else if(navigator.webkitGetUserMedia){
getUserMedia=function(obj,success,error){
navigator.webkitGetUserMedia(obj,function(stream){
var _URL=window.URL || window.webkitURL;
success(_URL.createObjectURL(stream));
},error);
}
}else if(navigator.mozGetUserMedia){
getUserMedia=function(obj,success,error){
navigator.mozGetUserMedia(obj,function(stream){
success(window.URL.createObjectURL(stream));
},error);
}
}else{
return false;
}
return getUserMedia(obj,success,error);
}
</script>
</html>相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是JS调用本地摄像头功能步骤详解的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
如何使用WebSocket和JavaScript实现在线语音识别系统
Dec 17, 2023 pm 02:54 PM
如何使用WebSocket和JavaScript实现在线语音识别系统引言：随着科技的不断发展，语音识别技术已经成为了人工智能领域的重要组成部分。而基于WebSocket和JavaScript实现的在线语音识别系统，具备了低延迟、实时性和跨平台的特点，成为了一种被广泛应用的解决方案。本文将介绍如何使用WebSocket和JavaScript来实现在线语音识别系
如何解决Windows Hello不支持的摄像头问题
Jan 05, 2024 pm 05:38 PM
使用windowshello中，找不到支持的摄像头，常见的原因是使用的摄像头不支持人脸识别、摄像头驱动安装不正确导致的，那么接下来让我们一起去看一下怎么去设置。windowshello找不到支持的摄像头教程：原因一：摄像头驱动安装不对1、一般来说Win10系统可以自动为大部分摄像头安装驱动程序，如下，插上摄像头之后会有通知;2、这时我们打开设备管理器看看，摄像头驱动是否安装好，没有的话就需要手动操作一下。WIN+X，然后选择设备管理器;3、设备管理器窗口中，展开照相机选项，会显示摄像头的驱动型号
WebSocket与JavaScript：实现实时监控系统的关键技术
Dec 17, 2023 pm 05:30 PM
WebSocket与JavaScript：实现实时监控系统的关键技术引言：随着互联网技术的快速发展，实时监控系统在各个领域中得到了广泛的应用。而实现实时监控的关键技术之一就是WebSocket与JavaScript的结合使用。本文将介绍WebSocket与JavaScript在实时监控系统中的应用，并给出代码示例，详细解释其实现原理。一、WebSocket技
如何利用JavaScript和WebSocket实现实时在线点餐系统
Dec 17, 2023 pm 12:09 PM
如何利用JavaScript和WebSocket实现实时在线点餐系统介绍：随着互联网的普及和技术的进步，越来越多的餐厅开始提供在线点餐服务。为了实现实时在线点餐系统，我们可以利用JavaScript和WebSocket技术。WebSocket是一种基于TCP协议的全双工通信协议，可以实现客户端与服务器的实时双向通信。在实时在线点餐系统中，当用户选择菜品并下单
Win11摄像头问题解决方案：解决Win11摄像头无法使用的四种方法
Jan 29, 2024 pm 12:03 PM
摄像头是我们在使用电脑的时候可以帮助我们进行视频聊天的工具，但是也有不少的用户们在使用win11系统的时候发现自己的摄像头不能使用，那么这是怎么回事？用户们可以进入到疑难解答下来进行设置或者是检查相机的权限来进行操作就可以了。下面就让本站来为用户们来仔细的介绍一下Win11摄像头无法使用的四种解决方法吧。Win11摄像头无法使用的四种解决方法解决方法一、使用内置疑难解答1、按+打开设置，然后单击系统选项卡中的疑难解答。WindowsI4、按照屏幕上的说明完成故障排除过程并进行建议的更改。5、使用
如何打开摄像头 教你Win7摄像头怎么打开
Jan 11, 2024 pm 07:48 PM
相信有用户遇到这么一个问题了，win7系统却找不到摄像头快捷在哪，只能从程序里面调出摄像头功能，不知道内情的人还以为是摄像头的驱动没有安装呢，因此给有需要的win7用户在使用摄像头的时候制造了不小的麻烦。下面，小编就来给大家带来了Win7摄像头的打开教程了。使用笔记本电脑的用户都晓得笔记本自带有摄像头功能，不像台式电脑需要连接摄像头，在笔记本win7系统中直接打开摄像头就可以使用，非常方便。不过有用户一般的情况下都没有去摸索，尝试很多方法还是失败，下面，小编就来跟大家说说Win7摄像头的打开方法
汽水音乐本地音乐怎么添加
Feb 23, 2024 pm 07:13 PM
汽水音乐本地音乐怎么添加?汽水音乐APP中可以添加自己喜爱的本地音乐，但是多数的小伙伴不知道如何添加本地音乐，接下来就是小编为用户带来的汽水音乐本地音乐添加方法图文教程，感兴趣的用户快来一起看看吧！汽水音乐使用教程汽水音乐本地音乐怎么添加1、首先打开汽水音乐APP，主页面最下方【音乐】功能专区点击;2、之后进入到播放页面，点击右下角【三个点】图标;3、最后下方展开功能栏，选择其中【下载】按钮即可添加到本地音乐。
win10如何打开摄像头并进行拍照操作
Jan 16, 2024 pm 10:06 PM
如果我们手边没有手机，只有电脑，但是需要拍照就可以使用电脑自带的摄像头来拍照，那么win10摄像头怎么打开拍照呢，其实只要下载一个相机app就可以了。win10摄像头怎么打开拍照：1、首先我们使用快捷键“Win+i”打开设置。2、打开后，进入其中的“隐私”设置。3、然后在“相机”应用权限下把访问权限打开。4、打开后，我们只要打开“相机”应用程序。（如果没有的话，可以去微软商店里下载一个）5、打开后，如果电脑自带摄像头或者安装了外接摄像头就能拍照了。（因为我们没有安装摄像头所以无法演示）
