{"id":17114420,"url":"https://github.com/anthonychu/swa-streamr-webpubsub","last_synced_at":"2025-04-09T21:45:31.005Z","repository":{"id":68672832,"uuid":"419044511","full_name":"anthonychu/swa-streamr-webpubsub","owner":"anthonychu","description":null,"archived":false,"fork":false,"pushed_at":"2021-11-13T00:05:49.000Z","size":679,"stargazers_count":8,"open_issues_count":0,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-23T23:33:29.125Z","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/anthonychu.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-10-19T18:22:46.000Z","updated_at":"2023-01-04T00:45:16.000Z","dependencies_parsed_at":"2023-09-13T22:31:35.928Z","dependency_job_id":null,"html_url":"https://github.com/anthonychu/swa-streamr-webpubsub","commit_stats":{"total_commits":52,"total_committers":2,"mean_commits":26.0,"dds":"0.019230769230769273","last_synced_commit":"2c61e40478f1d84ce0048086996e18ccc660e6f5"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anthonychu%2Fswa-streamr-webpubsub","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anthonychu%2Fswa-streamr-webpubsub/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anthonychu%2Fswa-streamr-webpubsub/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anthonychu%2Fswa-streamr-webpubsub/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anthonychu","download_url":"https://codeload.github.com/anthonychu/swa-streamr-webpubsub/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248119439,"owners_count":21050754,"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-10-14T17:17:05.680Z","updated_at":"2025-04-09T21:45:30.983Z","avatar_url":"https://github.com/anthonychu.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Blazor ASCII camera streaming\n\nDemo from the [Full-stack .NET with Blazor WebAssembly and Azure Static Web Apps](https://youtu.be/RZhEScjKVHE) session with [Simona Cotin](https://github.com/simonaco) and [Anthony Chu](https://github.com/anthonychu) at .NET Conf 2021.\n\n![screenshot](screenshot.jpg)\n\nBased on [Blazor Serverless StreamR](https://github.com/anthonychu/serverless-streamr-blazor) that used SignalR, which was in turn ported from the Vue.js based [Serverless StreamR](https://github.com/anthonychu/serverless-streamr) app.\n\nAll of this was inspired by the original [StreamR sample](https://github.com/SignalR/sample-StreamR) from the ASP.NET team.\n\n## Getting started\n\n### Create an Azure Web PubSub instance (free)\n\n1. Go to the [Azure portal](https://portal.azure.com) and sign in.\n\n1. Search for and create a free Azure Web PubSub instance.\n\n1. Go to the Key's page in your new Azure Web PubSub instance and find the primary connection string. You'll need this later.\n\n### Run the app locally\n\n1. Install prerequisites:\n\n    - Install [.NET 6 SDK](https://dotnet.microsoft.com/download/dotnet/6.0) - this allows you to build the Blazor WebAssembly app and the .NET 6 Azure Functions app.\n\n    - Install [Azure Functions Core Tools version 4](https://docs.microsoft.com/azure/azure-functions/functions-run-local?tabs=v4%2Cwindows%2Ccsharp%2Cportal%2Cbash%2Ckeda#install-the-azure-functions-core-tools) - this allows you to run the .NET 6 Azure Functions app. If you have npm:\n        ```bash\n        npm install -g azure-functions-core-tools@4\n        ```\n\n    - Install [Azure Static Web Apps CLI](https://www.npmjs.com/package/@azure/static-web-apps-cli) - this allows you to run your Blazor app and Azure Functions app together locally, and provides Static Web Apps capabilities such as authentication. (requires npm)\n        ```bash\n        npm install -g @azure/static-web-apps-cli\n        ```\n\n1. Fork this repo.\n\n1. Clone your fork to your local machine.\n\n    ```bash\n    git clone https://github.com/\u003cYOUR_GITHUB_NAME\u003e/swa-streamr-webpubsub.git\n    cd swa-streamr-webpubsub\n    ```\n\n1. In the `Api` directory, copy the `local.settings.sample.json` file to `local.settings.json`.\n\n1. In `local.settings.json`, replace the value of the `WebPubSubConnectionString` setting with the connection string from your Azure Web PubSub instance.\n\n1. In the root of the repo, run this command:\n    ```bash\n    swa start http://localhost:5000 --run \"dotnet watch run --project ./Client/Client.csproj\" --api ./Api\n    ```\n\n    This command does the following:\n    - Starts the Blazor app in `Client` (`http://localhost:5000` lets the CLI know what port the Blazor dev server is listening on)\n    - Starts the Azure Functions app in `Api`\n    - Starts the Static Web Apps emulator at `http://localhost:4280`\n\n    \u003e If you are using VS Code, the project also contains VS Code launch settings to automatically start and debug the app.\n\n1. Open a browser and navigate to `http://localhost:4280`. You should see the Blazor WebAssembly app. It calls a function at `http://localhost:4280/api/connection`, this is automatically routed to the Azure Functions app.\n\n1. Click Login. A mock login screen will appear. Fill in a username you'd like to log in as and click Login.\n\n1. You should now be logged in and have the option to start a stream. Open more browser windows to test streaming from multiple clients.\n\n### Run the app in Azure Static Web Apps\n\n1. The repo you cloned already contains a GitHub Actions workflow. This deploys to my Azure Static Web Apps instance, so it's not very useful for you. Delete it.\n    ```bash\n    rm -rf .github/workflows\n    ```\n\n1. Commit and push your changes to your fork.\n    ```bash\n    git add .\n    git commit -m \"Remove workflow\"\n    git push\n    ```\n\n1. Go to the [Azure Portal](https://portal.azure.com) and search for \"Static Web Apps\" and click the \"Create\" button.\n\n1. Fill out the necessary information, such as resource group, name, plan (choose Free), and location.\n\n1. For source control, select \"GitHub\". Sign in to your GitHub account.\n\n1. Use the dropdowns to find your fork and select it. Select the branch you want to deploy from (`main`).\n\n1. In the list of frameworks, select \"Blazor\".\n\n1. Confirm that the following values are populated based on your selection:\n    - App location: `Client`\n    - API location: `Api`\n    - Output location: `wwwroot`\n\n1. Create your static web app.\n\n1. Once your app is created, you need to configure the Azure Web PubSub connection string. Navigate to the *Configuration* page of your static web app.\n\n1. Add an application setting called `WebPubSubConnectionString` and set its value to the connection string from your Azure Web PubSub instance.\n\n1. Check the GitHub Actions in your repo to see when your app is finished deploying. When it's done, navigate to your app's URL and you should see the Blazor WebAssembly app.\n\n## Third party libraries\n\n- [camera.js](https://github.com/idevelop/camera.js/) ([License](https://github.com/idevelop/camera.js/blob/master/LICENSE))\n- [ascii-camera](https://github.com/idevelop/ascii-camera/) ([License](https://github.com/idevelop/ascii-camera/blob/master/LICENSE))\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanthonychu%2Fswa-streamr-webpubsub","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanthonychu%2Fswa-streamr-webpubsub","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanthonychu%2Fswa-streamr-webpubsub/lists"}