'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
- 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;
- 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);
}
};
};
- 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 |
|---|
