This is the fourth day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

Demand background

Only the first connected video can be played, and the following connected video can only play screenshots; When the first video is disconnected, the next connected playable video is played, and the others are still played as screenshots.

In short, fight for video playback rights; It’s the one who gets it first.

The video stream is connected using Websocket, so the webSocket connection is required to disconnect the video.

Bug scenario

Built-in browser Safari (the first video) After disconnecting from the network, the system relinks to the default url. After reconnecting to the network, the system relinks to the default URL. Manually click the browser to return to the previous video page and play the screenshot instead of the video, but the video switch is enabled.

Problem analysis

  • After the page jumps, the first video is not disconnected. As a result, the second video becomes the link after the rollback, and only the screenshot can be played.
  • Safari rollback does not refresh, causing the video switch to display incorrectly.

Problem solving

1. Disconnect the video link in scenarios such as Tab page switching and network disconnection (there is no need to deal with the closing of Tab page, and the browser will release all resources by itself).

1. UsevisibilitychangeEvent that listens for changes in page visibility.

visibilitychange

The VisiBilityChange event tracks changes in the visibility of the following pages:

  • Tab switching (Tab switching, on a PC, between tabs in a browser; On Mobile, opening a new page)
  • The Tab page or browser window is closed.

The following code can be used for testing:

document.addEventListener("visibilitychange", function(){ document.title = document.hidden ? "The user left" : "the user came back "; });Copy the code
document.visibilityState

If the document.visibilityState property changes, the visiBilityChange event will be triggered. The Document. visibilityState property has three property values:

  • hidden: The page is completely invisible (supported by all browsers).
  • visible: At least part of the page is visible (supported by all browsers).
  • prerender: The page is about to render or is rendering and is not visible (browser support for pre-rendering).

So, if we just want to determine the visibility of the page, we can listen to the VisiBilityChange event to determine whether the document.visibilityState property value is hidden and get the expected result.

Code implementation
window.addEventListener('visibilitychange', visibilitychange);
function visibilitychange() {
    if ('visible' === document.visibilityState) {
        location.reload();
    }else{
        closeVideoWS()
    }
}
Copy the code

2. Disconnect the video connection when the network is disconnected

The server does not know when the network is disconnected. The client will trigger onError and onClose events. Therefore, you need to add a heartbeat in the onOpen event to help the server disconnect the connection.

Listen for the rollback event and reload the page.

Since Safari is not the only browser with reload issues, we add a reload event to the rollback event.

pageshow

window.addEventListener('pageshow', Persisted) function persisted browserback (event){if(event.persisted){location. }}Copy the code

With that, the problem is solved, and I’ll see you tomorrow.