Blazor ASCII camera streaming
Demo from the Full-stack .NET with Blazor WebAssembly and Azure Static Web Apps session with Simona Cotin and Anthony Chu at .NET Conf 2021.
Based on Blazor Serverless StreamR that used SignalR, which was in turn ported from the Vue.js based Serverless StreamR app.
All of this was inspired by the original StreamR sample from the ASP.NET team.
Getting started
Create an Azure Web PubSub instance (free)
-
Go to the Azure portal and sign in.
-
Search for and create a free Azure Web PubSub instance.
-
Go to the Key's page in your new Azure Web PubSub instance and find the primary connection string. You'll need this later.
Run the app locally
-
Install prerequisites:
-
Install .NET 6 SDK - this allows you to build the Blazor WebAssembly app and the .NET 6 Azure Functions app.
-
Install Azure Functions Core Tools version 4 - this allows you to run the .NET 6 Azure Functions app. If you have npm:
npm install -g azure-functions-core-tools@4
-
Install 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)
npm install -g @azure/static-web-apps-cli
-
-
Fork this repo.
-
Clone your fork to your local machine.
git clone https://github.com/<YOUR_GITHUB_NAME>/swa-streamr-webpubsub.git cd swa-streamr-webpubsub
-
In the
Api
directory, copy thelocal.settings.sample.json
file tolocal.settings.json
. -
In
local.settings.json
, replace the value of theWebPubSubConnectionString
setting with the connection string from your Azure Web PubSub instance. -
In the root of the repo, run this command:
swa start http://localhost:5000 --run "dotnet watch run --project ./Client/Client.csproj" --api ./Api
This command does the following:
- Starts the Blazor app in
Client
(http://localhost:5000
lets the CLI know what port the Blazor dev server is listening on) - Starts the Azure Functions app in
Api
- Starts the Static Web Apps emulator at
http://localhost:4280
If you are using VS Code, the project also contains VS Code launch settings to automatically start and debug the app.
- Starts the Blazor app in
-
Open a browser and navigate to
http://localhost:4280
. You should see the Blazor WebAssembly app. It calls a function athttp://localhost:4280/api/connection
, this is automatically routed to the Azure Functions app. -
Click Login. A mock login screen will appear. Fill in a username you'd like to log in as and click Login.
-
You should now be logged in and have the option to start a stream. Open more browser windows to test streaming from multiple clients.
Run the app in Azure Static Web Apps
-
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.
rm -rf .github/workflows
-
Commit and push your changes to your fork.
git add . git commit -m "Remove workflow" git push
-
Go to the Azure Portal and search for "Static Web Apps" and click the "Create" button.
-
Fill out the necessary information, such as resource group, name, plan (choose Free), and location.
-
For source control, select "GitHub". Sign in to your GitHub account.
-
Use the dropdowns to find your fork and select it. Select the branch you want to deploy from (
main
). -
In the list of frameworks, select "Blazor".
-
Confirm that the following values are populated based on your selection:
- App location:
Client
- API location:
Api
- Output location:
wwwroot
- App location:
-
Create your static web app.
-
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.
-
Add an application setting called
WebPubSubConnectionString
and set its value to the connection string from your Azure Web PubSub instance. -
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.