10 | About
11 |
12 |
13 |
14 | @Body
15 |
16 | Fun Blazor Web Camera Application
5 |
6 |
7 |
8 |
9 |
13 |
17 |
18 | @code{
19 | WebCamOptions options = new WebCamOptions()
20 | {
21 | CanvasID = "canvas",
22 | VideoID = "video"
23 | };
24 |
25 | protected override void OnInitialized()
26 | {
27 | options.Width = 480;
28 | }
29 |
30 | public async Task Start()
31 | {
32 | await JSRuntime.InvokeVoidAsync("WebCamFunctions.start", options);
33 | }
34 | }
--------------------------------------------------------------------------------
/Pages/Error.cshtml.cs:
--------------------------------------------------------------------------------
1 | using System;
2 | using System.Collections.Generic;
3 | using System.Diagnostics;
4 | using System.Linq;
5 | using System.Threading.Tasks;
6 | using Microsoft.AspNetCore.Mvc;
7 | using Microsoft.AspNetCore.Mvc.RazorPages;
8 | using Microsoft.Extensions.Logging;
9 |
10 | namespace BlazorCam.Pages
11 | {
12 | [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
13 | [IgnoreAntiforgeryToken]
14 | public class ErrorModel : PageModel
15 | {
16 | public string RequestId { get; set; }
17 |
18 | public bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
19 |
20 | private readonly ILogger
9 |
21 |
22 |
23 | @code {
24 | private bool collapseNavMenu = true;
25 |
26 | private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;
27 |
28 | private void ToggleNavMenu()
29 | {
30 | collapseNavMenu = !collapseNavMenu;
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/blazorcam.sln:
--------------------------------------------------------------------------------
1 | Microsoft Visual Studio Solution File, Format Version 12.00
2 | # Visual Studio Version 17
3 | VisualStudioVersion = 17.5.2.0
4 | MinimumVisualStudioVersion = 10.0.40219.1
5 | Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BlazorCam", "BlazorCam.csproj", "{E972E23A-A6F8-5AF0-84DD-E62F3A9AAC3A}"
6 | EndProject
7 | Global
8 | GlobalSection(SolutionConfigurationPlatforms) = preSolution
9 | Debug|Any CPU = Debug|Any CPU
10 | Release|Any CPU = Release|Any CPU
11 | EndGlobalSection
12 | GlobalSection(ProjectConfigurationPlatforms) = postSolution
13 | {E972E23A-A6F8-5AF0-84DD-E62F3A9AAC3A}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
14 | {E972E23A-A6F8-5AF0-84DD-E62F3A9AAC3A}.Debug|Any CPU.Build.0 = Debug|Any CPU
15 | {E972E23A-A6F8-5AF0-84DD-E62F3A9AAC3A}.Release|Any CPU.ActiveCfg = Release|Any CPU
16 | {E972E23A-A6F8-5AF0-84DD-E62F3A9AAC3A}.Release|Any CPU.Build.0 = Release|Any CPU
17 | EndGlobalSection
18 | GlobalSection(SolutionProperties) = preSolution
19 | HideSolutionNode = FALSE
20 | EndGlobalSection
21 | GlobalSection(ExtensibilityGlobals) = postSolution
22 | SolutionGuid = {70D178E9-05C6-4106-AB96-C8D0C4C42DA6}
23 | EndGlobalSection
24 | EndGlobal
25 |
--------------------------------------------------------------------------------
/wwwroot/css/open-iconic/ICON-LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2014 Waybury
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
--------------------------------------------------------------------------------
/Shared/NavMenu.razor.css:
--------------------------------------------------------------------------------
1 | .navbar-toggler {
2 | background-color: rgba(255, 255, 255, 0.1);
3 | }
4 |
5 | .top-row {
6 | height: 3.5rem;
7 | background-color: rgba(0,0,0,0.4);
8 | }
9 |
10 | .navbar-brand {
11 | font-size: 1.1rem;
12 | }
13 |
14 | .oi {
15 | width: 2rem;
16 | font-size: 1.1rem;
17 | vertical-align: text-top;
18 | top: -2px;
19 | }
20 |
21 | .nav-item {
22 | font-size: 0.9rem;
23 | padding-bottom: 0.5rem;
24 | }
25 |
26 | .nav-item:first-of-type {
27 | padding-top: 1rem;
28 | }
29 |
30 | .nav-item:last-of-type {
31 | padding-bottom: 1rem;
32 | }
33 |
34 | .nav-item ::deep a {
35 | color: #d7d7d7;
36 | border-radius: 4px;
37 | height: 3rem;
38 | display: flex;
39 | align-items: center;
40 | line-height: 3rem;
41 | }
42 |
43 | .nav-item ::deep a.active {
44 | background-color: rgba(255,255,255,0.25);
45 | color: white;
46 | }
47 |
48 | .nav-item ::deep a:hover {
49 | background-color: rgba(255,255,255,0.1);
50 | color: white;
51 | }
52 |
53 | @media (min-width: 641px) {
54 | .navbar-toggler {
55 | display: none;
56 | }
57 |
58 | .collapse {
59 | /* Never collapse the sidebar for wide screens */
60 | display: block;
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/Pages/_Host.cshtml:
--------------------------------------------------------------------------------
1 | @page "/"
2 | @namespace BlazorCam.Pages
3 | @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
4 | @{
5 | Layout = null;
6 | }
7 |
8 |
9 |
10 |
11 |
12 |
13 |
23 |
24 | An error has occurred. This application may no longer respond until reloaded.
25 |
26 |
27 | An unhandled exception has occurred. See browser dev tools for details.
28 |
29 | Reload
30 | 🗙
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
--------------------------------------------------------------------------------
/Shared/MainLayout.razor.css:
--------------------------------------------------------------------------------
1 | .page {
2 | position: relative;
3 | display: flex;
4 | flex-direction: column;
5 | }
6 |
7 | .main {
8 | flex: 1;
9 | }
10 |
11 | .sidebar {
12 | background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
13 | }
14 |
15 | .top-row {
16 | background-color: #f7f7f7;
17 | border-bottom: 1px solid #d6d5d5;
18 | justify-content: flex-end;
19 | height: 3.5rem;
20 | display: flex;
21 | align-items: center;
22 | }
23 |
24 | .top-row ::deep a, .top-row .btn-link {
25 | white-space: nowrap;
26 | margin-left: 1.5rem;
27 | }
28 |
29 | .top-row a:first-child {
30 | overflow: hidden;
31 | text-overflow: ellipsis;
32 | }
33 |
34 | @media (max-width: 640.98px) {
35 | .top-row:not(.auth) {
36 | display: none;
37 | }
38 |
39 | .top-row.auth {
40 | justify-content: space-between;
41 | }
42 |
43 | .top-row a, .top-row .btn-link {
44 | margin-left: 0;
45 | }
46 | }
47 |
48 | @media (min-width: 641px) {
49 | .page {
50 | flex-direction: row;
51 | }
52 |
53 | .sidebar {
54 | width: 250px;
55 | height: 100vh;
56 | position: sticky;
57 | top: 0;
58 | }
59 |
60 | .top-row {
61 | position: sticky;
62 | top: 0;
63 | z-index: 1;
64 | }
65 |
66 | .main > div {
67 | padding-left: 2rem !important;
68 | padding-right: 1.5rem !important;
69 | }
70 | }
71 |
--------------------------------------------------------------------------------
/Pages/Error.cshtml:
--------------------------------------------------------------------------------
1 | @page
2 | @model BlazorCam.Pages.ErrorModel
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
17 |
40 |
41 |
42 |
43 |
--------------------------------------------------------------------------------
/Startup.cs:
--------------------------------------------------------------------------------
1 | using System;
2 | using System.Collections.Generic;
3 | using System.Linq;
4 | using System.Threading.Tasks;
5 | using Microsoft.AspNetCore.Builder;
6 | using Microsoft.AspNetCore.Components;
7 | using Microsoft.AspNetCore.Hosting;
8 | using Microsoft.AspNetCore.HttpsPolicy;
9 | using Microsoft.Extensions.Configuration;
10 | using Microsoft.Extensions.DependencyInjection;
11 | using Microsoft.Extensions.Hosting;
12 | using BlazorCam.Services;
13 |
14 | namespace BlazorCam
15 | {
16 | public class Startup
17 | {
18 | public Startup(IConfiguration configuration)
19 | {
20 | Configuration = configuration;
21 | }
22 |
23 | public IConfiguration Configuration { get; }
24 |
25 | // This method gets called by the runtime. Use this method to add services to the container.
26 | // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
27 | public void ConfigureServices(IServiceCollection services)
28 | {
29 | services.AddSignalR();
30 | services.AddRazorPages();
31 | services.AddServerSideBlazor();
32 | }
33 |
34 | // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
35 | public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
36 | {
37 | if (env.IsDevelopment())
38 | {
39 | app.UseDeveloperExceptionPage();
40 | }
41 | else
42 | {
43 | app.UseExceptionHandler("/Error");
44 | // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
45 | app.UseHsts();
46 | }
47 |
48 | app.UseHttpsRedirection();
49 | app.UseStaticFiles();
50 |
51 | app.UseRouting();
52 |
53 | app.UseEndpoints(endpoints =>
54 | {
55 | endpoints.MapBlazorHub();
56 | endpoints.MapHub
18 |
39 | Error.
19 |An error occurred while processing your request.
20 | 21 | @if (Model.ShowRequestId) 22 | { 23 |
24 | Request ID: @Model.RequestId
25 |
Development Mode
29 |30 | Swapping to the Development environment displays detailed information about the error that occurred. 31 |
32 |33 | The Development environment shouldn't be enabled for deployed applications. 34 | It can result in displaying sensitive information from exceptions to end users. 35 | For local debugging, enable the Development environment by setting the ASPNETCORE_ENVIRONMENT environment variable to Development 36 | and restarting the app. 37 |
38 |
30 | ```
31 |
32 | #### Using Open Iconic's SVG Sprite
33 |
34 | Open Iconic also comes in a SVG sprite which allows you to display all the icons in the set with a single request. It's like an icon font, without being a hack.
35 |
36 | Adding an icon from an SVG sprite is a little different than what you're used to, but it's still a piece of cake. *Tip: To make your icons easily style able, we suggest adding a general class to the* `