Loading local videos in Firefox makes the app hang or crash

[paulimer]

Hi all, I have this weird issue when trying to integrate a tutorial with videos in my shiny app. I use the includeHTML function to load html files that have a video tag in them, and it does not work reliably in Firefox (but no issue in Chromium-based browsers)

System details

Output of sessionInfo():

R version 4.1.3 (2022-03-10)
Platform: x86_64-redhat-linux-gnu (64-bit)
Running under: Fedora Linux 35 (Workstation Edition)

Matrix products: default
BLAS/LAPACK: /usr/lib64/libflexiblas.so.3.1

locale:
 [1] LC_CTYPE=en_US.UTF-8       LC_NUMERIC=C              
 [3] LC_TIME=en_US.UTF-8        LC_COLLATE=en_US.UTF-8    
 [5] LC_MONETARY=en_US.UTF-8    LC_MESSAGES=en_US.UTF-8   
 [7] LC_PAPER=en_US.UTF-8       LC_NAME=C                 
 [9] LC_ADDRESS=C               LC_TELEPHONE=C            
[11] LC_MEASUREMENT=en_US.UTF-8 LC_IDENTIFICATION=C       

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

other attached packages:
[1] shiny_1.7.1

loaded via a namespace (and not attached):
 [1] Rcpp_1.0.8.3     digest_0.6.29    later_1.3.0      mime_0.12       
 [5] R6_2.5.1         jsonlite_1.8.0   lifecycle_1.0.1  xtable_1.8-4    
 [9] magrittr_2.0.3   cachem_1.0.6     rlang_1.0.2      cli_3.2.0       
[13] promises_1.2.0.1 jquerylib_0.1.4  bslib_0.3.1      ellipsis_0.3.2  
[17] tools_4.1.3      httpuv_1.6.5     fastmap_1.1.0    compiler_4.1.3  
[21] htmltools_0.5.2  sass_0.4.1      

Example application or steps to reproduce the problem

There is no simple way to reproduce the bug, as one needs external resources. But a simple app, consisting of only includeHTML calls, exhibits this behavior. For instance this one :

library(shiny)

addResourcePath(prefix = "www", directoryPath = "./www")
ui <- fluidPage(
  tabsetPanel(
    tabPanel(
      "PCA",
      includeHTML("www/tutorials/pca.html")
    ),
    tabPanel(
      "Table",
      includeHTML("www/tutorials/table.html")
    ),
    tabPanel(
      "MA-plot",
      withMathJax(includeHTML("www/tutorials/maplot.html"))
    ),
    tabPanel(
      "Volcano Plot",
      includeHTML("www/tutorials/volcano.html")
    ),
    tabPanel(
      "Heatmap",
      includeHTML("www/tutorials/heatmap.html")
    )
  )
)

server <- function(input, output, session) {
}

shinyApp(ui, server)

Describe the problem in detail

The behavior is a bit erratic : sometimes there is no issue, sometimes the whole app disconnects (showing Firefox can’t establish a connection to the server at ws://127.0.0.1:5027/websocket/. shinyapp.ts:319:17 in the JS console), sometimes it loads for a very long time, sometimes only one video does not work, and the JS console shows Uncaught (in promise) DOMException: The fetching process for the media resource was aborted by the user agent at the user's request..

My videos aren't very long or big, less than 100MB overall.

The addResourcePath is necessary because otherwise using shinyApp(), the app does not see the www folder. And I use shinyApp() because I like the Shiny as a Package approach of Mastering Shiny.

The html files in question are just a big div with p, ul, li, and video tags inside. Nothing fancy.

Firefox version : 99.0.1

Thanks in advance!

[paulimer]

Just a small update on the issue : The addResourcePath has nothing to do with it, as another setup of my app without it (package structure, with inst/app/ folder containing both www and the app.R) has the same issue. However it has everything to do with the presence of <video> tags inside the HTML files included via includeHTML(). Removal of those tags (and thus the videos) fixes the issue.