У меня есть видеоплеер (проигрыватель jsmpeg), который открывает веб-сокет серверу для воспроизведения видео в реальном времени. Принцип работы видеосервера заключается в подсчете количества подключающихся клиентов. Он начинает потоковую передачу при количестве клиентов> 0. Эта часть работает. Когда мой видеоплеер был в автономном приложении для реагирования, он отлично справлялся со всем, когда я закрывал вкладку / снова открывал.
Я привык использовать response-router. Мне нужен такой же лог c, но вместо того, чтобы открывать и закрывать вкладку, я перехожу на новую страницу реактивного маршрутизатора. У меня есть домашняя страница и страница игрока. Когда я открываю страницу плеера, она работает нормально, сервер понимает, что клиент подключается и запускается, но когда я go возвращаюсь на домашнюю страницу, он «остается живым» и, кажется, не размонтирует / завершает соединение. Когда я go возвращаюсь на страницу плеера, открывается второе соединение, и так далее, и так далее, пока я не закрою вкладку, которая завершает работу всех клиентов.
Как мне закрыть проигрыватель, когда я ухожу со страницы? Я хочу, чтобы переход из player. js работал так же, как закрытие вкладки. Компонент может повторно визуализироваться / монтироваться, когда я возвращаюсь к проигрывателю.
Мое приложение. js
import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';
import Error from './components/Error';
import Navigation from './components/Navigation';
import Player from './components/Player.js';
class App extends Component {
render() {
return (
<BrowserRouter>
<div>
<Navigation />
<Switch>
<Route path="/" component={Home} exact/>
<Route path="/player" component={Player}/>
<Route component={Error}/>
</Switch>
</div>
</BrowserRouter>
);
}
}
export default App;
Мой плеер
import React from 'react';
import JsmpegPlayer from './JsmpegPlayer';
import '../App.css';
const videoOptions = {
poster: ''
};
const videoOverlayOptions = {autoplay: true};
const player = () => {
return (
<div>
<header>
<JsmpegPlayer
wrapperClassName="video-wrapper"
videoUrl="ws://<my ip>:9999"
options={videoOptions}
overlayOptions={videoOverlayOptions}
/>
</header>
</div>
);
}
export default player;
jsmpeg-плеер
import React, {Component} from 'react';
import JSMpeg from '@cycjimmy/jsmpeg-player';
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>
);
};
componentDidMount() {
// Reference documentation, pay attention to the order of parameters.
// https://github.com/cycjimmy/jsmpeg-player#usage
console.log('I was triggered during componentDidMount')
new JSMpeg.VideoElement(
this.els.videoWrapper,
this.props.videoUrl,
this.props.options,
this.props.overlayOptions
);
};
};