Video stopped by the browser

[yeprem]

We have this code


import React, { useEffect, useRef } from 'react';
import "./FlashphonerComponent.scss";
function FlashphonerComponent() {

useEffect(() => {
const Flashphoner = window.Flashphoner;
if (Flashphoner) {
var SESSION_STATUS = Flashphoner.constants.SESSION_STATUS;
var STREAM_STATUS = Flashphoner.constants.STREAM_STATUS;
console.log("STREAM_STATUS")
var session;
var PRELOADER_URL = "https://github.com/flashphoner/flas...xamples/demo/dependencies/media/preloader.mp4";

function init_api() {
Flashphoner.init({});
//Connect to WCS server over websockets
session = Flashphoner.createSession({
urlServer: "wss://stream.****.am" //specify the address of your WCS
})
.on(STREAM_STATUS.PLAYING, function(stream) {
console.log("playing");

// Get a reference to the video element
var videoElement = stream.getVideoElement();

// Set the volume (0.5 for half volume)
videoElement.volume = 0;
})
.on(SESSION_STATUS.ESTABLISHED, function(session) {
console.log("ESTABLISHED");

playClick();
});

}

var Browser = {
isSafari: function() {
return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
},
}

function playClick() {
if (Browser.isSafari()) {
Flashphoner.playFirstVideo(document.getElementById("play"), true, PRELOADER_URL).then(function() {
playStream();
});
} else {
playStream();
}
}

function playStream() {
var options = {
name: "*",
display: document.getElementById("play")
};
var stream = session.createStream(options).on(STREAM_STATUS.PLAYING, function(stream) {
console.log("playing");
});
stream.play();
}
init_api()
}
}, []);
return (
<>
<div class="fp-Video">
<div id="play" class="display"></div>
</div>
</>
);
}
export default FlashphonerComponent;

And from browser stop the vide this is error

Unmuting failed and the element was paused instead because the user didn't interact with the document before. https://goo.gl/xX8pDD

Please help me run video autoplay

 

[yeprem]

I successfully made an unmute video during auto-load but when started the video i changed
stream.setVolume(1); Chrome automatically stops video how can I have sound autoplay video

 

[Max]

Good day.
This is Chrome autoplay policy issue. Video element should be muted to play video automatically. Please update Web SDK to the latest build 2.0.233 (or via NPM) and set the following stream option

var options = {
    ...,
    unmutePlayOnStart: false
};
var stream = session.createStream(options).on(STREAM_STATUS.PLAYING, function(stream) {
    ...
});

 

[yeprem]

Dear Max,

I added unmutePlayOnStart: false option video open but there is not sound.
We need to auto play streaming with sound enabled.

So how we can first mute the video and then enable sound? this is our code please help us to achieve that, i know there is a way but i could not achieve that

Here is our code

`
var SESSION_STATUS = Flashphoner.constants.SESSION_STATUS;
var STREAM_STATUS = Flashphoner.constants.STREAM_STATUS;
console.log("STREAM_STATUS")
var session;
var PRELOADER_URL = "https://github.com/flashphoner/flas...xamples/demo/dependencies/media/preloader.mp4";

function init_api() {
Flashphoner.init({});
//Connect to WCS server over websockets
session = Flashphoner.createSession({
urlServer: "wss://stream.******.am" //specify the address of your WCS
})
.on(STREAM_STATUS.PLAYING, function(stream) {
console.log("playing");

// Get a reference to the video element
var videoElement = stream.getVideoElement();

// Set the volume (0.5 for half volume)
videoElement.volume = 1;
})
.on(SESSION_STATUS.ESTABLISHED, function(session) {
console.log("ESTABLISHED");
playClick()
});

}

var Browser = {
isSafari: function() {
return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
},
}

function playClick() {
if (Browser.isSafari()) {
Flashphoner.playFirstVideo(document.getElementById("play")).then(function() {
playStream();
});
} else {
playStream();
}
}

function playStream() {
var options = {
name: "***",
display: document.getElementById("play"),
cacheLocalResources: true,
unmutePlayOnStart: false
};
var stream = session.createStream(options)
.on(STREAM_STATUS.PENDING, function(stream) {
console.log("PENDING");
})
.on(STREAM_STATUS.PLAYING, function(stream) {


});
const a = stream.play();

}
init_api()

`

We are looking forward to your reply

 

[Max]

I added unmutePlayOnStart: false option video open but there is not sound.
We need to auto play streaming with sound enabled.

This is autoplay policy issue. The user action is required to unmute video: click a button or move a volume slider. You can use the method Stream.unmuteRemoteAudio() when click event occurs. Also, in last Web SDK builds you can enable standard video controls using the stream option useControls:

var options = {
    ...,
    unmutePlayOnStart: false,
    useControls: true
};
var stream = session.createStream(options).on(STREAM_STATUS.PLAYING, function(stream) {
    ...
});

In this case, user should unmute audio using a standard mute/unmute button.

 

[yeprem]

Yes, i know that, but i see other live video examples, where video autoplay with sound. (Without any action from user, and the video do not stop)

Could you please provide a solution, trigger a user event, and enable sound without user's real action?

our requirement is without user real action with anyway open video with the sound.

 

[Max]

Could you please provide a solution, trigger a user event, and enable sound without user's real action?

There is no a solution without a real user action. You can provide some landing page where user has to interact with your site or click something before playback.

 

[yeprem]

No, it's possible, I see live examples where when a page opens on my Chrome opens a video with the sound.
But currently, I could not figure out how could I do that. And I'm trying to achieve that.

Could you please help me with how can I have a custom Sound button to manage voice?

 

[Max]

No, it's possible, I see live examples where when a page opens on my Chrome opens a video with the sound.

Please provide a links to test.

Could you please help me with how can I have a custom Sound button to manage voice?

Please look at Player example using custom volume slider and Embed Player example using standard controls.