5

I have created a web page to have both live video streaming and some button controls to control the robotic arm interfaced to the RPi GPIO pins. For button controls, I used php coding. The php coding is given here.

Using motion s/w, I am able to get live video streaming and following is the code I used to embed the same into a web page. I used an USB webcam for video streaming.

<img src= "http://192.168.15.22:8081/?action=stream" width="800" height="460"/>

I have used some buttons to control the robotic arm interfaced to GPIO pins, so whenever I click the buttons, the page will refresh and the video will be out for 2 seconds, and it will come back again.

I don't want the video to be out everytime I click the button?? IS there a way to avoid this issue?

Community
  • 1
Ron Thomas
  • 363
  • 2
  • 5
  • 14

1 Answers1

4

Remove the FORM element completely (as the markup from exmaple doesn't even conform to HTML specifications). So it looks something like this, in its simplest form.

 <head>
  //Import jquery here
 </head>
 <html>
  <img src= "http://192.168.15.22:8081/?action=stream" width="800" height="460"/>
  <input id="left_button" type="button" value "Left" >
 </html>

And then using a jQuery, bind a click to the ID of the button(or any element) and use the jQuery POST to the PHP file. Just calling the PHP without any parameters will execute the code on the server without refreshing the page.

<script>
$(document).ready(function(){

 $('#left_button').click(function(){

   $.post( "/robot_left.php", function( data ) {
     //Data will contain whatever the response is, or JSON and will be parsed to object
     //But you can leave this empty if you not passing data back to the client.
   });

  });

 });
 </script>

Best tool to debug JS is, in my opinion chromes web developer tools. F12 - And you can break and debug Script with breakpoints.

enter image description here

In the cog go to General Settings and anbel LOG XMLHttpRequest.

enter image description here

ANd ajax calls will appear in the console. Red if ERROR 500, click on it to see the page with the error result.

enter image description here

Even with this implementation you might have a 2 second video lag. That is a seperate problem on its own

Piotr Kula
  • 17,336
  • 6
  • 66
  • 105