Hello, I have Flask Python framework for IoT mainly using ESP and IP camera to send MQTT data. Now, I want to show/hide camera footage (I’m still using camera locally). What I know is the app can be shown to HTML with jinja variable. For now, I’m still in progress for solution.

For solutions, I’ve read some instructions, llike these one, two, three (js toggle method). Here’s the code what I’m doing so far:

<h4 class="article-metadata mt-2 mb-2">Camera Stream</h4>
<!--show/hide camera-->
<button onclick="cameradisplay()">Show/Hide camera</button>
<div id="my-cam" data-name="{{url_for('cam.video_feed')}}"></div>
<script type="text/javascript" charset="utf-8">
  function cameradisplay(){
    //insert camera here
    var x = document.getElementById("my-cam");
    if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }
  }
</script>
<!--<div id="camera"></div>-->
<!--<img src="{{ url_for('cam.video_feed') }}" width="100%">-->

Explanation: my camera app is in cam.video_feed, and i use cameradisplay() function to show the video.

This is the display so far

r/webdev - Question about calling Jinja variable to JS

I don’t see the camera yet, at least the button works tho

If there are advice I welcome. For more details on my problem, I post the repo, the specific file is in flaskblogtemplatescamera.html with camera program is in flaskblogcamroutes.py



Source link

Write A Comment