Basic HTTP authorization on IP cameras using AJAX / jQuery

Question

I understand that this question has been asked many times, but it seems that none of the answers worked for me, so here is my problem:

I have a Sony IP camera that is on the intranet. I am creating a site with PHP / MySQL authentication for internal users to be able to view the MJPEG stream, but the camera itself requires HTTP authentication. I don’t want users to enter their username and password to enter the camera page, and then have to enter http authentication credentials (in a pop-up window) to view the stream. I tried using jquery to change the headers to no avail. Keep in mind that the camera SHOULD have its own authentication so that users cannot just accidentally enter an IP address and watch the stream. I want to be able to control who is watching what and when.

I assume that if I make the correct authentication call when the user logs in to the page, this camera will be available to them, as they are logged in quietly. Also, if I use wget from the terminal using --headers: "Authorization: blah_Blah", it really works, but I can't do it from jQuery! Here is my code:

$.ajax({ url : "http://some_ip_internally_for_the_cam/some_page_on_cam_that_needs_authentication_to_access_otherwise", method : 'GET', beforeSend : function(req) { req.setRequestHeader('Authorization', "some_base_64_stuff_that_works_in_wget"); }, success: function() { $("div.log").attr("innerHTML", "ok"); } }); 

This loads as soon as the user logs in.

Any suggestions?

Answer 1

I had a Javascript error in Firefox:

... 0x804b000f (NS_ERROR_IN_PROGRESS) [nsIXMLHttpRequest.setRequestHeader] ...

As I tried to set a new HTTP header in some XMLHttpRequest :

 xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); 

The error occurred because I tried to set the HTTP header before the XMLHttpRequest.open () method.

Source: http://www.webmasterworld.com/forum91/4542.htm

Answer 2

If you mean that div.log does not display the “ok” message, it is possible because your DOM code is incorrect. It:

 $("div.log").attr("innerHTML", "ok"); 

sets the DOM div attribute, not its actual innerHTML . Instead, you should do:

 $("div.log").html("ok"); 

Answer 3

Have you tried the username and password fields in .ajax?

 $.ajax({ url: "http://mydomain/mypage.php", username: "myUsername", password: "myPassword", error: function () { } }).done(function(html) { //Do Stuff }); 

This works for me in a similar scenario.