CODEWITHSUNDEEP
javascriptangularhtml5-videowebrtcrtsp
UI_Dev
UI_Dev

Reputation: 200

Streaming network camera into browser in a Angular Project

Can Please any one help with my requirement I have an camera connected in network simply an IP Camera I need to display it in the browser.Simply live feed to the browser

Some Inferences..

Can I directly use rtsp://admin:[email protected]:554 URL in video tag tried but not working

Does streaming a feed requires a server so many examples using wss is it necessary probably no idea on wss

Does this require a node or java to convert the format or stream it to browser

If possible can ping some tutorials links or something which can be helpful

Upvotes: 1

Views: 2865

Answers (1)

mittal bhatt
mittal bhatt

Reputation: 1009

include the video directive like this:

<video #video width="640" height="480" autoplay></video>

then in your component:

@ViewChild('video') video:any; 
// note that "#video" is the name of the template variable in the video element

ngAfterViewInit() {
  let _video=this.video.nativeElement;
  if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices.getUserMedia({ video: true })
                          .then(stream => {
                            _video.src = window.URL.createObjectURL(stream);
                            _video.play();
                          })
  }
}

Upvotes: 0

Related Questions