Flashphoner with ReactJS

S

Srdjan

New Member
Hi all,

I am trying to integrate flashphoner player example with ReactJS. The way I tried is by loading flashphoner.js script in <head/> and then in Player Component HTML is being rendered. In componentDidMount method, Flashphoner.init() and start() functions are being called. However an error is returned from flashphoner.js: "this.trigger is not a function" - called from stream.play().

What am I missing? Any help is appreciated.

Thanks.
 
Max

Max

Administrator
Staff member
Good day.
Please provide minimum sample source code of your project, we will check it. Also try building WebSDK (JavaScript API) from sources. Procedure is described in details in the documentation.
 
S

Srdjan

New Member
Hi,

Here is the minimal sample code. If you need real source code/files let me know.

Code: 
class Player extends React.Component {
  componentDidMount() {
     Flashphoner.init();
     ...
     // create session
     // create stream
     ...
     stream.play();
  }
  render () {
    <div id="player"></div>
  }
}

const App = () => (
  <Head>
      <script type="text/javascript" src="flashphoner.js></script>
  </Head>
  <Player/>
);
 
Max

Max

Administrator
Staff member
Good day.
Thank you for providing the information. We will check and let you know in this topic.
 
S

sulphur

Member
Hi @Max, I've stumbled on the same error. WebRTC and WSPlayer work fine. However, with MSE I have the same error. In order to use MSE I need to build the flashphoner.js file from the source?
 
Max

Max

Administrator
Staff member
sulphur said:
Hi @Max, I've stumbled on the same error. WebRTC and WSPlayer work fine. However, with MSE I have the same error. In order to use MSE I need to build the flashphoner.js file from the source?
Click to expand...
Please clarify:
- do you build WebSDK from sources as described here, or using pre-build flashphoner.js downloaded from this page?
- what example application (Player, Embed Player, ...) do you use for testing?
Please also note that MSE does not work in iOS Safari.
 
S

sulphur

Member
I use the latest js downloaded from releases page I use the basic player example for testing. Basically, I followed the player example and stripped it down to the parts that I need and removed the "buttons". And I test it in Google Chrome Desktop. What I don't understand is that the example player works fine when I test from my WCS demos page. So it must be something I do wrong.
 
S

sulphur

Member
so basically error i have is here as on the image. And "this" is undefined. and the "error" and the error seems to be some kind of provider error. I will try to debug it a little but more soon.

1608194498651.png
Screenshot 2020-12-17 at 09.37.39.png
 
Max

Max

Administrator
Staff member
Please clarify: is MSE working in Player example out of the box? If yes, please modify it to reproduce the issue and send us with this private form, we will check.
 
rin

rin

New Member
Hi Max, I am in same situation. Is there a solution or workaround for the "this .trigger is not function" issue?
 
Max

Max

Administrator
Staff member
rin said:
Hi Max, I am in same situation. Is there a solution or workaround for the "this .trigger is not function" issue?
Click to expand...
Please check if MSE working in Player example out of the box. If yes, please modify it to reproduce the issue and send us with this private form, we will check.
 
V

vk007

New Member
Srdjan said:
Hi all,

I am trying to integrate flashphoner player example with ReactJS. The way I tried is by loading flashphoner.js script in <head/> and then in Player Component HTML is being rendered. In componentDidMount method, Flashphoner.init() and start() functions are being called. However an error is returned from flashphoner.js: "this.trigger is not a function" - called from stream.play().

What am I missing? Any help is appreciated.

Thanks.
Click to expand...
Hi @Srdjan, did u able to implement flashphoner player with ReactJS? I need help on this
 
You must log in or register to reply here.
Top