دسترسی از دوربین کاربر با javascript
دوربین کاربر با javascript – با استفاده از getUserMedia می توانیم هم صدا و هم تصویر کاربر را به صورت stream داشته باشیم که قصدمان دسترسی از دوربین کاربر است .
همچنین جهت گرفتن عکس با canvas کار خواهیم کرد که شامل context هم جهت تنظیم طول و عرض عکس می شود .
دمو برنامه و لینک دانلود را می توانید از پایین مقاله مشاهده کنید .
فایل index.html
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>Rapidcode.iR - سورس کد</title>
<link rel="stylesheet" href="static/css/main.css">
</head>
<body>
<div class="container">
<a id="introduce" href="https://rapidcode.ir" target="_blank">رپید کد • کتابخانه مجازی برنامه نویسان</a>
<video id="videoStream" width="720" height="405" autoplay></video>
<button id="takeScreenShot">ذخیره تصویر</button>
<canvas id="canvas" width="720" height="405"></canvas>
</div>
<script src="static/js/app.js"></script>
</body>
</html>
اسکریپت app.js
const video = document.getElementById('videoStream');
const takeScreenshot = document.getElementById("takeScreenShot");
const canvas = document.getElementById("canvas");
const context = canvas.getContext('2d');
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
video.srcObject = stream;
video.play();
});
}
takeScreenshot.addEventListener("click", function() {
context.drawImage(video, 0, 0, video.getAttribute("width"), video.getAttribute("height"));
});
فایل main.css
video{
display: block;
}
button{
display: block;
margin-top: 25px;
}
دمو برنامه
لیست نظرات
سلام خدا قوت تصویر ندارم Uncaught (in promise) NotAllowedError: play() can only be initiated by a user gesture.
درود ، بررسی شد سورس مشکلی نداره .
استاد چجور میشه این دوربین رو از صفحه سایت بنهان و به یه ادرس دیگه که خودمون فقط بتونیم ببینیم بفرستیم؟
سلام می تونید از hls استفاده کنید که یک مبحث مفصل هست .