{"id":17447263,"url":"https://github.com/eanders-ms/pxt-data-pipe","last_synced_at":"2025-03-28T03:41:57.840Z","repository":{"id":123946472,"uuid":"286590459","full_name":"eanders-ms/pxt-data-pipe","owner":"eanders-ms","description":"Chrome browser extension to enable streaming of webcam video to the MakeCode simulator.","archived":false,"fork":false,"pushed_at":"2020-09-08T21:42:18.000Z","size":682,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-02T04:45:02.666Z","etag":null,"topics":["arcade","makecode"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eanders-ms.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-08-10T22:24:19.000Z","updated_at":"2020-09-09T16:35:11.000Z","dependencies_parsed_at":null,"dependency_job_id":"346cf8ec-5c8a-4a05-aa9e-94609b148bce","html_url":"https://github.com/eanders-ms/pxt-data-pipe","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eanders-ms%2Fpxt-data-pipe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eanders-ms%2Fpxt-data-pipe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eanders-ms%2Fpxt-data-pipe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eanders-ms%2Fpxt-data-pipe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eanders-ms","download_url":"https://codeload.github.com/eanders-ms/pxt-data-pipe/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245966929,"owners_count":20701759,"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":["arcade","makecode"],"created_at":"2024-10-17T19:24:56.861Z","updated_at":"2025-03-28T03:41:57.820Z","avatar_url":"https://github.com/eanders-ms.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MakeCode Data Pipe\r\n\r\nChrome browser extension to enable streaming of video and data to MakeCode via the `libs/video` common package. To include this package in your Arcade project, add `\"video\": \"*\"` to `pxt.json`'s `dependencies` section.\r\n\r\n## Install pre-built extension\r\n\r\n1. Download athe latest `makecode-data-pipe.zip` from the releases page https://github.com/eanders-MS/pxt-data-pipe/releases.\r\n2. Unzip the downloaded extension to a suitable location.\r\n3. In Chrome, open the extension management page by navigating to `chrome://extensions`.\r\n4. Enable developer mode if necessary by clicking the toggle switch next to **Developer mode**.\r\n5. Uninstall the previous version, if it's installed.\r\n6. Click the **LOAD UNPACKED** button and select the folder where you unzipped the extension.\r\n\r\n## Build from source\r\n\r\n### System Prerequisites\r\n\r\n1. `NodeJS` \u0026 `NPM` installed (nodejs.org).\r\n2. `yarn`, installed globally: `npm install -g yarn`\r\n\r\n**IMPORTANT**: This repository uses `yarn` for dependency management. `npm` will not work! Running scripts with `npm` (e.g. `npm run build`) is safe (though `yarn` can do this too: `yarn build`).\r\n\r\n### Installing dependencies\r\n\r\nRun `yarn install` in the repo root to install dependencies for all projects.\r\n\r\n### Building the extension\r\n\r\nThe extension consists of multiple projects that get individually webpacked, but all are built in a single pass.\r\n\r\n* Option 1: To make a development build that watches for changes and rebuilds on-the-fly: Run `yarn watch` in `packages/browser-extension` folder.\r\n* Option 2: To make a production build: Run `yarn build` in `packages/browser-extension` folder.\r\n\r\n**Special note**: These projects depend on a shared library:\r\n* `packages/browser-extension/common`\r\n\r\nWhen running `yarn watch`, code changes in shared libraries ***are not automatically picked up* and must be manually rebuilt**. There are two ways to do this:\r\n        \r\n1. Stop and restart `yarn watch`.\r\n2. Run `yarn build` in the shared lib folder. Once this is done, the active `yarn watch` process will pick up the changes.\r\n\r\n### Installing local build in Chrome\r\n\r\n1. In Chrome, open the extension management page by navigating to `chrome://extensions`.\r\n2. Enable developer mode if necessary by clicking the toggle switch next to **Developer mode**.\r\n3. Click the **LOAD UNPACKED** button and select the `packages/browser-extension/dist` folder.\r\n\r\n**Note**: Whenever the extension is rebuilt, it must be reloaded in Chrome via the \"reload\" button.\r\n\r\n**Note**: Whenever the extension is reloaded, its connection to existing MakeCode tabs is broken. This is a feature/limitation of Chrome with no straightforward workaround. Refresh these pages to reconnect them to the extension.\r\n\r\n## Connecting to Arcade\r\n\r\nVerify the browser extension is loaded. If you don't need to develop in the extension, installing the pre-built version is much simpler than building from source.\r\n\r\n1. Follow the install steps above.\r\n2. In Chrome, look for the extension with the MakeCode icon.\r\n3. Click the icon. A window should appear enumerating your webcams.\r\n\r\nOn the Arcade side, video stream funtionality is in located in the `libs/video` package. This package isn't shipped with production Arcade. It exists in the `eanders/video-streams` branch of the different repos the comprise MakeCode, which are:\r\n* https://github.com/microsoft/pxt/ (master branch)\r\n* https://github.com/microsoft/pxt-common-packages (eanders/video-streams branch)\r\n* https://github.com/microsoft/pxt-arcade (eanders/video-streams branch)\r\n* https://github.com/microsoft/pxt-arcade-sim (eanders/video-streams branch)\r\n\r\n1. Sync these branches and symlink all the folders.\r\n    1. In `pxt-common-packages/`:\r\n        * `$\u003e npm link ../pxt`\r\n\r\n    2. In `pxt-arcade-sim/`:\r\n        * `$\u003e npm link ../pxt`\r\n        * `$\u003e npm link ../pxt-common-packages`\r\n\r\n    3. In `pxt-arcade/`:\r\n        * `$\u003e npm link ../pxt`\r\n        * `$\u003e npm link ../pxt-common-packages`\r\n        * `$\u003e npm link ../pxt-arcade-sim`\r\n\r\n\r\n2. In `pxt/`: run\r\n    * `$\u003e gulp watch`\r\n\r\n3. In `pxt-arcade/`: run\r\n    * `$\u003e pxt serve --rebundle`\r\n\r\n4. Wait for Arcade to open in the browser.\r\n\r\n5. Start a new project and add the `video` package to `pxt.json`'s dependencies. A new \"Video\" toolbox category should appear.\r\n\r\n6. Write some code that uses the video blocks. Something like this is a good quick test:\r\n\r\n    ```ts\r\n    let frame: Image = null\r\n    forever(function () {\r\n        frame = video.getCurrentFrame(0)\r\n        video.setPaletteFromStream(0)\r\n        scene.setBackgroundImage(frame)\r\n    })\r\n    ```\r\n\r\n7. Open the extension UI, if not already open. Your MakeCode tab should be listed. If not there, refresh the MakeCode page.\r\n\r\n8. Start a camera.\r\n\r\n9. Enable that camera for your MakeCode tab. You should see the video feed in the Arcade simulator.\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feanders-ms%2Fpxt-data-pipe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feanders-ms%2Fpxt-data-pipe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feanders-ms%2Fpxt-data-pipe/lists"}