Web Front-end
JS Tutorial
Detailed explanation of the steps to call the local camera function using JS
Detailed explanation of the steps to call the local camera function using JS
This time I will bring you a detailed explanation of the steps for calling the local camera function with JS. What are the precautions for calling the local camera function with JS. The following is a practical case, let's take a look.
Today I learned about using js to call a local camera. In fact, it is not very troublesome to implement. The following is the code part. Connect to the Tomcat server, and then open it on the web page to see the effect. . Come and have some fun!
<!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>I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
Detailed explanation of the steps to implement json object array sorting by object properties in JS
Detailed explanation of the steps to implement collision detection in JS
The above is the detailed content of Detailed explanation of the steps to call the local camera function using JS. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1672
14
1428
52
1332
25
1277
29
1257
24
How to implement an online speech recognition system using WebSocket and JavaScript
Dec 17, 2023 pm 02:54 PM
How to use WebSocket and JavaScript to implement an online speech recognition system Introduction: With the continuous development of technology, speech recognition technology has become an important part of the field of artificial intelligence. The online speech recognition system based on WebSocket and JavaScript has the characteristics of low latency, real-time and cross-platform, and has become a widely used solution. This article will introduce how to use WebSocket and JavaScript to implement an online speech recognition system.
WebSocket and JavaScript: key technologies for implementing real-time monitoring systems
Dec 17, 2023 pm 05:30 PM
WebSocket and JavaScript: Key technologies for realizing real-time monitoring systems Introduction: With the rapid development of Internet technology, real-time monitoring systems have been widely used in various fields. One of the key technologies to achieve real-time monitoring is the combination of WebSocket and JavaScript. This article will introduce the application of WebSocket and JavaScript in real-time monitoring systems, give code examples, and explain their implementation principles in detail. 1. WebSocket technology
How to use JavaScript and WebSocket to implement a real-time online ordering system
Dec 17, 2023 pm 12:09 PM
Introduction to how to use JavaScript and WebSocket to implement a real-time online ordering system: With the popularity of the Internet and the advancement of technology, more and more restaurants have begun to provide online ordering services. In order to implement a real-time online ordering system, we can use JavaScript and WebSocket technology. WebSocket is a full-duplex communication protocol based on the TCP protocol, which can realize real-time two-way communication between the client and the server. In the real-time online ordering system, when the user selects dishes and places an order
How to fix Windows Hello unsupported camera issue
Jan 05, 2024 pm 05:38 PM
When using Windows Shello, a supported camera cannot be found. The common reasons are that the camera used does not support face recognition and the camera driver is not installed correctly. So let's take a look at how to set it up. Windowshello cannot find a supported camera tutorial: Reason 1: The camera driver is not installed correctly 1. Generally speaking, the Win10 system can automatically install drivers for most cameras, as follows, there will be a notification after plugging in the camera; 2. At this time, we open the device Check the manager to see if the camera driver is installed. If not, you need to do it manually. WIN+X, then select Device Manager; 3. In the Device Manager window, expand the camera option, and the camera driver model will be displayed.
How to open the camera. Teach you how to open the Win7 camera.
Jan 11, 2024 pm 07:48 PM
I believe some users have encountered such a problem. The Win7 system cannot find the camera shortcut. They can only call up the camera function from the program. People who don’t know the inside story think that the camera driver is not installed, so I will give it to those who need it. Win7 users have caused a lot of trouble when using the camera. Next, the editor will bring you a tutorial on how to open the Win7 camera. Users who use laptops all know that laptops have built-in camera functions. Unlike desktop computers that need to connect the camera, you can directly open the camera in the laptop win7 system and use it, which is very convenient. However, some users usually do not try to explore it, and try many methods but still fail. Now, the editor will tell you how to open the Win7 camera.
Win11 Camera Problem Solutions: Four Ways to Fix Win11 Camera Not Working
Jan 29, 2024 pm 12:03 PM
The camera is a tool that can help us conduct video chats when using computers, but many users find that their cameras cannot be used when using the win11 system. So what is going on? Users can go into the troubleshooter to set up or check the camera permissions to operate. Let this site carefully introduce to users four solutions to the problem that the Win11 camera cannot be used. Four solutions to the Win11 camera not working Solution 1. Use the built-in troubleshooter 1. Press + to open settings, and then click Troubleshooting in the system tab. Windows I4, follow the on-screen instructions to complete the troubleshooting process and make the recommended changes. 5. Use
How to add local music to soda music
Feb 23, 2024 pm 07:13 PM
How to add local music to Soda Music? You can add your favorite local music to Soda Music APP, but most friends don’t know how to add local music. Next is the graphic tutorial on how to add local music to Soda Music brought by the editor. , interested users come and take a look! Tutorial on using soda music. How to add local music to soda music. 1. First open the soda music APP and click on the [Music] function area at the bottom of the main page; 2. Then enter the play page and click the [three dots] icon in the lower right corner; 3. Finally Expand the function bar below and select the [Download] button to add it to local music.
JavaScript and WebSocket: Building an efficient real-time weather forecasting system
Dec 17, 2023 pm 05:13 PM
JavaScript and WebSocket: Building an efficient real-time weather forecast system Introduction: Today, the accuracy of weather forecasts is of great significance to daily life and decision-making. As technology develops, we can provide more accurate and reliable weather forecasts by obtaining weather data in real time. In this article, we will learn how to use JavaScript and WebSocket technology to build an efficient real-time weather forecast system. This article will demonstrate the implementation process through specific code examples. We
