当前位置:网站首页>JS call camera
JS call camera
2022-07-06 16:02:00 【Star age Cao Botao】
<!doctype html>
<html lang="en">
<head>
<title>GET VIDEO</title>
<meta charset="utf-8">
</head>
<body>
<input type="button" title=" Turn on camera " value=" Turn on camera " onclick="getMedia()" />
<video id="video" width="500px" height="500px" autoplay="autoplay"></video>
<canvas id="canvas" width="500px" height="500px"></canvas>
<button id="snap" onclick="takePhoto()"> Taking pictures </button>
<script> // get video Camera area let video = document.getElementById("video"); function getMedia() {
let constraints = {
video: {
width: 500, height: 500}, audio: true }; /* Here's a new way :H5 New media interface navigator.mediaDevices.getUserMedia() This method will prompt the user whether to allow media input ,( Media input mainly includes camera , Video capture devices , Screen sharing service , Microphone ,A/D Converter, etc ) Back to a Promise object . If the user agrees to use the permission , Will be MediaStream Object as resolve() The parameters of are passed to then() If the user denies permission , Or the requested media resource is not available , Will be PermissionDeniedError As reject() The parameters of are passed to catch() */ let promise = navigator.mediaDevices.getUserMedia(constraints); promise.then(function (MediaStream) {
video.srcObject = MediaStream; video.play(); }).catch(function (PermissionDeniedError) {
console.log(PermissionDeniedError); }) } function takePhoto() {
// get Canvas object let canvas = document.getElementById("canvas"); let ctx = canvas.getContext('2d'); ctx.drawImage(video, 0, 0, 500, 500); } </script>
</body>
</html>
边栏推荐
- mysql导入数据库报错 [Err] 1273 – Unknown collation: ‘utf8mb4_0900_ai_ci’
- 初入Redis
- HDU - 6024 Building Shops(女生赛)
- 【练习-8】(Uva 246)10-20-30==模拟
- Research Report of cylindrical grinder industry - market status analysis and development prospect forecast
- Interesting drink
- 【练习-4】(Uva 11988)Broken Keyboard(破损的键盘) ==(链表)
- Essai de pénétration (1) - - outils nécessaires, navigation
- Information security - threat detection - detailed design of NAT log access threat detection platform
- 对iptables进行常规操作
猜你喜欢
【练习-5】(Uva 839)Not so Mobile(天平)
C语言必背代码大全
洛谷P1102 A-B数对(二分,map,双指针)
渗透测试 ( 3 ) --- Metasploit Framework ( MSF )
D - Function(HDU - 6546)女生赛
Penetration test (1) -- necessary tools, navigation
X-forwarded-for details, how to get the client IP
渗透测试 ( 1 ) --- 必备 工具、导航
Penetration test (7) -- vulnerability scanning tool Nessus
MySQL import database error [err] 1273 - unknown collation: 'utf8mb4_ 0900_ ai_ ci’
随机推荐
渗透测试 ( 7 ) --- 漏洞扫描工具 Nessus
[teacher Gao UML software modeling foundation] collection of exercises and answers for level 20 cloud class
mysql导入数据库报错 [Err] 1273 – Unknown collation: ‘utf8mb4_0900_ai_ci’
frida hook so层、protobuf 数据解析
0-1背包问题(一)
China chart recorder market trend report, technology dynamic innovation and market forecast
Cost accounting [18]
C语言学习笔记
Web based photo digital printing website
[exercise-8] (UVA 246) 10-20-30== simulation
China potato slicer market trend report, technical dynamic innovation and market forecast
China earth moving machinery market trend report, technical dynamic innovation and market forecast
Cost accounting [17]
Gartner: five suggestions on best practices for zero trust network access
Opencv learning log 15 count the number of solder joints and output
HDU - 6024 Building Shops(女生赛)
信息安全-史诗级漏洞Log4j的漏洞机理和防范措施
Perform general operations on iptables
Cost accounting [14]
区间和------离散化