{"id":21823803,"url":"https://github.com/onel/live-editor-recording-demo","last_synced_at":"2026-01-04T09:09:21.668Z","repository":{"id":33606104,"uuid":"37258276","full_name":"onel/live-editor-recording-demo","owner":"onel","description":null,"archived":false,"fork":false,"pushed_at":"2016-02-20T16:46:33.000Z","size":7,"stargazers_count":2,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-26T08:11:43.136Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/onel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-06-11T11:55:23.000Z","updated_at":"2024-04-18T13:44:15.000Z","dependencies_parsed_at":"2022-07-25T01:47:50.292Z","dependency_job_id":null,"html_url":"https://github.com/onel/live-editor-recording-demo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onel%2Flive-editor-recording-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onel%2Flive-editor-recording-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onel%2Flive-editor-recording-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onel%2Flive-editor-recording-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/onel","download_url":"https://codeload.github.com/onel/live-editor-recording-demo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244794895,"owners_count":20511516,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-27T17:37:59.907Z","updated_at":"2026-01-04T09:09:21.640Z","avatar_url":"https://github.com/onel.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# Live Code Editor Recording Demo\n\nThis is a demo for the [Khan Academy CS](https://www.khanacademy.org/computer-programming/) live code editor. If you want to read more about it, head over to the project's [github page](https://github.com/Khan/live-editor/).\nThe demo uses a local app engine server to save the recordings, translodit for encoding it to mp3, and S3 for storing the audio files.\n\n#### Prerequisites\n* google app engine python SDK\n* free transloadit.com account (they have a limit of 1GB per free account)\n* AWS S3 bucket\n\n#### Setup\n1. download the python [app engine sdk](https://cloud.google.com/appengine/downloads)\n2. clone this repo\n3. create a free account with [transloadit.com](https://www.transloadit.com)\n4. in your account, create a new template which should look like this:\n```json\n{\n    \"steps\": {\n        \"mp3\": {\n          \"use\": \":original\",\n          \"robot\": \"/audio/encode\"\n        },\n        \"export\": {\n          \"use\": \"mp3\",\n          \"robot\": \"/s3/store\",\n          \"key\": \"S3_KEY\",\n          \"secret\": \"S3_SECRET\",\n          \"bucket\": \"S3_bucket_name\"\n        }\n    }\n}\n```\n5. in `views/index.html` at lines 107 - 108 add the keys from your transloadit.com account:\n    * `transloaditAuthKey`: found [here](https://transloadit.com/accounts/credentials), named Your Auth Key\n    * `transloaditTemplate`: found [here](https://transloadit.com/templates)\n6. cd into the project's folder, and run\n```\ngcloud preview app run ./app.yaml\n```\n7. go to [localhost:8080](http://localhost:8080)\n8. hit **Record**\n9. 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** \n\nThe final recording should be more than 15 seconds, it errors out when the audio file is too small.\n\n### How it works\n\nFor a deep dive into the components of the LiveEditor, [read this wiki](https://github.com/Khan/live-editor/wiki/How-the-live-editor-works).\nYou can also watch these talks that the team has given about the editor:\n* [John Resig on CodeGenius](https://www.youtube.com/watch?v=H4sSldXv_S4)\n* [Pamela Fox at ReactConf](https://youtu.be/EzHsLt9vLbk?t=26m49s)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fonel%2Flive-editor-recording-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fonel%2Flive-editor-recording-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fonel%2Flive-editor-recording-demo/lists"}