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.
Using Linking.openURL('mailto:') with expo-linking opens the mail app with a 'compose mail' screen, how can i open the mail app directly on the inbox tab ?
Inspired by this stack overflow post, you can use the message:// url scheme to achieve this on iOS. If no content is provided, it defaults to the email inbox on iOS.
For android, things are a little trickier. You'll need expo-intent-launcher and a few extra params to complete the hand-off. A complete solution may look something like this:
import { startActivityAsync, ActivityAction } from 'expo-intent-launcher';
[...]
if (Platform.OS === "android") {
const activityAction = "android.intent.action.MAIN";
const intentParams: IntentLauncher.IntentLauncherParams = {
category: "android.intent.category.APP_EMAIL",
};
IntentLauncher.startActivityAsync(activityAction, intentParams);
}
else if (Platform.OS === "ios") {
Linking.openURL('message://');
}
Be sure to test on real devices if possible since the iPhone simulator doesn't have a mail client installed.
List of URL schemes on wikipedia
Update: If you don't mind an extra dependency, take a look at react-native-email-link which has the added benefit of allowing users to select from any installed email client. Neat!
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>