Using RTSP with media-stream-library

[Abedron]

Hi,
I try use this library for rtsp connection, but stream is still enforced throw web socket and not rtsp. If I remove line with ws uri definition, then is stream redirected to non exist endpoint ws://localhost:4200/rtsp-over-websocket. What is wrong with the following code example?

private play(host: string, encoding = 'h264'): any {
    const videoEl: HTMLVideoElement = document.querySelector('video')!;
    const canvasEl: HTMLCanvasElement = document.querySelector('canvas')!;

    // Grab a reference to the video element
    let { Pipeline, mediaElement }: { Pipeline: any; mediaElement: HTMLVideoElement | HTMLCanvasElement; } = this.getElementAndPipeline(encoding, videoEl, canvasEl);

    // Setup a new pipeline
    const pipeline = new Pipeline({
        ws: { uri: `wss://name:pass@${host}/rtsp-over-websocket` },
        rtsp: { uri: `rtsp://name:pass@${host}/axis-media/media.amp` },
        mediaElement,
    })
    // Restart stream on RTCP BYE (stream ended)
    pipeline.rtsp.onRtcp = (rtcp: Rtcp) => {
        if (isRtcpBye(rtcp)) {
            setTimeout(() => this.play(host, encoding), 0);
        }
    }

    pipeline.ready.then(() => {
        pipeline.rtsp.play();
    })
    return pipeline;
}

[steabert]

It looks like you get the default URI for WebSocket (I guess, since it's built from the dev server hostname?), so somehow your config isn't making it to the WebSocket component.

What is Pipeline? (the getElementAndPipeline function isn't included in your example).

Note that you'll always have a WebSocket connection to the camera which is used to deliver the RTP stream to the browser.

[rostacik]

hi @steabert.
first of all thx for your response. yes, sorry, we forgot to paste that snippet so here it is :

import { Html5CanvasPipeline, Html5VideoPipeline, isRtcpBye, Rtcp } from 'media-stream-library';

  private getElementAndPipeline(encoding: string, videoEl: HTMLVideoElement, canvasEl: HTMLCanvasElement) {
    let Pipeline: any;
    let mediaElement: HTMLVideoElement | HTMLCanvasElement;
    if (encoding === 'h264') {
      Pipeline = Html5VideoPipeline;
      mediaElement = videoEl;
      // hide the other output
      videoEl.style.display = '';
      canvasEl.style.display = 'none';
    } else {
      Pipeline = Html5CanvasPipeline;
      mediaElement = canvasEl;
      // hide the other output
      videoEl.style.display = 'none';
      canvasEl.style.display = '';
    }
    return { Pipeline, mediaElement };
  }

hope this helps.

should we create whole repo as playground what we tried exactly? there is not much else there, just Angular app trying to connect to stream over wss or rtsp.

[steabert]

I'm not really sure why the URI isn't used (in the code it should take the one passed through via the config). You can try to log inside the openwebsocket.ts file if the URI makes it to that component.

The other part of the problem is that the authentication for RTSP over WebSocket does not work via the WebSocket itself, you need to pass those via the tokenUri (also in the openwebsocket.ts).

So in theory, it would be sth like:

ws: { uri: `wss://${host}/rtsp-over-websocket`, tokenUri: `https://name:pass@${host}/axis-cgi/rtspwssession.cgi` },

If you find out more about why the uri does not make it to that file, you can open a bug report with a small reproducible stream setup.

On another note, I wanted to ask why you're not using the HttpMsePipeline ? This should be the preferred way unless you deal with a camera that does not support mp4 streaming. It would also be able to handle basic auth.