React-360: No sound while playing video using VideoModule

[KirillFishuk]

Description

There is no video sound while playing video using VideoModule.play();

Expected behavior

Playing video sound while playing video using VideoModule.play();

Actual behavior

There is no video sound while playing video using VideoModule.play();

Reproduction

Add *.mp4 video with sound using VideoModule.createPlayer(), play video VideoModule.play()

An example of your code that reliably reproduces the issue is ideal:
https://github.com/KirillFishuk/GoTour/blob/sound-issue/src/modules/Navigation/components/Background.js

Additional Information

• 'react-360' package version: [email protected]
• 'react-360-web' package version: [email protected]
• Operating System: Linux, Windows, Oculus go operating system
• Browser: Oculus Browser, Chrome, Firefox
• VR Device: Oculus go

[eric-sem]

Does your video autoplay when you open your app?

On Chrome you have to interact with the browser before audio is autoplayed: (https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#webaudio)

I work around that by putting a VR Button at the start which triggers everything after the user clicks it.

[KirillFishuk]

Hello @eric-sem, thanks, but unfortunately your advise didn't help. Also, in my project, I did exactly what react 360 documentation suggests:

_VideoModule.createPlayer(name);
VideoModule.play(name, {source: {url: asset(path).uri}});
Environment.setBackgroundVideo(name);_

Also, I experience the problem in all browsers, including Oculus browser.
I just can't understand, maybe I should play sound from video separately, using AudioModule?
But, in this case, it's hard to fit sound and video together, because of some delay.

[rdmilligan]

I had to add the muted: false attribute i.e. try VideoModule.play(name, {source: {url: asset(path).uri}, muted: false });

I expected that the video would be muted: false by default

[ansible-comme]

Just for a different take to @rdmilligan ...

In your client.js where you initialise the player (inside function(init))
const sample_1 = r360.compositor.createVideoPlayer('sample_1');

You can set muted attr false:
sample_1.setMuted(false);

[KirillFishuk]

Hello guys!
Thank you for your advice. It was really helpful.
As for now, I managed to solve the problem, by adding
_sample_1.setMuted(false) to client.js_
and inside the app
_Environment.setBackgroundVideo('sample_1');
VideoModule.resume('sample_1');_

Now, I'm working on more scalable solution.
I'm closing the issue.

[drubio1989]

@eric-sem Do you think you could provide a code sample of the Vr Button you are using in order to initialize everything? I am confused as how to interpret the "triggers everything after the user clicks it" in your comment. I learned that VrButton is not actually a user interaction but an actual html element is needed to constitute user interaction.

What I'd like to know is where you are creating this Vr button for the user to interact with and how its triggering everything. Is it being created in index.html or maybe some sort of nativemodule that you're using? Based on the clues that I gathered I implemented the below code in index.html:

<div id="container">

    <button id="initiate"></button>

  </div>

  <script src="./client.bundle?platform=vr"></script>
  <script>

    // Initialize the React 360 application
    React360.init(
      'index.bundle?platform=vr&dev=true',
      document.getElementById('container'),
      {
        assetRoot: 'static_assets/',
      }
    );

    document.getElementById('initiate').click();
  </script>

What I wanted was for this button to be clicked automatically to enable audio on mobile but it doesn't seem to work. Can someone provide a code sample?