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?

Improve this question
6
  • 1
    Use AJAX instead. Just to say that code does not conform to HTML specifications. Really each action (Button post back) should go to its own bit of code and not switched on the name of the button. – Piotr Kula Mar 25 '14 at 11:49
  • I use php for button controls, with each button press, a python code gets executed (using 'exec' command in php) at the server side and moves the robotic arm. So with Ajax, is it possible to execute python codes?? I am not familiar with Ajax. – Ron4326 Mar 25 '14 at 12:04
  • Yea- PHP is Server Side (Robot) - ANd the web page is client Side (browser), AJAX connect Client to server without refreshing Page. – Piotr Kula Mar 25 '14 at 12:05
  • So, with Ajax I need to call the PHP codes or execute python codes from Ajax instead of PHP? – Ron4326 Mar 25 '14 at 12:16
  • The php code. Best separate each function into its own php files, left, right, forward, back and assigns ajax to each an event in JS, that is bound to the button ID, instead of using a <Form> and <input "submit"> look at jquery AJAX post. – Piotr Kula Mar 25 '14 at 12:18
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

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.