How to stream a mjpeg video on a website

Question

I got some problems with streaming a mjpeg video on a website. The camera has a private ip (must stay private/local), but must be visible on a public website.

I tried following code:

HTML

<img src="video.php?ip=IPADDRESS&name=NAME" width="640" height="480" />

PHP (video.php)

<?php
    // ... some code to get the camera object
    header('Content-Type: multipart/x-mixed-replace; boundary=myboundary');
    ob_end_flush();
    readfile('http://'.$cam->user.':'.$cam->pwd.'@'.$cam->ip.'/mjpg/video.mjpg');
?>

That works so far. But the problem now is, when I send some requests (camerasteering) via jQuery, they can't be send until I refresh the website or close it. The steering only works, when I write the file direct in the image src-tag. But than, of course, the stream is only visible on local webserver. My question now: What is the best way to stream the video on a public website?

Regards

BlackBonjour

EDIT

Here the jQuery code:

$('#container').on('click', '.steer', function()
{
    $.post('handle_post.php',
    {
        action: 'move-cam',
        ip: $('#camIP').val(),
        name: $('#camNAME').val(),
        move: $(this).attr('alt')
    });
});

It's not the full code, but that's all for the steeringfunction.

Update 17.09

I worked on my problem the last days but still don't get a solution. I tried to open a new window, which does the steering. The problem is, if I open the window with the javascript, I still can't control the camera. When I open a different browser and access directly the "controller", I can control the camera. But this is not what I want. How can I control the camera with JS (Ajax)?

And next is, when I read the stream threw php, the server and my pc are getting really slow. How can I fix that?

I use following Code for reading the stream:

$fp = fsockopen($cam->ip, 80, $errno, $errstr, 30);

if(!$fp)
{
    echo $errstr.' ('.$errno.')<br />'."\n";
}
else
{
    $urlstring = "GET /mjpg/video.mjpg HTTP/1.0\r\nAuthorization: BASIC ".base64_encode($cam->user.':'.$cam->pwd)."\r\n\r\n";

    fputs($fp, $urlstring);

    while($str = trim(fgets($fp, 4096)))
    {
        header($str);
    }

    fpassthru($fp);
    flush();
    fclose($fp);
}

Answer 1

I'm not sure how you send camerasterring commands, because I don't see the javascript code here. Anyway, I find here a good aproach (https://github.com/wilhelmbot/Paparazzo.js) for your case:

JS:

// JavaScript example using jQuery

// Active camera will refresh every 2 seconds
var TIMEOUT = 2000;
var refreshInterval = setInterval(function() {
  var random = Math.floor(Math.random() * Math.pow(2, 31));
  $('img#camera').attr('src', 'video.php?r=' + random);//send a random var to avoid cache
}, TIMEOUT); 

Html:

<img id="camera" src="video.php" width="640" height="480" />

This code is only to refresh img element in order to get a new image... Can you show us how you send requests to camera?