search

zauberzeug / nicegui

Create web-based user interfaces with Python. The nice way.
https://nicegui.io
MIT License
9.97k stars 593 forks source link

chrome browser ERR: RESULT_CODE_HUNG #3509

Closed sonicno1 closed 2 months ago

sonicno1 commented 2 months ago

Description

ui.notify(" web page open!")
await asyncio.sleep(1)
ui.navigate.to("https://www.gslaxxx1112.com", new_tab=True)

The newly opened site is a video playback site, and when this site is closed, the nicegui web page hangs when you return to nicegui. The video site has JS to switch the video source, and after switching back and forth, the current site is closed.Returning to the nicegui site there is a hunching phenomenon

If the site is opened separately https://www.gslaxxx1112.com it will not cause nicegui to hang up

Using ui.link to access the same site is normal, and there is no lingering phenomenon

The phenomenon is the same regardless of whether you use Chrome on your computer or on your phone, and it's obviously caused by the ui.navigate.to() or ui.open() function

sonicno1 commented 2 months ago

This phenomenon shows that when using a domain name, the IP address is used to access normally

sonicno1 commented 2 months ago

image

python-and-fiction commented 2 months ago

please provide full code of your example.Is there still a problem after try other site like www.baidu.com?

sonicno1 commented 2 months ago 
             flvPlayer.on(flvjs.Events.ERROR, (errType, errDetail) => {
               if (this.flvPlayer) {
                   flvPlayer.unload();
                   flvPlayer.load();
                   flvPlayer.play(); 
               }
             });

The problem was found, it was caused by this js code, which is a strange phenomenon, and after I commented out this code, it didn't happen

python-and-fiction commented 2 months ago

Is it a bug of Nicegui? Can you confirm it? If not,please provide a minimum example.

sonicno1 commented 2 months ago

This problem is because flvjs does not handle the fact that when the user closes the video page, there is no translation resource that causes the page of Nicegui to freeze, so there is a vulnerability in Nicegui that needs to be patched

sonicno1 commented 2 months ago

For example, in my local web page, the above code will cause nicegui to hang up, provided that the flvjs video page is opened using the ui.open() function

python-and-fiction commented 2 months ago

please provide a minimum example to show bug. Code is better for everyone, talk makes us confused.

sonicno1 commented 2 months ago 
<!DOCTYPE html>  
<html lang="en">  

<head>  
    <title>Media Player</title>  
    <script src="js/flv.min.js"></script>
    <link href="css/video-js.css" rel="stylesheet">
</head>  

<body>  
<p style="font-family: Arial, sans-serif; font-weight: bold; font-size: 16px; color: #333; line-height: 1.0; text-align: left; margin-top: 20px;">  
    <span style="color: white;">live：</span>  
    <button id="button1" class="cmd-button" onclick="changeChannel1()" style="font-size: 16px;">Channel1</button>  
    <button id="button2" class="cmd-button" onclick="changeChannel2()" style="font-size: 16px;">Channel2</button> 
</p>

<video id="videoElement" class="video-js vjs-default-skin vjs-big-play-centered" style="width: 100%; height: 768px" controls="controls" controlslist="nodownload" oncontextmenu="return false;"></video>

<script>
        var videoElement;
    var flvPlayer;
    if (flvjs.isSupported()) {
        videoElement = document.getElementById('videoElement');
        flvPlayer = flvjs.createPlayer({
            type: 'video/mp4',
            url:"/home/aaa.mp4"
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();
    }

      function Channel(newUrl) {  
            videoElement = document.getElementById('videoElement');  
            if (!videoElement) {  
                console.error('Video element not found!');  
                return;  
            }  

            flvPlayer = flvjs.createPlayer({  
                type: 'video/mp4',  
                url: newUrl 
            });  

            flvPlayer.attachMediaElement(videoElement);  

            flvPlayer.load();  
            flvPlayer.play();  

            flvPlayer.on(flvjs.Events.ERROR, (errType, errDetail) => {
              if (this.flvPlayer) {
                  flvPlayer.unload();
                  flvPlayer.load();
                  flvPlayer.play(); 
              }
            });

            window.flvPlayer = flvPlayer;  
        }

        function changeChannel1() {
            let Path = "/home/aaa.mp4"
            Channel(Path)
        }

        function changeChannel2() { 
            let Path= "/home/bbb.mp4"
            Channel(Path)
        }

</script>

</body> 
</html>
python-and-fiction commented 2 months ago

The problem is : In chrome,click link button will cause ERR: RESULT_CODE_HUNG. click link link or visit http://localhost:8081/index.html won't cause above error. @sonicno1 Am I right? Where can i download flv.min.js? Please try my solution in your PC,make sure it can show bug you said. Server index.html by python -m http.server 8081 -d {parent dir of index.html}

nicegui app is

from nicegui import ui

link = 'http://localhost:8081/index.html'

ui.button('link',on_click=lambda :ui.navigate.to(link,new_tab=True))
ui.link(text='link',target=link,new_tab=True)

ui.run()

index.html is

<!DOCTYPE html>  
<html lang="en">  

<head>  
    <title>Media Player</title>  
    <script src="js/flv.min.js"></script>
    <link href="css/video-js.css" rel="stylesheet">
</head>  

<body>  
<p style="font-family: Arial, sans-serif; font-weight: bold; font-size: 16px; color: #333; line-height: 1.0; text-align: left; margin-top: 20px;">  
    <span style="color: white;">live：</span>  
    <button id="button1" class="cmd-button" onclick="changeChannel1()" style="font-size: 16px;">Channel1</button>  
    <button id="button2" class="cmd-button" onclick="changeChannel2()" style="font-size: 16px;">Channel2</button> 
</p>

<video id="videoElement" class="video-js vjs-default-skin vjs-big-play-centered" style="width: 100%; height: 768px" controls="controls" controlslist="nodownload" oncontextmenu="return false;"></video>

<script>
        var videoElement;
    var flvPlayer;
    if (flvjs.isSupported()) {
        videoElement = document.getElementById('videoElement');
        flvPlayer = flvjs.createPlayer({
            type: 'video/mp4',
            url:"/home/aaa.mp4"
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();
    }

      function Channel(newUrl) {  
            videoElement = document.getElementById('videoElement');  
            if (!videoElement) {  
                console.error('Video element not found!');  
                return;  
            }  

            flvPlayer = flvjs.createPlayer({  
                type: 'video/mp4',  
                url: newUrl 
            });  

            flvPlayer.attachMediaElement(videoElement);  

            flvPlayer.load();  
            flvPlayer.play();  

            flvPlayer.on(flvjs.Events.ERROR, (errType, errDetail) => {
              if (this.flvPlayer) {
                  flvPlayer.unload();
                  flvPlayer.load();
                  flvPlayer.play(); 
              }
            });

            window.flvPlayer = flvPlayer;  
        }

        function changeChannel1() {
            let Path = "/home/aaa.mp4"
            Channel(Path)
        }

        function changeChannel2() { 
            let Path= "/home/bbb.mp4"
            Channel(Path)
        }

</script>

</body> 
</html>
sonicno1 commented 2 months ago

html for nginx
flv.min.zip

python-and-fiction commented 2 months ago

@sonicno1 create a minimum example based on my answer,i can't understand what is you problem totally.

sonicno1 commented 2 months ago

With the above html code,

videoElement = document.getElementById('videoElement');
        flvPlayer = flvjs.createPlayer({
            type: 'flv',
            isLive: true,
            url:"http://xxxxx/live"  // Grab a live stream yourself from web media
        });

Then use the ui.open() function to open the html web page and switch channels, then exit the current web page, return to the nicegui page, at this time all the functions in the page are invalid, click invalid, and wait for the browser to return a hung error

python-and-fiction commented 2 months ago

@sonicno1 according to your words,It should be a problem of your webserver's configure or flv.js, If it works well with pure html page which is servered by python -m http.server,it is probably a problem of your webserver's configure. If error is still with pure html page which is servered by python -m http.server, please test it and provide full code in one comment.

sonicno1 commented 2 months ago

@python-and-fiction I haven't used python to launch scripts with js, I always use nginx

sonicno1 commented 2 months ago

I'm sorry for wasting everyone's time, this phenomenon is too strange, I did a few experiments, you must meet the domain name access nicegui and, ui.open() function to open the video website, this bug will appear, if nicegui is the IP address, open the video website through the ui.open() function, switch channels and exit, will not cause hung . So, this issue closes it

python-and-fiction commented 2 months ago

@sonicno1 please note that: Make sure it is really an issue (see FAQs). A lot of people will read your message. Make it worth their time.

  1. What are you trying to do? If possible, give a minimal reproducible code example. Put source code in fenced code blocks with syntax highlighting.
  2. What do you expect to happen?
  3. What happens instead?

If you are not sure it is a bug of nicegui, create a discussion firstly. Lots of nicegui users maybe solve it and help you confirm it quickly.