/live-editor-recording-demo

Primary LanguageHTMLMIT LicenseMIT

Live Code Editor Recording Demo

This is a demo for the Khan Academy CS live code editor. If you want to read more about it, head over to the project's github page. The demo uses a local app engine server to save the recordings, translodit for encoding it to mp3, and S3 for storing the audio files.

Prerequisites

  • google app engine python SDK
  • free transloadit.com account (they have a limit of 1GB per free account)
  • AWS S3 bucket

Setup

  1. download the python app engine sdk
  2. clone this repo
  3. create a free account with transloadit.com
  4. in your account, create a new template which should look like this:
{
    "steps": {
        "mp3": {
          "use": ":original",
          "robot": "/audio/encode"
        },
        "export": {
          "use": "mp3",
          "robot": "/s3/store",
          "key": "S3_KEY",
          "secret": "S3_SECRET",
          "bucket": "S3_bucket_name"
        }
    }
}
  1. in views/index.html at lines 107 - 108 add the keys from your transloadit.com account:
    • transloaditAuthKey: found here, named Your Auth Key
    • transloaditTemplate: found here
  2. cd into the project's folder, and run
gcloud preview app run ./app.yaml
  1. go to localhost:8080
  2. hit Record
  3. the app allows you to record in chunks, for each chunk press Start new chunk, Stop recording chunk, Save recording chunk, and finally Save Recording

The final recording should be more than 15 seconds, it errors out when the audio file is too small.

How it works

For a deep dive into the components of the LiveEditor, read this wiki. You can also watch these talks that the team has given about the editor: