How can we use it in React ?
ahmad-crossplatform opened this issue · 9 comments
Hello , I came to this tool and I am wondering if there is a way that i can use this as a react component .
Thanks
Jsmpeg-player does not support the virtual DOM of React.
But you can write it directly into the form of the react component.
I wrote a simple example and hope to help you.
Defining component -> JsmpegPlayer.js
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
new JSMpeg.VideoElement(
this.els.videoWrapper,
this.props.videoUrl,
this.props.options,
this.props.overlayOptions
);
};
};
};Using component -> App.js
function App() {
return (
...
<JsmpegPlayer
wrapperClassName="video-wrapper"
videoUrl="..."
options={...}
overlayOptions={...}
/>
...
);
}Preview
Hello @cycjimmy thanks for your response .
I am acutually trying to play http://server.shamelforyou.com:5477/live/ahmedmadi/ahm1234/16877.ts can play it with VLC but not really on the web , can you help me understand what happens here ?
jsmpeg-player is based on jsmpeg. You need to confirm if jsmpeg works for your TS file.
How do i do that ?
How do i do that ?
Thanks !
sorry if I am asking many questions but i am new to this :)
correct me if I am wrong , but live streaming is now supported , right ?
You can use WebSockets to support streaming.
See: https://github.com/phoboslab/jsmpeg#streaming-via-websockets