How can we use it in React ?

[ahmad-crossplatform]

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

[cycjimmy]

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

[ahmad-crossplatform]

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 ?

[cycjimmy]

jsmpeg-player is based on jsmpeg. You need to confirm if jsmpeg works for your TS file.

[ahmad-crossplatform]

How do i do that ?

[cycjimmy]

How do i do that ?

See https://github.com/phoboslab/jsmpeg#usage

[ahmad-crossplatform]

Thanks !

[ahmad-crossplatform]

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 ?

[cycjimmy]

You can use WebSockets to support streaming.
See: https://github.com/phoboslab/jsmpeg#streaming-via-websockets

[waleedd32]

@cycjimmy could you possible create react hooks version of that ? I really need it for live streaming