To get a motionjpeg stream from a ip camerIn a native App I would add a RequestHeader to the GET-Request containing the credentials. In an ajax-call I also can append headers to get a single image.
But to show continuous images the only way seem to be using
<img src="url_to_mpjeg">
The webui of the camera is successfully doing the GET-call like this:
1. you enter the ui with a request to index.html, which needs credentials
2. any further request (like the GET request) automatically have the basic authentication injected by the browser
So I also tried calling another URL of the camera with authentication-header in advanced but this doesn't work in cordova. Every single request needs a manual authentication in the header, nothing is magically added to the headerfields.
I think the reason why it automatically works in the camera webui is because the cameras index.html and further requests are all from the same origin, but in my cordovaapp, the UI is coming from file://local somewhere.
Is there a way in javascript to call a jpeg stream with basic authentication?
As stated by the chromium team, images credentials does not work anymore
If you want to load some stream as mjpg or img with basic auth protected url use iframe instead.
<iframe src="you_stream_link"></iframe>
Related
I am sending an image to an API using my localhost address but for some reason it doesn't identify the image. It works fine if I use links on google. The code looks something like this:
unirest.post(requestString)
.header("X-RapidAPI-Key", API_KEY)
.field("urls", "http://localhost:4000/uploads/1570544614486-test.jpg")
.field("album", ALBUM_NAME)
.field("albumkey", ALBUM_KEY)
.field("entryid", entryId)
.end(result => {
console.log(result.body);
});
I believe this will work once on a domain but I need it to work now for testing. How can I make this work using my localhost?
You haven't exactly specified what API you're reaching out to, so your mileage may vary with different APIs.
However, based on your error message, I've determined you're trying to leverage the Lambda Face Recognition and Face Detection API via RapidAPI. This (linked) docs for this web service clearly show that the urls parameter you're attempting to use with your localhost URL above is actually meant to hold a comma-separated set of URLs to publicly-accessible image files. The remote API can't possibly resolve localhost in this context, because (a) it can't possibly have any idea what IP localhost should refer to, and (b) it's highly likely that your localhost here doesn't respond to HTTP requests from the broader Internet.
Instead, modify your request to use the files parameter (type binary) to upload the raw binary data for your image(s).
I've used code splitting to seprate restricted parts of my app into different chunks. This is working great so far, now I would like to ensure that the files themselves don't get served unless authenticated. I was thinking of using ngx_http_auth_request_module
http://nginx.org/en/docs/http/ngx_http_auth_request_module.html#auth_request
Which allows to send a sub-request before serving certain files. How can I ensure that certain headers are always send as part of the HTTP request when React wants to fetch the necessary chunks?
I have trouble understanding why you would need to prevent unauthenticated malicious users to have access to your static chunks.
Dynamic imports and code splitting are mainly used to reduce the bundle size for large applications as users won't necessarily need everything.
In order to secure your app you need to prevent users from seeing or tampering with data they do not have access to. This means the security lies with the API your app is talking to.
What I do:
Reject unauthenticated requests to the API
Keep a token client-side on authentication
Pass and check the token on all requests
Burn the token when obsolete and redirect to login
Notify, redirect users when they do not have access to some data or better not displaying content they do not have access to
I'm sure you already did what I wrote above, what I want to emphasize is that chunks are basically empty UI filled with data from the secured API.
Let's say I have bad intentions and I bypass client-side routing in order to have access to the restricted chunk. It will be an empty UI with secured API routes, I won't be able to do anything with it.
In case you have a very specific need, you might need to write a webpack plugin.
about the ensure request
One of webpack 's properties is that it can fetch only necessary chunks when loading pages.You can just use like require.ensurn to query chunks when necessary,so there is no need to ensure the certain headers.
ngx_http_auth_request_module
Ngx_http_auth_request_module and sub-request are always used to fetch web file in server.It's always used as backend authentication module.Here is the data flow direction in nginx.
When you download file, the download request will be passed to the server, then server return the override Http Request to Nginx,then Nginx will find the exact file.
The ngx_http_auth_request_module allows to send request to back server(like php .tomcat), and based on the request to pass or not, if pass, you will be able to fetch file in the back server.
nginx-----load speed
The nginx always fetch static file, like index.html.If have to validate the permission for every js/css everytime,then fetch it throw,thd loading speed for page will be very slow.
about how to authenticate
Since you have separated app.Here is a little suggestions.You can get the authenticated request by only import restricted parts in the authenticated file.And the webpack will automatically handle the rest.
fetch data from the server in the non-restricted part with information to authenticate like this:
http://.../api/auth?info=...
based on the infos in server to authenticate, and pass other infos like type back to the frontend
based on the type information to view .
if (this.props.type === "restrict"){
<restrict component/>
} else {
<non-restrict component/>
}
I have 16 analog cameras feeding in to my Defender DVR. I'm able to access the camera feeds locally by going to a specific port and entering login details using an ActiveX control in IE. I can also view them through apps from the Apple apps tore on my iPad by simply entering my external IP address, port number, and login credentials.
My question is, if I wanted to create an app similar to those in the app store. How would I go about communicating with the DVR's stream of videos/images?
I'd image I need to poll the IP address to get the data but I'm not sure what type of connection is needed and what to expect there.
It seems that many DVRs defer to the same apps in the marketplace so my guess is that they all conform to some standard when outputting the data.
Thank you.
A lot of cameras stream data via HTTP using the Mixed-Replace Content-Type. If you can access your camera on a browser, it is very likely that it uses HTTP.
Assuming this is your case, you'll have to find out what URL your camera uses to serve the stream. So you could:
Try to find a list like this on the internet, by Googling your camera model
Inspecting the browser yourself (this will require some knowledge on HTML5)
Once you have the URL,you can be sure if you're dealing with a Mixed-Replace request, if you have a terminal with curl, you can use something like:
$ curl --head http://user:password#192.168.99.230/video.cgi
My camera returns the following header:
HTTP/1.0 200 OK
Server: alphapd
Date: Thu Jan 9 09:04:59 2014
Pragma: no-cache
Cache-Control: no-cache
Content-Type: multipart/x-mixed-replace;boundary=video boundary--
This means I have a Mixed-Replace response separated by the "--video boundary--" string (look to the Content-Type field).
The request body looks like this:
--video boundary--
<metadata>
<image>
--video boundary--
<metadata>
<image>
...
(Neverending request body of real time delivered images)
Now your approach will depend on which application you want to embed the stream. On my case, I just needed to put them on a web page, so Firefox did me a favor and I could integrate it with:
<img src="http://user:password#192.168.99.230/video.cgi">
But you might have to be parsing and capturing each incoming image by yourself depending on your application.
There are standards out there so you just need to look around also don't expect any dvr manufacturer to give you api access many have tried they just dont give it away any way you don't want to be tied down to a specific dvr implementation I would advice you start with the ispy c# code http://www.ispyconnect.com and that will give you an idea of how it works in general since Ispy supports many types of cameras be it ip or webcam...
Code for analog cameras will be more difficult to find so good luck...
I'm using loopback generator to generate models and rest APIs service. Now I wanted to modify a rest api such that everytime the api is called, some spcific logging/actions are taken.
I've come to know that by using remote hooks(beforeRemote, afterRemote), we can specify actions to be taken for different remote method calls. But what I don't know is that where to place the code of remote hooks. In which file this code will go when the project has been created using 'yo loopback'.
You would add code to the files under /common/models.
If you are using a Person model. You would add the following code in /common/models/person.js:
If you want to protect the REST API from a non logged in user or anonymous user you should use ACL. Have a look here:
Define access control from the intermediate tutorial
Authentication, authorization, and permissions
The REST API will respond with codes if someone unauthorized tries to get access (depending on what you define), for example 401. Then in the app if you receive that code, you should redirect to the login.
Now, every time you create a new model with slc loopback:model, it will generate 2 files in the common/models folder. One is a .js and the ohter a .json. You have to add the code in the .js file for the remote hooks.
Have a look to this link that explains how to add remote methods.
In the html view, images are displayed like this:
<img ng-src="{{element.image.url}}">
element.image.url points to an url like: /rest_api/img/12345678.
This is working fine, images are displayed.
Now, I add authentication:
Before the user is authenticated, every resources respond with an http error 401, images too. When authentication succeeds, a token is placed in a custom headers and sent with every $http requests, allowing access the resources:
$http.defaults.headers.common['Authorization'] = token;
This is working fine for Json files loaded with $resource. But the direct links to the images are still 401 after authentication.
How to call the images with custom headers?
Or any advice on how I should do this.
As said here you can use angular-img-http-src (bower install --save angular-img-http-src if you use Bower).
If you look at the code, it uses URL.createObjectURL and URL.revokeObjectURL which are still draft on 19 April 2016. So look if your browser supports it.
In order to use it, declare 'angular.img' as a dependency to your app module (angular.module('myapp', [..., 'angular.img'])), and then in your HTML you can use http-src attribute for <img> tag.
In your example it would be: <img http-src="{{element.image.url}}">
Of course, this implies that you have declared an interceptor using $httpProvider.interceptors.push to add your custom header or that you've set statically your header for every requests using $http.defaults.headers.common.MyHeader = 'some value';
There is a vary simple answer for that. You should use: angular-img-http-src.
Problem:
You used token based auth and you need to serve images from secured
routes.
Solution:
Use http-src instead of ng-src and it will fetch images using the
$http service - meaning Authorization headers added via interceptors
will be present - then build a Blob and set the src to an objectURL.
It works perfectly on my project.
I am facing the same problem.
The best solution I found is passing the Authorization token as a query parameter.
For example :
<img src="http://myhost.com/image/path?accessToken=123456789" >
This way you can secure those images only for your REST consumers.
Consider the URL be http://foo.com/bar.png
In your controller,
angular.module('foo')
.controller('fooCtrl', ['$sce',
function($sce) {
$scope.dataSrc = "http://foo.com/bar.png"
$scope.src = $sce.trustAsResourceUrl($scope.dataSrc)
}
])
And in your view,
<img ng-src="{{src}}" />
.. seems to do the trick.
As far as I know it's not possible to pass additional headers with asset requests (scripts, images, media, CSS files that the browser loads while rendering the page). That's all controlled by the browser. Only when making a XHR (AJAX) request can you modify headers.
I would suggest looking at your server side authentication and seeing if there's a solution there.