How to display two RTSP streams within one page?

[Joc007]

Hi

my js knowledge is really poor.

I was thinking of instantiating two canvases, drawing on them with two player instances... Don't know how to accomplish this :(

Any help is highly appreciated. Thanks,
Joc.

[Joc007]

This is what I ended implementing and it works
Is there any other way?

const express = require('express');
const app = express();

const { proxy, scriptUrl } = require('rtsp-relay')(app);

const handler = proxy({
  url: `rtsp://us:[email protected]:554/cam/realmonitor?channel=1&subtype=0`,
  // if your RTSP stream need credentials, include them in the URL as above
  verbose: false,
});

const handler1 = proxy({
  url: `rtsp://us:[email protected]:554/cam/realmonitor?channel=1&subtype=0`,
  // if your RTSP stream need credentials, include them in the URL as above
  verbose: false,
});


// the endpoint our RTSP uses
app.ws('/api/stream', handler);
app.ws('/api/stream1', handler1);

// this is an example html page to view the stream
app.get('/', (req, res) =>
  res.send(`

	<div class="a">
		<canvas id='canvas' style="width:640;height:360px"></canvas>
		<canvas id='canvas1' style="width:640px;height:360px"></canvas>
	</div>

	<script src='${scriptUrl}'></script>
	<script>
		loadPlayer({
		  url: 'ws://' + location.host + '/api/stream',
		  canvas: document.getElementById('canvas')
		});
		loadPlayer({
		  url: 'ws://' + location.host + '/api/stream1',
		  canvas: document.getElementById('canvas1')
		});
	</script>

	`),
);

app.listen(2000);

[k-yle]

Hi @Joc007, that way is perfectly fine if you only have a few cameras

If you have many cameras you can avoid writing const handler = proxy({ and app.ws('/api/stream', handler); many times by doing this:

// the one dynamic endpoint used for all RTSP streams
app.ws('/api/stream/:id', (ws, req) => proxy({
  url: `rtsp://us:[email protected].${req.params.id}:554/cam/realmonitor?channel=1&subtype=0``,
})(ws));