@extends('layouts.app') @section('title','Face Attendance with USB Camera') @section('content')<div class="card p-4"><form method="post" action="/attendance/face" id="faceForm">@csrf <div class="row g-3"><div class="col-md-6"><label>Class/Lab Session</label><select name="class_session_id" class="form-select">@foreach($sessions as $s)<option value="{{$s->id}}">{{$s->session_title}} - {{$s->subject->subject_code}} - {{$s->venue->venue_name}}</option>@endforeach</select></div><div class="col-md-6"><label>Student</label><select name="student_id" class="form-select">@foreach($students as $st)<option value="{{$st->id}}">{{$st->student_id}} - {{$st->full_name}}</option>@endforeach</select></div><div class="col-md-12"><video id="video" width="420" height="320" autoplay class="border rounded"></video><canvas id="canvas" width="420" height="320" style="display:none"></canvas><input type="hidden" name="face_image" id="face_image"></div><div class="col-md-12"><textarea name="remarks" class="form-control" placeholder="Remarks if any"></textarea></div></div><button type="button" onclick="captureFace()" class="btn btn-success mt-3">Capture Face and Save Attendance</button></form></div><script>navigator.mediaDevices.getUserMedia({video:true}).then(s=>{document.getElementById('video').srcObject=s;}).catch(()=>alert('Camera cannot open. Please allow webcam permission.'));function captureFace(){let v=document.getElementById('video'),c=document.getElementById('canvas');c.getContext('2d').drawImage(v,0,0,420,320);document.getElementById('face_image').value=c.toDataURL('image/png');document.getElementById('faceForm').submit();}</script>@endsection