دریافت دوربین و نمایش آن در صفحه HTML با JavaScript ✌️ 🖐
💻 برای دریافت دوربین کاربر و نمایش آن در صفحه HTML با JavaScript، می توانید از مراحل زیر استفاده کنید:
1⃣ اول باید دسترسی رو از کاربر با کمک این کد بگیرید (و البته که باید المنت هامون رو هم پیدا بکنیم):
🔢 بعد باید توی بخش html ، از تگ video استفاده کنید که قبلا توی این پست کامل و مختصر معرفیش کرده بودیم!
و حالا این یک خط کد رو هم توی بخشی که گفتم برای مراحل 2 و 3 هستش اضافه کنید:
🔢 این بخش اختیاری هست و میتونید انجامش ندید ، ولی برای این هستش که کاربر بتونه وضعیت دوربینش رو کنترل کنه و ببینه براش دوربین رو نشون بده یا متوقف بشه! یک نگاهی به کد بندازید که منظورم رو متوجه بشید!
این دو خط کد html رو زیر تگ video مون بزارید:
و این چند خط کد جاوااسکریپتِ ناقابل رو بعد از اون محدوده ای که توی قسمت 1 گفتیم بنویسید :
✅ به طور خلاصه الان کد شما باید یه همچین شکل و شمایلی گرفته باشه :
⭕️ این پست فقط جهت آموزش به شما عزیزان بوده و مسئولیت هیچگونه استفاده غیر قانونی ای از این آموزش بر عهده تیم کداکسپلور نمی باشد.
#camera #html #javascript
☕️ @CodeExplore
const myVideo = document.getElementById('myVideo');
const startButton = document.getElementById('startButton');
const stopButton = document.getElementById('stopButton');
navigator.mediaDevices.getUserMedia({ video: true })
.then(function(stream) {
// اینجا برای مراحل 2 و 3 هستش و مال وقتیه که درخواست شما تایید بشه، فعلا بهش اهمیت ندین.
})
.catch(function(error) {
//اینجا برای وقتیه که درخواست شما رد میشه
console.error("Error accessing the camera:", error);
});<video id="myVideo" width="640" height="360"></video>
و حالا این یک خط کد رو هم توی بخشی که گفتم برای مراحل 2 و 3 هستش اضافه کنید:
myVideo.srcObject = stream;
این دو خط کد html رو زیر تگ video مون بزارید:
<button id="startButton">شروع</button>
<button id="stopButton">توقف</button>
و این چند خط کد جاوااسکریپتِ ناقابل رو بعد از اون محدوده ای که توی قسمت 1 گفتیم بنویسید :
startButton.addEventListener('click', function() {
myVideo.play();
});
stopButton.addEventListener('click', function() {
myVideo.pause();
});<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>نمایش دوربین کاربر</title>
</head>
<body>
<h1>نمایش دوربین کاربر</h1>
<video id="myVideo" width="640" height="360"></video>
<button id="startButton">شروع</button>
<button id="stopButton">توقف</button>
<script>
const myVideo = document.getElementById('myVideo');
const startButton = document.getElementById('startButton');
const stopButton = document.getElementById('stopButton');
navigator.mediaDevices.getUserMedia({ video: true })
.then(function(stream) {
myVideo.srcObject = stream;
})
.catch(function(error) {
console.error("Error accessing the camera:", error);
});
startButton.addEventListener('click', function() {
myVideo.play();
});
stopButton.addEventListener('click', function() {
myVideo.pause();
});
</script>
</body>
</html>
#camera #html #javascript
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡10🔥4❤🔥3