I want to display the live footage of an ip camera on a web page built using ReactJS.
I found some solutions on the internet but that provide solutions using the http url. However my camera has a username and password, and I don't know how to embed the username/password into the http url.
I have a functioning rtsp url with the username/password.
I would like to have a video element inside the react app like this:
render() {
return (
<div>
<video
....
/>
</div>
);
}
My functioning rtsp url is like: rtsp://username:password#172.16.3.18:554
Your solution should be set with two parts: a nodejs application that will read the steram from the RTSP and client side a canvas that will get that stream from the nodejs application.
Think of it as a "proxy"
On Server:
Stream = require('node-rtsp-stream')
stream = new Stream({
name: 'name',
streamUrl: 'rtsp://username:password#172.16.3.18:554',
wsPort: 9999,
ffmpegOptions: { // options ffmpeg flags
'-stats': '', // an option with no neccessary value uses a blank string
'-r': 30 // options with required values specify the value after the key
}
})
On Client:
client = new WebSocket('ws://NODEJS_SERVER_IP:9999')
player = new jsmpeg(client, {
canvas: canvas // Canvas should be a canvas DOM element
})
There is a good npm you can use that does that:
https://www.npmjs.com/package/node-rtsp-stream
I think you need a special media player. Have you tried hls.js. You may include the library, then build your own component and pass the link to it so it may play then.
Related
I want to display the live footage of an ip camera on a web page built using ReactJS.
I found some solutions on the internet but that provide solutions using the http url. However my camera has a username and password, and I don't know how to embed the username/password into the http url.
I have a functioning rtsp url with the username/password.
I would like to have a video element inside the react app like this:
render() {
return (
<div>
<video
....
/>
</div>
);
}
My functioning rtsp url is like: rtsp://username:password#172.16.3.18:554
Your solution should be set with two parts: a nodejs application that will read the steram from the RTSP and client side a canvas that will get that stream from the nodejs application.
Think of it as a "proxy"
On Server:
Stream = require('node-rtsp-stream')
stream = new Stream({
name: 'name',
streamUrl: 'rtsp://username:password#172.16.3.18:554',
wsPort: 9999,
ffmpegOptions: { // options ffmpeg flags
'-stats': '', // an option with no neccessary value uses a blank string
'-r': 30 // options with required values specify the value after the key
}
})
On Client:
client = new WebSocket('ws://NODEJS_SERVER_IP:9999')
player = new jsmpeg(client, {
canvas: canvas // Canvas should be a canvas DOM element
})
There is a good npm you can use that does that:
https://www.npmjs.com/package/node-rtsp-stream
I think you need a special media player. Have you tried hls.js. You may include the library, then build your own component and pass the link to it so it may play then.
all I would try to make some optional layout in NextJS. My problem is that I have found some method to check the browser URL then serve content according to these URL. But by this way the server content an browser content are no longer identical, hence the schema breaks.
Here an snippet of my trial:
export default ({children, title = 'title' }) => {
var
contact = false;
if (exenv.canUseDOM ){ if (window.location.href==="http://localhost:4000/contact" ) { contact= true}; }
else {const contact = false};
if (contact){ return( <div>Hey it is contact ! </div> ) }
else { // return normal layout
My console returns me predictably:
Warning: Text content did not match. Server:
So... I'm wondering if I have to make some custom settings on a custom NextJS server to grant the backend/frontend behaviors?
Or maybe there is a less expensive solution in the area?
Any hint would be great,
thanks
You can't remove that warning, it is appear because you just render that layout from client side, so there is a different between layout rendered by server and layout rendered by client.
I don't know what variable exenv.canUseDOM is, but you can use process.browser to detect if the current process is server side rendering or not.
I want to display the location base on the value that I get from getLocation but all I get is a blue screen if I assign for example
this.lat=25.7777, this.lng=26,777; but it does not if a did like this this.lat=this.LAT; this.lng=this.LNG; and it works fine one last thing l would like to mention that the datatype in the database is double and I have tried testing a text as well
lat:number;
lng:number;
LAT:any;
LNG:any;
constructor(public dataservice:DataService,private geolocation: Geolocation) {
this.dataservice.getLocation(ID)
.subscribe(data =>{this.LAT = data[0].lat,
this.LNG=data[0].lng
this.lat=this.LAT;
this.lng=this.LNG;
});
.html
<agm-map [latitude]="lat"[longitude]="lng" [zoom]="10"
[zoomControl]="true">
<agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>
You need to use Allow-Control-Allow-Origin in configuring your apache or Node.js server. rather then chrome plugin.
make changes in your server such that add that required header in response.
I am a newbie to Audio/Video Recording. The script works well for my cam and audio recorder. However, I would like to know how to implement it similar to the Extension available so that I can record a tab and all the audio involved. Thanks in advance. Currently using Ver.5.4.0
Here is an open-sourced chrome-extension that supports both tab, screen and any opened app's screen recording:
https://github.com/muaz-khan/Chrome-Extensions/tree/master/screen-recording
You can use tabCapture API to capture MediaStream object; now you can record the resulting stream using MediaRecorder API or RecordRTC.
RecordRTC can record following kind of streams:
Stream captured from a webcam or microphone
Stream captured using tabCapture API
Stream captured using desktopCapture API
Stream captured from <canvas> or <video> elements using captureStream API
Streams generated by WebAudio API
e.g.
var capturedStream = videoElement.captureStream();
var recorder = RecordRTC(videoElement.captureStream(), {
type: 'video'
});
Or:
var recorder = RecordRTC(tabCaptureStream, {
type: 'video'
});
Simply make sure that you're getting the MediaStream object from above API; and now you can use RecordRTC to record that stream.
Regarding "replacing video track with secondary camera track or screen track", you can use addTrack, removeTrack as well as replaceTrack methods. However I'm not sure if MediaRecorder API can record replaced track:
// using Firefox
theStreamYouAreRecording.replaceTrack( screenTrack );
// using Chrome or Firefox
theStreamYouAreRecording.addTrack ( screenTrack );
So you must either record camera or screen. Do not replace tracks.
I come here because I use the CameraPreview class from ionic-native in my ionic 2 project to take a picture, and I actually struggle with the path of the picture which is something like : assets-library://asset/asset.JPG?id=...
That type of URL is obviously impossible to render in the DOM, and I want to know how to convert it into a supported URL for the img or ion-img tag.
I tried to convert it using File.readAsDataURL() as it is suggested in the following links, but the promise return an empty string.
https://www.npmjs.com/package/cordova-camera-preview
http://ionicframework.com/docs/v2/native/file/
You can load it via http as a Blob and then set that as the src for an img.
Example below:
this.http.get(fileURI, new RequestOptions({responseType:ResponseContentType.Blob}))
.subscribe(
data => {
var blob = data.blob();
this.previewImage = this.sanitize(URL.createObjectURL(blob));
this.cd.detectChanges();
});
Make note of the sanitize function. This is required to bypass default browser security - see https://stackoverflow.com/a/37432961/3446442
In this example the img tag is bound to the previewImage variable:
<div [style.width.px]="cameraSize" [style.height.px]="cameraSize">
<img id="preview" [src]="previewImage">
</div>