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
AI Hentai Generator
Generate AI Hentai for free.
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
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.
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.
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
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 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.
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.
How to open the camera and take pictures in win10
Jan 16, 2024 pm 10:06 PM
If we don’t have a mobile phone at hand and only have a computer, but we need to take pictures, we can use the camera that comes with the computer to take pictures. So how do we open the Win10 camera to take pictures? In fact, we only need to download a camera app. How to open the Win10 camera to take pictures: 1. First, we use the shortcut key "Win+i" to open the settings. 2. After opening it, enter the "Privacy" settings. 3. Then turn on the access permission under the "Camera" application permissions. 4. After opening, we only need to open the "Camera" application. (If not, you can go to the Microsoft store to download one.) 5. After opening it, you can take pictures if the computer has a built-in camera or an external camera is installed. (We can't demonstrate because we don't have a camera installed)
win10 test camera
Feb 12, 2024 pm 08:45 PM
1. First check whether the camera permission is turned on. The "wini" shortcut key opens the settings window, click on the privacy entry to view the camera below. Find the camera in the left column, and it says access is turned off on the right. Click Change to Open. Enter camera in the Cortana search box, and then open the computer camera. You can also right-click and pin to the Start screen or taskbar. The editor has not installed a camera and cannot display this interface. If the camera is installed but not showing up, the driver may be missing. If the camera is not installed, the imaging device will not be found in Device Manager. In this case, you can use the network card device as a demonstration. Follow these steps: Right-click This PC, select Manage, and then expand Device Manager. Find net in list
