There are many real situations that require camera processing. Today I found a way to get started and learn to use it.
Using the browser to call the camera in JavaScript will use the following method: navigator.getUserMedia({video:true,audio:false},success,error)
Parameter 1: It is an object containing the camera and microphone {video:true,audio:false }
true means open, false means close
Parameter 2: call success callback success
parameter 3: call failure callback error
need:
Call the video tag of the camera and microphone
to display the camera image.
Place the image captured by the camera on the canvas tag of the page.
Implementation code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
video{
width: 300px;
height: 300px;
border: 1px solid #ccc;
}
canvas{
width: 300px;
height: 300px;
border: 1px solid red;
}
</style>
<title>Document</title>
</head>
<body>
<video autoplay id='video'></video>
<canvas id="output"></canvas>
</body>
</html>
Many thanks to the author of this article
How JavaScript calls the camera_js calls the camera_Mushuilianxin's Blog-CSDN Blog