xpcrts / steaming-ip-camera-nodejs

Real time streaming IP/Network security camera on web browser using NodeJS

Steaming IP Camera Nodejs

Donate me (if it helpful)

Bitcoin (BTC): bc1qtmvj9670pxrrdhqg98zge6qkw3kr590r96kq5p
Ethereum (ETH) or USDT (ETH Network) or USDC (ETH Network): 0x16f2b8e63859f5665023D33d65DBcba189e4A9d4

Open source project of real time streaming (~30 fps) IP/Network security camera on web browser using NodeJS

Getting Started

These instructions will get you a copy of the project to make it up and running on your local machine for development and testing purposes.

Prerequisites

What things you need to install the software and how to install them

• Git - free and open source distributed version control system
• Node.js - Node.js >= 10.15.0
• FFmpeg - Multimedia framework to decode, encode, transcode, mux, demux, stream, filter and play

Installing

A step by step series of examples that tell you how to get a development up and running

1. Download Git

• Git

2. Open command prompt/terminal, Clone this repository to your local machine

git clone https://github.com/xpcrts/Steaming-IP-Camera-Nodejs

3. Download and install Node.js on your local machine

• Node.js - Node.js >= 10.15.0

4. Download and install pre-build FFMPEG Builds on your local machine (Download Build)

• FFmpeg - Multimedia framework to decode, encode, transcode, mux, demux, stream, filter and play
  
• Copy the FFMPEG Zip folder you have just downloaded, paste it into C: drive for simplicity and unzip it.
• Rename the file to ffmpeg for simpicity
• After unzipped the file, navigate ffmpeg/bin
  

On Microsoft Windows

You need to add ffmpeg to system variables (For all users) or User variables (For specific user)
For research and test, I recommend to add the ffmpeg path to the system variables to do that just navigate to:
a. Control Panel
b. System and Security
c. System
d. Advanced system settings
e. Environment Variables...
f. System variables
g. Path (Double-click on it)
h. New
i. Paste this C:\ffmpeg\bin
j. OK (3 times)

5. NPM install node-onvif

npm install node-onvif -s

6.NPM install node-rtsp-stream

npm i node-rtsp-stream -s

7.NPM install http-server

npm install http-server -g

Running the tests

1. In the repository, open app.js file

• Change IP address to your camera IP address
• Username of your network camera
• Password of your network camera
  

2. Open one command prompt/terminal, navigate to Streaming-IP-Camera-Nodejs/src directory and type:

http-server

hit enter to run

3. Open another command prompt/terminal, on the same directory path and type:

npm start

hit enter to run

Now keep those two terminal up and running

Preview Streaming Camera on web browser by go to this URL:

127.0.0.1:8000

You are ready to go.

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

To-dos

• Streaming Multiple camera channels at once, using 4x4 grid or more
• Customize width and height of canvas
• Improve streaming resolution quality
• Decrease streaming latency

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

• Phok Chanrithisak - xpcrts

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

• Credit to: Celalettin Erbulut

Donate me (if it helpful)

Bitcoin (BTC): bc1qtmvj9670pxrrdhqg98zge6qkw3kr590r96kq5p
Ethereum (ETH) or USDT (ETH Network) or USDC (ETH Network): 0x16f2b8e63859f5665023D33d65DBcba189e4A9d4

steaming-ip-camera-nodejs's Issues

Customize canvas size

Is there any way today to customize canvas size?

Conversion Failed

When you try to run the app and the IP camera is not yet open and hit npm start and then rerun it again I got this error

Input #0, rtsp, from 'rtsp://user:[email protected]:554':
  Metadata:
    title           : streamed by the macro-video rtsp server
  Duration: N/A, start: 0.106000, bitrate: N/A
  Stream #0:0: Video: hevc (Main), yuv420p(tv, bt470bg), 1920x1080 [SAR 1:1 DAR 16:9], 20 fps, 10 tbr, 90k tbn
Stream mapping:
  Stream #0:0 -> #0:0 (hevc (native) -> mpeg1video (native))
Press [q] to stop, [?] for help
[hevc @ 0000019c4030d180] Could not find ref with POC 6
[mpeg1video @ 0000019c4030b7c0] MPEG-1/2 does not support 10/1 fps
[vost#0:0/mpeg1video @ 0000019c40a82900] Error while opening encoder - maybe incorrect parameters such as bit_rate, rate, width or height.
Error while filtering: Invalid argument
[out#0/mpeg1video @ 0000019c402f6840] Nothing was written into output file, because at least one of its streams received no packets.
frame=    0 fps=0.0 q=0.0 Lsize=       0kB time=N/A bitrate=N/A speed=N/A
Conversion failed!

Secure Websocket?

How to serve Video over wss?

too much gpu usage

hi there. thanks for the code. I was searching for code like this for two days.
I run the code and then check my source's usage. I opened 127.0.0.1:8000 in Microsoft edge and GPU usage of edge was 60%. is it ok ? i see my sources. i have 2 GPU . one is with my CPU and one is my GPU(gtx960) . the code is running on the GPU of my CPU and it use 67% of source

very important

I want to remove the arrow keys and direction keys on this screen, it should only be a camera view, how can I do it?

installation error

Now using node v10.15.0 (npm v6.4.1)
ubuntu@ip-test:~/streaming/Steaming-IP-Camera-Nodejs$ npm i node-rtsp-stream -s
+ [email protected]
updated 1 package and audited 84 packages in 0.8s
found 6 vulnerabilities (2 low, 4 high)
  run `npm audit fix` to fix them, or `npm audit` for details
ubuntu@iptest:~/streaming/Steaming-IP-Camera-Nodejs$ npm audit fix
npm ERR! code EAUDITNOPJSON
npm ERR! audit No package.json found: Cannot audit a project without a package.json

RTSP Camera Streaming for Ubuntu

My code is working properly in windows system with local machine but in live server with ubuntu os it is not working.

Do we customize this code with ubuntu os?
Please provide steps of RTSP camera streaming with ubuntu OS.
I am getting error as below in snapshot

Invalid data found and Procotol not found error

I have a problem trying to use the sample code. I have a camera that I bought in China, it doesn't have much documentation. When I run the code I get the error 'Protocol not found' or the error 'tcp://admin:[email protected]:8554/cam/realmonitor?channel=1&subtype=0&unicast=true&proto=Onvif: Invalid data found when processing input ' and 'rstp://admin:[email protected]:8554/cam/realmonitor?channel=1&subtype=0&unicast=true&proto=Onvif: Protocol not found'. I tried to run with other protocols but without success.
It is not an error in the code because when executing these commands in ffplay or ffmpeg the same thing happens. Can someone help me ?

Can't view on browser

Hi, im trying to clone your repo and testing with my camera, can you explain the detail config in your code please because when i run npm start, http-server, the ffmpeg run but i dont know when i try to access both port 9999, 8000, 8080, i cant view my camera

How to stream from ip camera TP-LINK C100 , 15fps ?

How to stream from camera recording at 15fps ?

step by step

能不能附一个demo的源码
want a demo code

Did we customize with the multiple IP Camera through nodeJS

Can we able to do the multiple ip camera through node js. I have tried to add multiple in app.js but not working. could you please help to achieve this and i have tried with the sample application and its takes streaming high memory.

Stops after running for a while

I'm getting following error and then the output stucks

frame=26566 fps= 29 q=4.0 Lsize= 308423kB time=00:14:45.50 bitrate=2853.3kbits/s dup=1170 drop=0 speed=0.961x
video:308423kB audio:0kB subtitle:0kB other streams:0kB global headers:0kB muxing overhead: 0.000000%

I need to restart the app again to make it work back

Can I use this with Raspberry PI zero ?

Now I've got success of Stream camera with VLC.

I want to use this project into My Pi also.

Have you any experience or insight about RaspberryPi with Node, FFmpeg?

Thanks.

Scaled image does not display correctly

In order to reduce load on the Raspberry, I tried to reduce resolution. by adding
ffmpegOptions: {
'-s': '640x400'
}
in the app.js file.
However, it seems that the webpage still creates the canvas the size of the input resolution, which causes a totally distorted picture. (same with cropping) Is there a way to fix that? Probably in the jsmpeg.min.js

I would by the way, also like to reduce the fps to further reduce load. I would be good with 1-2 pictures per second. Any idea?

Artifact Issue

I'm trying to display the rtsp feed of an IP camera on a web page, I managed to do it but it has a lot of artifacts it doesn't come from the camera (it didn't break I checked and it displays well in VLC).
I think it's due to an encoding problem at the base I use mpeg1video but there was a lot more artifact and now I use mpeg2video and there is less but it's still bad

The picture where you can make out the pool is the MPEG2Video

So here I need help thanks in advance

Latency when using multiple streams in single html page.

I have defined multiple streams in my index.js file and defined separate canvas in index.html file for each stream with a unique websocket port. It works fine up to 5 cameras, but when I add 10 streams, it is very slow. What is the reason?