Adding Javascript functionality: Video example


#1

Hello community!

I program Shiny Apps and I’m specialised in R. Sometimes I want to add Javascript functionality and a few basic Javascript functions I can add with the help of @daattali shinyjs package.

However, I have a few unknowns about the possibilities (for someone who is not a Javascript programmer)

  • is it possible to add larger Javascript libraries without knowing much Javascript?
  • is there a difference in Javascript implemented from your Shiny app as compared to directly from Javascript?

For example, I’ve had this annoying bug where basic Javascript functionality (skip a frame in a video) doesn’t work in Chrome browser, see https://groups.google.com/forum/#!topic/shiny-discuss/suyO3iIspvc. Even though the functionality seems to me identical as other websites.

Then I tried to use things like video.js (http://videojs.com/) and videojs frame_by_frame (github: erasche/videojs-framebyframe), or a JSON frame player (github: vagnervjs/frame-player).

I simply add their functionality in .js scripts and raed them into Shiny and try to use their functions, but unsuccessfully.

Any thoughts (guides/links) on how to take advantage of Javascript libraries in shiny apps, without minimal javascript knowledge is super appreciated!

Best,
Jiddu Alexander


#2

To answer your first question: yes, you can use 3rd party javascript libraries without too much work, but you will still need to know at least some very basic javascript in order to know how to integrate it into your app. Usually just including the external script and knowing how to write a 1-5 line code in javascript that calls the external library is enough for simple cases.

You can see an example I showed in this comment a couple years ago. It uses a 3rd party javascript library that shows pretty modal dialog messages, I didn’t know anything about the library, but after looking at the most basic examples from the library’s documentation I knew enough to write a simple binding into it, as the code there shows. I hope that helps. Learning some javascript could be a useful addition to your skillset if you find yourself needing this kind of thing.


#3

Cool, I wasn’t too crazy then trying to just include the scripts.

Am I right that basicly what you do then is to write your own shinyjs.function that you can call from the Shiny server, and that shinyjs.function calls the JS library functionality?
And that is because you can’t call the functionality from the included JS script directly, but you can call it from your extendShinyjs ‘environment’?

Yes, learning Javascript really adds useful options. In order to keep my focus on R I’ve been looking for that 10% JS that adds 200% to Shiny apps. I’m very grateful for all your packages, posts and comments that really help me with that. It’s addictive like the tidyverse.


#4

If you want to get shinyjs’s help then yes that’s the right process. In the example that I linked to in my previous comment you can see it in action: I defined a shinyjs.swal JS function, made it available using extendShinyjs(), and then in R I call js$swal(). And all that my JS function does is call the main useful function in the 3rd party library.

You can also do all this without shinyjs, by sending custom messages to javascript using the session object. shinyjs just makes that process simpler.


#5

@JidduAlexander Did you ever have success creating extendShinyjs function wrappers for the video.js and videojs frame_by_frame plugins? I am attempting to do the same thing and am struggling. Would love to see an example if you were able to successfully implement it.

Thanks.


#6

Hi @jw123,

I haven’t, back then I tried to solve some issues that I had with standard HTML 5 video player. In the end I was pretty sure that my issues wouldn’t be solved using video.js.

I’d actually be happy to have another crack at it together. Do you want to set up a basic example on github?