node解码视频流,调用海康视频摄像头

node 后端使用 rtsp-relay 推流,前端jsmpeg解码,实现网页接入视频功能,能同时实现多个
后端

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

const handler2 = proxy({
  url: `rtsp://admin:[email protected]:1221/cam/realmonitor?channel=1&subtype=0`,
  verbose: false,
  //提高画质
  additionalOptions: [
    '-rtsp_transport', 'tcp'
  ]
});

const handler3 = proxy({
  url: `rtsp://admin:[email protected]:122/cam/realmonitor?channel=1&subtype=0`,
  verbose: false,
  //提高画质
  additionalOptions: [
    '-rtsp_transport', 'tcp'
  ]
});

const handler4 = proxy({
  url: `rtsp://admin:[email protected]:134/cam/realmonitor?channel=1&subtype=0`,
  verbose: false,
  //提高画质
  additionalOptions: [
    '-rtsp_transport', 'tcp'
  ]
});

//类似注册路由
app.ws('/api/stream2', handler2);
app.ws('/api/stream3', handler3);
app.ws('/api/stream4', handler4);

//开启服务
app.listen(2000, '127.0.0.1');

前端html

<html>
<head>
</head>
<body style="text-align:center;margin:atuo;">
 <canvas id='canvas' style="height:500px"></canvas>
  <canvas id='canvas1' style="height:500px"></canvas>
   <canvas id='canvas2' style="height:500px"></canvas>
    <canvas id='canvas3' style="height:500px"></canvas>
  <script src='https://cdn.jsdelivr.net/gh/phoboslab/jsmpeg@9cf21d3/jsmpeg.min.js'></script>
  <script>

	new JSMpeg.Player('ws://127.0.0.1:2000/api/stream2', {
      canvas: document.getElementById('canvas1')
    })
	new JSMpeg.Player('ws://127.0.0.1:2000/api/stream3', {
      canvas: document.getElementById('canvas2')
    })
	 new JSMpeg.Player('ws://127.0.0.1:2000/api/stream4', {
      canvas: document.getElementById('canvas3')
    })
  </script>
  
  <body>
</html>

效果:

node解码视频流,调用海康视频摄像头_第1张图片

你可能感兴趣的:(视频流,音视频,javascript,开发语言)