Live display camera, using websocket and jsmpeg. Connection to ws://my_api:port failed

843 Views Asked by At

WebSocket connection to 'ws://my_ip:port/' failed:

  1. FE

    import React, {useEffect} from "react"; import "./App.css"; import JSMpeg from '@cycjimmy/jsmpeg-player';

const App = () => {

useEffect(() => {
    new JSMpeg.VideoElement("#video-canvas", ws://localhost:port, {
            autoplay: true,
        });

}, []);

return (
    <div id="body">
        <div id="title"
            style={{
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                fontSize: "28px",
                fontWeight: "bold",
                marginTop: "10px",
                marginBottom: "10px",
                color: "blue",
            }}>
            Player stream RTSP
        </div>
        <div id="video" style={{height: "480px", width: "640px"}}/>

    </div>
);

};

export default App;

  1. BE

const app = require("express")();
const cors = require("cors");
const morgan = require('morgan') ;
Stream = require('node-rtsp-stream')

app.use(cors());
app.use(morgan('dev'));
const streams = {};

const stream_configs = [{
  key: 'kbvision',
  port: 9999,
  url: 'rtsp://user:password@url,
},
];

const stopStream = (port) => {
  if(streams[port]){
    streams[port].stop()
    delete streams[port];
  }
}

app.listen(8080, ()=> {
  console.log("Server running on port 8080 ")
  stream_configs.forEach((config) =>{
    startStream(config.key, config.url, config.port)
  })
})

  1. RESULT

    VIDEO IS NOT DISPLAYED

0

There are 0 best solutions below