Update video streaming Closes #1

Include flip horizontal functionality
This commit is contained in:
Diego Inácio
2020-07-31 15:28:59 -03:00
parent 461f0d3845
commit 98f03954f9
4 changed files with 113 additions and 97 deletions

View File

@ -1,45 +1,41 @@
{% extends "bootstrap/base.html" %}
{% extends "bootstrap/base.html" %} {% block title %} {{ TITLE }} {% endblock %}
{% block styles %} {{ super() }}
{% block title %}
{{ TITLE }}
{% endblock %}
<!-- Custom styles -->
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
{% endblock %} {% block content %}
<h1>{{ TITLE }}</h1>
{% block styles %}
{{ super() }}
<!-- Custom styles -->
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
{% endblock %}
<div id="container">
<img id="videoElement" src="{{ url_for('video_feed') }}" />
<form id="control">
Camera preview:
<a id="cam-preview"><button class="btn btn-default">On/Off</button></a>
Flip horizontal:
<a id="flip-horizontal"><button class="btn btn-default">On/Off</button></a>
Run detection model:
<a id="use-model"><button class="btn btn-default">On/Off</button></a>
<br />
<br />
Exposure:
<a id="exposure-down"><button class="btn btn-default">-1</button></a>
<a id="exposure-up"><button class="btn btn-default">+1</button></a>
Contrast:
<a id="contrast-down"><button class="btn btn-default">-4</button></a>
<a id="contrast-up"><button class="btn btn-default">+4</button></a>
<br />
<br />
<a id="reset-cam"><button class="btn btn-default">Reset camera</button></a>
</form>
</div>
{% endblock %} {% block scripts %}
<!-- Imports -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
{% block content %}
<h1>{{ TITLE }}</h1>
<!-- Scripts -->
<script
type="text/javascript"
src="{{ url_for('static', filename='script.js') }}"
></script>
<div id="container">
<img id="videoElement" src="{{ url_for('video_feed') }}">
<form id="control">
Camera preview:
<a id="cam-preview"><button class="btn btn-default">On/Off</button></a>
Run detection model:
<a id="use-model"><button class="btn btn-default">On/Off</button></a>
<br> <br>
Exposure:
<a id="exposure-down"><button class="btn btn-default">-1</button></a>
<a id="exposure-up"><button class="btn btn-default">+1</button></a>
Contrast:
<a id="contrast-down"><button class="btn btn-default">-4</button></a>
<a id="contrast-up"><button class="btn btn-default">+4</button></a>
<br> <br>
<a id="reset-cam"><button class="btn btn-default">Reset camera</button></a>
</form>
</div>
{% endblock %}
{% block scripts %}
<!-- Imports -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Scripts -->
<script type="text/javascript" src="{{ url_for('static', filename='script.js') }}"></script>
{{ super() }}
{% endblock %}
{{ super() }} {% endblock %}