-
Notifications
You must be signed in to change notification settings - Fork 0
/
cam.html
126 lines (108 loc) · 4.26 KB
/
cam.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Camera Access Example</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
}
video {
width: 80%;
height: auto;
border: 1px solid #ddd;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Camera Access Example</h1>
<video id="video" autoplay></video>
<br>
<button onclick="startCamera()">Start Camera</button>
<!-- Cart Table -->
<h2>Cart</h2>
<table id="cart">
<thead>
<tr>
<th>Item</th>
<th>Image</th>
</tr>
</thead>
<tbody>
<!-- Items will be added here -->
</tbody>
</table>
<!-- Include ZXing Library -->
<script src="https://unpkg.com/@zxing/library@latest"></script>
<script>
async function startCamera() {
try {
const devices = await navigator.mediaDevices.enumerateDevices();
// Filter video input devices (cameras)
const videoDevices = devices.filter(device => device.kind === 'videoinput');
if (videoDevices.length === 0) {
alert("No camera found.");
return;
}
// Try to find the rear camera first, otherwise use the first available camera
let rearCamera = videoDevices.find(device => device.label.toLowerCase().includes('back'));
let frontCamera = videoDevices.find(device => device.label.toLowerCase().includes('front'));
let selectedCamera = rearCamera || frontCamera || videoDevices[0];
// Request permission for the selected camera
const stream = await navigator.mediaDevices.getUserMedia({
video: { deviceId: selectedCamera.deviceId }
});
const video = document.getElementById('video');
// Stop any existing stream
if (video.srcObject) {
video.srcObject.getTracks().forEach(track => track.stop());
}
// Set the new stream as the source for the video element
video.srcObject = stream;
video.play();
// Initialize barcode scanner after the camera is started
initializeBarcodeScanner(video);
} catch (error) {
console.log("Error accessing camera: ", error);
alert("Unable to access camera. Please check your permissions and try again.");
}
}
function initializeBarcodeScanner(videoElement) {
const codeReader = new ZXing.BrowserMultiFormatReader();
codeReader.decodeFromVideoDevice(null, 'video', (result, err) => {
if (result) {
console.log("Barcode detected: ", result.text);
storeBarcodeInLocalStorage(result.text);
}
if (err && !(err instanceof ZXing.NotFoundException)) {
console.error("Error scanning barcode: ", err);
}
});
}
function storeBarcodeInLocalStorage(code) {
let items = [];
// Check if there are existing items in local storage
if (localStorage.getItem('items')) {
// Retrieve existing items from local storage
items = JSON.parse(localStorage.getItem('items'));
}
// Check if the item is already present in the array
const existingItem = items.find(item => item.code === code);
if (existingItem) {
console.log("Item already exists in the cart.");
return;
}
// Create a new item object
let newItem = { code: code, name: 'Oneplus Earpods', price: 4566, quantity: 1 };
// Add the new item to the array
items.push(newItem);
localStorage.setItem('items', JSON.stringify(items));
alert("Item added to cart.");
}
</script>
</body>
</html>