k-yle / rtsp-relay

📽 View an RTSP stream in your web browser using an express.js server
https://npm.im/rtsp-relay
MIT License
325 stars 59 forks source link

Can't display on linux #237

Closed RicardaY closed 10 months ago

RicardaY commented 10 months ago

After I deploy successfully, I use the Chrome browser on Windows to access it at the same time. It displays normally on Windows but not on Linux. Is there any solution?

k-yle commented 10 months ago

You'll need to provide a bit more information before we can help. There are end-to-end tests that confirm the system works on Ubuntu 22. Have you tried opening the developer tools to see if there is an error message?

RicardaY commented 10 months ago

exaple

On the left and right are the chrome display effects of WIndows and Linux, respectively.Tested on Ubuntu 22.04 and ArchLinux, but did not display

server:

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

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

// 设置跨域访问
app.all('*', function (req, res, next) {
  //设置请求头
  //允许所有来源访问
  res.header('Access-Control-Allow-Origin', '*')
  //用于判断request来自ajax还是传统请求
  res.header("Access-Control-Allow-Headers", " Origin, X-Requested-With, Content-Type, Accept");
  //允许访问的方式
  res.header('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS')
  //修改程序信息与版本
  res.header('X-Powered-By', ' 3.2.1')
  //内容类型:如果是post请求必须指定这个属性
  res.header('Content-Type', 'application/json;charset=utf-8')
  next()
})
const handler = proxy({
  url: `rtsp://rtspstream:b71299ea294da9d188226d667eebddcc@zephyr.rtsp.stream/movie`,
  // if your RTSP stream need credentials, include them in the URL as above
  verbose: false,
  //提高画质
  additionalOptions: [
    '-rtsp_transport', 'tcp'
  ]
});

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

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

//   <script src='https://cdn.jsdelivr.net/gh/phoboslab/jsmpeg@9cf21d3/jsmpeg.min.js'></script>
//   <script>
//   debugger;
//     new JSMpeg.Player('ws://192.168.10.230:2000/api/stream', {
//       canvas: document.getElementById('canvas')
//     })
//   </script>
// `),
// );

app.listen(2000, '0.0.0.0');

html:

<html>
<head>
</head>
<body style="text-align:center;margin:atuo;">
 <canvas id='canvas' 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/stream', {
      canvas: document.getElementById('canvas')
    })
  </script><body>
</html>