TIF_E41201693/detection.html

78 lines
2.7 KiB
HTML

{% extends "index.html" %}
{% block content %}
<h4 class="title" style="font-style: 'Roboto';
font-size: 28px;
color: #FFFFFF;
padding: 12px 10px;
border-radius: 12px;
background-color: #007BFF;">
Sistem Isyarat Bahasa Indonesia / {% if title %} {{ title }} {% endif %}</h4>
<img id="video_stream" src="{{ url_for('video') }}" width="640" height="480">
<button id="reloadPage" onclick="reloadPage()"
style="padding: 10px;
width: fit-content;
border-radius: 10px;
background-color: #007BFF;
color: #FFFFFF;
border: none;
outline: none;">
Segarkan</button>
<!-- <div>
<h2>Output</h2>
<p id="text">Result : </p>
</div> -->
<div class="form-floating mb-3">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingText" style="height: 100px" disabled>Result : </textarea>
<label for="floatingTextarea2Disabled" style="padding-top: 20px;">Output</label>
</div>
<script>
// Akses kamera menggunakan WebRTC
function loadCamera(){
navigator.mediaDevices.getUserMedia({ video: true })
.then(function(stream) {
var videoElement = document.getElementById('videoElement');
videoElement.srcObject = stream;
})
.catch(function(err) {
console.log("Error: " + err);
});
document.getElementById("startCameraBtn").style.display = "none";
document.getElementById("reloadPage").style.display = "block";
}
function fetchStreamedText() {
var xhr = new XMLHttpRequest();
xhr.open('GET', '/stream', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
var newText = xhr.responseText; // Menghilangkan spasi ekstra atau baris kosong
document.getElementById("floatingText").innerHTML += newText;
}
}
};
xhr.send();
}
// Panggil fungsi fetchStreamedText setiap 1 detik
setInterval(fetchStreamedText, 500); // 1000 ms = 1 detik
// Deteksi objek dalam video
// Anda bisa menggunakan TensorFlow.js atau OpenCV.js di sini
// Misalnya:
// const model = await tf.loadModel('model_url');
// const predictions = await model.predict(videoElement);
function reloadPage() {
location.reload();
}
</script>
{% endblock %}