'Don't show live video from camera when deploying to domain @cycjimmy/jsmpeg-player

The problem I had when developing to a domain. On localhost although it was running fine, when deployed it didn't work. Whether the connection to ws://domain/api/stream is open. Result after running black screen. If anyone has encountered this problem, please help me

English is not my mother language so could be mistakes

Image: enter image description here

  1. App.js

import React from 'react';
import './App.css';

import JsmpegPlayer from './components/JsmpegPlayer';

const videoOptions = {};

const videoOverlayOptions = {preserveDrawingBuffer: true};

function App() {
    let jsmpegPlayer = null;

    return (
        <div className="App">
            <header className="App-header">
                <JsmpegPlayer
                    wrapperClassName="video-wrapper"
                    videoUrl="ws://my-domain/api/stream"
                    // videoUrl="ws://localhost:5000/api/stream"
                    options={videoOptions}
                    overlayOptions={videoOverlayOptions}
                    onRef={ref => jsmpegPlayer = ref}
                />
            </header>
        </div>
    );
}

export default App;
  1. Video.js

import React, { Component } from 'react';
import JSMpeg from '@cycjimmy/jsmpeg-player';
import { Button } from 'antd';
import './CameraDetail.css';
import {
  InstagramOutlined,
  PauseCircleOutlined,
  PlayCircleOutlined,
} from '@ant-design/icons';

export default class JsmpegPlayer extends Component {
  constructor(props) {
    super(props);
    this.els = {
      videoWrapper: null,
    };
  };

  render() {
    return (
      <>
        <div
          className={this.props.wrapperClassName}
          ref={videoWrapper => this.els.videoWrapper = videoWrapper}>
        </div>
        <br/>
        <div>
           <div className="buttons-wrapper">
                    <button onClick={() => jsmpegPlayer.play()}>Play</button>
                    <button onClick={() => jsmpegPlayer.pause()}>Pause</button>
                    <button onClick={() => jsmpegPlayer.stop()}>Stop</button>
                    <button onClick={() => jsmpegPlayer.photo()}>Image</button>
                </div>
        </div>
      </>
    );
  };

  componentDidMount() {
    this.video = new JSMpeg.VideoElement(
      this.els.videoWrapper,
      this.props.videoUrl,
      this.props.options,
      this.props.overlayOptions,
    );

    if (this.props.onRef) {
      this.props.onRef(this);
    }
  };
};
  1. Server.js in localhost

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

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

const handler = proxy({
    url: `rtsp://....:.../Streaming/Channels/101`,
    verbose: false,
    transport: 'tcp',
});

app.ws('/api/stream', handler);

app.get('/', (req, res) =>
    res.send(
        `hg`,

    ),
);

app.listen(5000);


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source