دسترسی از دوربین کاربر با javascript

دسترسی از دوربین کاربر با 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;
}


دمو برنامه

دوربین کاربر با javascript


دانلود سورس دسترسی از دوربین کاربر با javascript

ارسال نظر

جهت استفاده از کد حتما از تگ pre استفاده نمایید .

contact us