my CCTV software sucks, so i'm just trying to find the data stream/url so I can just put it into my own webpage or just view it without using the DVR's server.
I think I have found the link, however i'm getting the following error:
Access to XMLHttpRequest at 'rtsp://192.168.0.7:8240/PSIA/streaming/channels/101' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
Any ideas? I have got AlienDVR, below is the code:
<!DOCTYPE html>
<html>
<head>
<title>Live Cam</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/hls.js#latest"></script>
<body>
<video id="video" autoplay="true" controls="controls" type='application/x-mpegURL'></video>
<script>
if (Hls.isSupported()) {
var video = document.getElementById('video');
var hls = new Hls();
// bind them together
hls.attachMedia(video);
hls.on(Hls.Events.MEDIA_ATTACHED, function () {
console.log("video and hls.js are now bound together !");
hls.loadSource("rtsp://192.168.0.7:8240/PSIA/streaming/channels/101");
hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
});
});
}
</script>
</body>
</html>
Hey,
You are trying to read an RTSP stream as a HLS stream.
I see that hls.js support MPEG so you have to find a MPEG url of your DVR, or an HLS url, but that is normally not a feature was a DVR have, most DVR's have MJPEG or RTSP.
If you want to go with RTSP you can try to use VLC Web Plugin
hope that helps u a little bit.
Related
I'm new to web development, javascript, and node js.
I know that there are a lot of questions on the cors error already I have spent 2 days looking at solutions to my problem but I can't figure out how to solve this cors error.
yesterday after 2 days of searching I finally found a solution that worked at first but now it only works 20% of the time and the other 80% I get another error.
I set up my socket.io and tried to send sockets through socket.io exactly as shown in this youtube video:
https://www.youtube.com/watch?v=rxzOqP9YwmM&t=5s
Although my code was exactly the same as in the video I kept getting a cors error when sending sockets.
Here is some of my server-side code:
const io = require("socket.io")(3000);
var fs = require('fs');
io.on("connection", socket => {...
Here is some of my client side code:
const socket = io("http://localhost:3000");
socket.on("new_partner", recieved_data => {
partner_user.username = recieved_data;
socket.emit("logged_in", this_user.username);
});
...
Here is the head of my html:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<meta charset="utf-8">
<title>real time chat</title>
<link rel="stylesheet" href="chat_room.css">
<script defer src="http://localhost:3000/socket.io/socket.io.js"></script>
<script defer src="script.js"></script>
<script defer src="login.js"></script>
</head>
Here is the cors error I kept getting with the above code:
Access to XMLHttpRequest at 'http://localhost:3000/socket.io/?EIO=4&transport=polling&t=NP9ZPIk' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
After A LOT of searching I changed my server-side code to this:
const io = require("socket.io")(3000, { cors: { origin: "*", }, });
var fs = require('fs');
io.on("connection", socket => {
The first time I ran the new code everything worked PERFECTLY. After some additional testing, I soon realized this method only works 20-30% of the time. The other 70% of the time I kept getting some other random errors. today when I tried to reproduce the errors to be able to ask on StackOverflow (here) for some help, I wasn't getting the same error as yesterday anymore. I don't know what exactly is going on since I'm a huge beginner to web development but here are the errors I keep getting today when I try to send sockets to my server from my client:
GET http://localhost:3000/socket.io/socket.io.js net::ERR_CONNECTION_REFUSED
Uncaught ReferenceError: io is not defined
at script.js:1
Uncaught ReferenceError: socket is not defined
at login.js:1
I should also mention that with this new method unlike with the cors error I can get my site to load but once I try sending sockets that's when the error pops up in the console.
I know this is probably basic and that one of these days I really need to sit down and thoroughly look at the socket io documentation, but I really don't have the time with this project's deadline right now.
Again I apologize for my ignorance and thanks in advance.
Here is all of my code if it helps:
html(index.html): https://pastebin.com/RQ7zNzdy
client-side script(script.js): https://pastebin.com/1P0DJ6HH
client side login(script.js): https://pastebin.com/fqtNRQvg
server side script(server.js): https://pastebin.com/NTL6ynup
css of my website(not that it matters): https://pastebin.com/24rF8urG
Here is the post that might help.
To verify if that is the problem try running client from e.g. Firefox.
I am still trying to get my head around what's possible with frontend vs backend. I still don't understand how to incorporate the likes of an eventListener into my app when I can't select the document.
I have created a script.js file and added it to my public directory:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Hours Calculator</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/styles.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/391e6a689e.js" crossorigin="anonymous"></script>
<script src="/script.js"></script>
</head>
<body>
and I am serving this folder/files in my app.js like so:
app.use(express.static(__dirname + '/public'));
However I am unable to target anything in my script.js, for example:
let h1 = document.body.querySelector('h1');
h1.style.color = 'brown';
Doesn't work. h1 is undefined.
I am sure there is an extremely straight forward explanation but there are some gaps in my understanding and would like if someone can explain to me why this isn't working and how I can get the front end and the back end interacting.
The Node.js "events" module and the "EventEmitter" module facilitates communication between objects in Node. The EventEmitter module is at the core of Node's asynchronous event-driven architecture. Here is how you can create custom events and emit them:
const EventEmitter = require('events');
const myEmitter = new EventEmitter();
//Event Listener
const EventListenerFunc = () => {
console.log('an event occurred!');
}
//Registering the event with the listener
myEmitter.on('eventName', EventListenerFunc);
//Emitting the event
myEmitter.emit('eventName');
Javascript is a Scripting language. It is basically used on the client-side. JavaScript can run in any engine like JavaScript Core (Safari), Spider monkey (Firefox), V8 (Google Chrome).
NodeJS is a Javascript runtime environment. NodeJS code can be run outside the browser. It is mostly used on the server-side.
Node.js only runs in a V8 engine that is mainly used by Google Chrome. Nodejs comes with a lot of modules and mostly used in web development. Node.js makes the Javascript more powerful and adds many great features to it.
Node.js does not provide a built-in DOM, so you can't access document object in Node.js and there are several modules which can construct a DOM from a string of HTML source code. Two popular DOM modules are cheerio and jsdom. You can make use of these modules to have an access to DOM level manipulation of the data in your code.
Attempting to tap http://www.anagramica.com/api to determine all words that can be made from an inputted word. As expected cross-origin policy does not allow using a normal GET request to receive the JSON data. On the anagramica homepage, JSONP is mentioned. I attempted implementing this below.
<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.3.1.min.js"></script>
<title>word play</title>
</head>
<body>
<h1>Speak A Word</h1>
<script>
document.body.onclick = function() {
$.getJSON("http://www.anagramica.com/all/dog?callback=?",function(json){
console.log(json);
});
}
</script>
</body>
</html>
This resulted in the following error.
"Cross-Origin Read Blocking (CORB) blocked cross-origin response http://www.anagramica.com/all/dog?callback=jQuery33106950206857384036_1542003732614&_=1542003732615 with MIME type application/json. See https://www.chromestatus.com/feature/5629709824032768 for more details."
Relevant posts here: Loading cross-domain endpoint with jQuery AJAX
Make cross-domain ajax JSONP request with jQuery
Wondering why JSONP is not working in this case?
I was trying to implement a simple player with a web server on a VM when I stumbled across this issue.
server.js
const express = require('express');
var app = express();
var path = __dirname + '/views/' ;
app.get("/",function(req,res,next){
res.sendFile(path + "index.html");
});
app.listen(1823);
console.log('listening');
index.html
<!DOCTYPE html>
<html>
<head>
<title>Alpha</title>
</head>
<body>
<iframe id="player" width="640" height="360" src="http://www.youtube.com/embed/N0dbGGvsjf8?enablejsapi=1&origin=http://192.168.150.129">
</iframe>
</body>
</html>
Accessing the site locally with http://localhost:1823 works just fine.
However, accessing the site from the local network such as http://192.168.150.129:1823 the iframe(?) stops working.
Screenshot
Same video works on JSFiddle.
NB: This only happens on certain videos.
e.g. with this iframe
<iframe id="player" type="text/html" width="640" height="360" src="http://www.youtube.com/embed/PfYnvDL0Qcw?enablejsapi=1&origin=http://192.168.150.129">
</iframe>
Both localhost and IP work the same.
All seems to point towards Node doing something?
Why some videos work and others do not?
I use node js without frameworks etc. and I have problem, I don't understand how set "start html page" for my first request to server.
I tried do it like this
var server = new http.Server();
server.listen(1137, '127.0.0.1');
server.on('request', function(req, res) {
fs.readFile('../public/index.html', function (err, html) {
if (err) {
throw err;
} else {
res.write(html);
res.end();
}
});
});
When I do request to 127.0.0.1:1137 - I got html in browser, but links to CSS/JS files isn't correct and how I can this to fix I don't know :(
I want get the html page ../public/index.html in browser when I will do first request to my server.
my server location
project/server/server.js
my html-page location
project/public/index.html
Your page includes references to images and stylesheets, which you said don't work.
Well, you are responding to every single HTTP request with the contents of the specified HTML page.
When the browser parses the HTML, it will see the image and stylesheet links and issue HTTP requests to those URL's. But those URL's don't respond with images or stylesheets. They respond with HTML.
GET /index.html
yields
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<img src="someimage.png">
</body>
</html>
The browser then requests
GET /styles.css
yields
<html>
...
</html>
The browser then requests
GET /someimage.png
yields
<html>
...
</html>
You need to make the response conditional based on the request. To prevent disclosure of information, like #minitech mentioned, you need to be careful not to blindly concatenate the paths. Then you have to worry about MIME types.
You're really best off using a framework like express.
You will need to return different files, depending on the path that was requested.
On the 'request' handler you are getting a ClientRequest object, which has a path property. Use this information to return the correct files (index.html, the CSS or JS files...). An example request callback could be:
function onRequest(req, res) {
var path = req.path;
fs.readFile('../public' + path, function(err, contents) {
if (err) {
res.writeHead(500);
res.end(err);
return;
}
res.end(contents);
});
}
This is still very basic, you will probably want to handle non-existent files with a 404 result code, return the correct Content-Type headers the different file kinds (text/html, text/css, etc).
Update: as minitech recommends, the path should be checked for ../, which would go up the filesystem and access sensitive files.
Hope this helps.