Simple Demo of Green Screen Principle in a Jupyter Notebook Using MyBinder

One of my favourite bits of edtech  in the form of open educational technology infrastucture at the moment is mybinder (code), which allows you to fire up a semi-customised Docker container and run Jupyter notebooks based on the contents of a github repository. This makes is trivial to share interactive, Jupyter notebook demos, as long as you’re happy to make your notebooks public and pop them into github.

As an example, here’s a simple notebook I knocked up yesterday to demonstrate how we could created a composited image from a foreground image captured against a green screen, and a background image we wanted to place behind our foregrounded character.

The recipe was based on one I found in a Bryn Mawr College demo (Bryn Mawr is one of the places I look to for interesting ways of using Jupyter notebooks in an educational context.)

The demo works by looking at each pixel in turn in the foreground (greenscreened) image and checking its RGB colour value. If it looks to be green, use the corresponding pixel from the background image in the composited image; if it’s not green, use the colour values of the pixel in the foreground image.

The trick comes in setting appropriate threshold values to detect the green coloured background. Using Jupyter notebooks and ipywidgets, it’s easy enough to create a demo that lets you try out different “green detection” settings using sliders to select RGB colour ranges. And using mybinder, it’s trivial to share a copy of the working notebook – fire up a container and look for the Green screen.ipynb notebook: demo notebooks on mybinder.

green_screen_-_tm112

(You can find the actual notebook code on github here.)

I was going to say that one of the things I don’t think you can do at the moment is share a link to an actual notebook, but in that respect I’d be wrong… The reason I thought was that to launch a mybinder instance, eg from the psychemedia/ou-tm11n github repo, you’d use a URL of the form http://mybinder.org/repo/psychemedia/ou-tm11n; this then launches a container instance at a dynamically created location – eg http://SOME_IP_ADDRESS/user/SOME_CONTAINER_ID – with a URL and container ID that you don’t know in advance.

The notebook contents of the repo are copied into a notebooks folder in the container when the container image is built from the repo, and accessed down that path on the container URL, such as http://SOME_IP_ADDRESS/user/SOME_CONTAINER_ID/notebooks/Green%20screen%20-%20tm112.ipynb.

However, on checking, it seems that any path added to the mybinder call is passed along and appended to the URL of the dynamically created container.

Which means you can add the path to a notebook in the repo to the notebooks/ path when you call mybinder – http://mybinder.org/repo/psychemedia/ou-tm11n/notebooks/Green%20screen%20-%20tm112.ipynb – and the path will will passed through to the launched container.

In other words, you can share a link to a live notebook running on dynamically created container – such as this one – by calling mybinder with the local path to the notebook.

You can also go back up to the Jupyter notebook homepage from a notebook page by going up a level in the URL to the notebooks folder, eg http://mybinder.org/repo/psychemedia/ou-tm11n/notebooks/ .

I like mybinder a bit more each day:-)

5 comments

  1. dsblank

    Very nice use of the sliders with the green screen! I’m going to steal this. And thank you for the kind words.

    • Tony Hirst

      @Doug Thanks really should be to you, where I pinched the demo from:-) I absolutely love the way you’ve embraced the notebooks. Do you find students taking ownership of them and using them for other purposes/courses?

      • dsblank

        Yes, and no. Some students continue to use our jupyterhub server for lots of other things after a course is over. But for many students, it may not be clear how they can move away from the hub, but still use jupyter. I don’t spend any time in class talking about externally setting up nor understanding the ecosystem. But my colleagues from STEM and Humanities are very interested in the notebook for its narrative form. You’ll be hearing from us soon on that front…

        • Tony Hirst

          @doug Re: STEM and humanities applications – I look forward to that:-)

          Re: students not necessarily continuing with a tool, technique or technology after a course, I think it’s way too easy for students to associate things they learned with a course and an assessment, rather than as something they can repurpose and use elsewhere:-( That said, it’s encouraging that some of your students do continue use the Jupyterhub for other purposes. (I noticed a few of our third level students recently mention they’d keep using the VM we shipped for a recent data management and analysis course for some of their other courses and projects, which was encouraging.)

          Generally, I think that the environment, and appropriate high level libraries and recipes, can lower barriers to entry for line-at-a-time bit of code that get stuff done on appropriate representations. But the practicality of getting an environment up and running is still an issue. (This is one reason I like mybinder; I’m also still hopeful of things like Docker/Kitematic.)

          I also see opportunities for academics willing to learn how to use certain high level libraries as a way of producing formatted texts and texts that include graphics, interactives etc.

          For example, in computing, teaching text can suffer in the edit if a line of code and the output of executing the line of code are cut and pasted into a Word doc, and then at some point an edit is made in the Word do to the code. Generating teaching materials “from source code” is far cleaner. Similarly creating texts that includes charts or diagrams based on some formula or other (sympy is interesting in this respect), working with musical representations and notations (eg https://blog.ouseful.info/2016/09/13/making-music-and-embedding-sounds-in-jupyter-notebooks/ ) etc.

  2. Pingback: Mediating the Background and the Foreground – From Green Screen and Chroma-Key Effects to Virtual Sets | Digital Worlds - Interactive Media and Game Design