Only handle autoplay when DOMEx is NotAlllowedError

Add check to prevent re-handling autoplay multiple times for cams

Screenshare viewer element muted by default
This commit is contained in:
prlanzarin 2019-08-05 17:28:36 +00:00
parent 9942dd0aa2
commit 01b53728f8
4 changed files with 31 additions and 20 deletions

View File

@ -73,13 +73,16 @@ export default class KurentoAudioBridge extends BaseAudioBridge {
.then(() => { .then(() => {
resolve(this.callback({ status: this.baseCallStates.started })); resolve(this.callback({ status: this.baseCallStates.started }));
}) })
.catch((e) => { .catch((error) => {
const tagFailedEvent = new CustomEvent('audioPlayFailed', { detail: { mediaElement: audioTag } }); // NotAllowedError equals autoplay issues, fire autoplay handling event
window.dispatchEvent(tagFailedEvent); if (error.name === 'NotAllowedError') {
const tagFailedEvent = new CustomEvent('audioPlayFailed', { detail: { mediaElement: audioTag } });
window.dispatchEvent(tagFailedEvent);
}
logger.warn({ logger.warn({
logCode: 'sfuaudiobridge_play_error', logCode: 'sfuaudiobridge_play_maybe_error',
extraInfo: { error: e }, extraInfo: { error },
}, 'Could not play audio tag, emit mediaTagPlayFailed event'); }, `Listen only media play failed due to ${error.name}`);
resolve(this.callback({ resolve(this.callback({
status: this.baseCallStates.autoplayBlocked, status: this.baseCallStates.autoplayBlocked,
})); }));
@ -104,7 +107,7 @@ export default class KurentoAudioBridge extends BaseAudioBridge {
logger.error({ logger.error({
logCode: 'sfuaudiobridge_listen_only_error_reconnect', logCode: 'sfuaudiobridge_listen_only_error_reconnect',
extraInfo: { error }, extraInfo: { error },
}, `Listen only failed for an ongoing session, try to reconnect`); }, 'Listen only failed for an ongoing session, try to reconnect');
window.kurentoExitAudio(); window.kurentoExitAudio();
this.callback({ status: this.baseCallStates.reconnecting }); this.callback({ status: this.baseCallStates.reconnecting });
this.reconnectOngoing = true; this.reconnectOngoing = true;

View File

@ -40,17 +40,20 @@ export default class KurentoScreenshareBridge {
if (webRtcPeer) { if (webRtcPeer) {
const screenshareTag = document.getElementById(SCREENSHARE_VIDEO_TAG); const screenshareTag = document.getElementById(SCREENSHARE_VIDEO_TAG);
const stream = webRtcPeer.getRemoteStream(); const stream = webRtcPeer.getRemoteStream();
screenshareTag.muted = true;
screenshareTag.pause(); screenshareTag.pause();
screenshareTag.srcObject = stream; screenshareTag.srcObject = stream;
screenshareTag.muted = false; screenshareTag.play().catch((error) => {
screenshareTag.play().catch((e) => { // NotAllowedError equals autoplay issues, fire autoplay handling event
const tagFailedEvent = new CustomEvent('screensharePlayFailed', if (error.name === 'NotAllowedError') {
{ detail: { mediaElement: screenshareTag } }); const tagFailedEvent = new CustomEvent('screensharePlayFailed',
window.dispatchEvent(tagFailedEvent); { detail: { mediaElement: screenshareTag } });
window.dispatchEvent(tagFailedEvent);
}
logger.warn({ logger.warn({
logCode: 'sfuscreenshareview_play_error', logCode: 'sfuscreenshareview_play_maybe_error',
extraInfo: { error: e }, extraInfo: { error },
}, 'Could not play screenshare viewer media tag, emit screensharePlayFailed'); }, `Screenshare viewer media play failed due to ${error.name}`);
}); });
} }
}; };

View File

@ -88,6 +88,7 @@ class VideoList extends Component {
this.setOptimalGrid = this.setOptimalGrid.bind(this); this.setOptimalGrid = this.setOptimalGrid.bind(this);
this.handleAllowAutoplay = this.handleAllowAutoplay.bind(this); this.handleAllowAutoplay = this.handleAllowAutoplay.bind(this);
this.handlePlayElementFailed = this.handlePlayElementFailed.bind(this); this.handlePlayElementFailed = this.handlePlayElementFailed.bind(this);
this.autoplayWasHandled = false;
} }
componentDidMount() { componentDidMount() {
@ -144,6 +145,7 @@ class VideoList extends Component {
handleAllowAutoplay() { handleAllowAutoplay() {
const { autoplayBlocked } = this.state; const { autoplayBlocked } = this.state;
this.autoplayWasHandled = true;
window.removeEventListener('videoPlayFailed', this.handlePlayElementFailed); window.removeEventListener('videoPlayFailed', this.handlePlayElementFailed);
while (this.failedMediaElements.length) { while (this.failedMediaElements.length) {
const mediaElement = this.failedMediaElements.shift(); const mediaElement = this.failedMediaElements.shift();
@ -162,7 +164,7 @@ class VideoList extends Component {
e.stopPropagation(); e.stopPropagation();
this.failedMediaElements.push(mediaElement); this.failedMediaElements.push(mediaElement);
if (!autoplayBlocked) { if (!autoplayBlocked && !this.autoplayWasHandled) {
this.setState({ autoplayBlocked: true }); this.setState({ autoplayBlocked: true });
} }
} }

View File

@ -65,12 +65,15 @@ class VideoListItem extends Component {
const playElement = (elem) => { const playElement = (elem) => {
if (elem.paused) { if (elem.paused) {
elem.play().catch((error) => { elem.play().catch((error) => {
const tagFailedEvent = new CustomEvent('videoPlayFailed', { detail: { mediaTag: elem } }); // NotAllowedError equals autoplay issues, fire autoplay handling event
window.dispatchEvent(tagFailedEvent); if (error.name === 'NotAllowedError') {
const tagFailedEvent = new CustomEvent('videoPlayFailed', { detail: { mediaTag: elem } });
window.dispatchEvent(tagFailedEvent);
}
logger.warn({ logger.warn({
logCode: 'videolistitem_component_play_error', logCode: 'videolistitem_component_play_maybe_error',
extraInfo: { error }, extraInfo: { error },
}, 'Could not play video tag, emit mediaTagPlayFailed event'); }, `Could not play video tag due to ${error.name}`);
}); });
} }
}; };