78 lines
2.7 KiB
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 %} |