実現したいこと
Blazor Web App(Server and WebAssembly)でアプリをdockerコンテナにデプロイし、
クライアント(iPadなど)で写真を撮影したデータを取得したいです。
発生している問題・分からないこと
実行環境(http)ではPCのカメラが映っているのですが、
dockerコンテナ上で実行をするとカメラが取得できず困っています。
なにかdocker側の設定が必要でしょうか
よろしくお願いいたします。
該当のソースコード
Counter.razor
1@page "/counter" 2@rendermode InteractiveAuto 3@inject IJSRuntime JS 4 5<PageTitle>Counter</PageTitle> 6 7<head> 8 <script> 9 function startVideo(src) { 10 if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { 11 navigator.mediaDevices.getUserMedia({ video: true }).then(function (stream) { 12 let video = document.getElementById(src); 13 if ("srcObject" in video) { 14 video.srcObject = stream; 15 } else { 16 video.src = window.URL.createObjectURL(stream); 17 } 18 video.onloadedmetadata = function (e) { 19 video.play(); 20 }; 21 //mirror image 22 video.style.webkitTransform = "scaleX(-1)"; 23 video.style.transform = "scaleX(-1)"; 24 }); 25 } 26 } 27 </script> 28</head> 29 30<h1>Counter</h1> 31 32<p role="status">Current count: @currentCount</p> 33 34<video id="videoFeed" width="320" height="240" /> 35<canvas class="d-none" id="currentFrame" width="320" height="240" /> 36<br /> 37 38<button class="btn btn-primary" @onclick="IncrementCount">Click me</button> 39 40@code { 41 private int currentCount = 0; 42 43 protected override async void OnAfterRender(bool firstRender) 44 { 45 if (firstRender) 46 { 47 await JS.InvokeVoidAsync("startVideo", "videoFeed"); 48 } 49 50 base.OnAfterRender(firstRender); 51 } 52 53 private void IncrementCount() 54 { 55 currentCount++; 56 } 57}
Dockerfile
1#See https://aka.ms/customizecontainer to learn how to customize your debug container and how Visual Studio uses this Dockerfile to build your images for faster debugging. 2 3FROM mcr.microsoft.com/dotnet/aspnet:8.0 AS base 4USER app 5WORKDIR /app 6EXPOSE 8080 7 8FROM mcr.microsoft.com/dotnet/sdk:8.0 AS build 9ARG BUILD_CONFIGURATION=Release 10WORKDIR /src 11COPY ["BlazorApp6/BlazorApp6/BlazorApp6.csproj", "BlazorApp6/BlazorApp6/"] 12COPY ["BlazorApp6/BlazorApp6.Client/BlazorApp6.Client.csproj", "BlazorApp6/BlazorApp6.Client/"] 13RUN dotnet restore "./BlazorApp6/BlazorApp6/./BlazorApp6.csproj" 14COPY . . 15WORKDIR "/src/BlazorApp6/BlazorApp6" 16RUN dotnet build "./BlazorApp6.csproj" -c $BUILD_CONFIGURATION -o /app/build 17 18FROM build AS publish 19ARG BUILD_CONFIGURATION=Release 20RUN dotnet publish "./BlazorApp6.csproj" -c $BUILD_CONFIGURATION -o /app/publish /p:UseAppHost=false 21FROM base AS final 22WORKDIR /app 23COPY --from=publish /app/publish . 24ENTRYPOINT ["dotnet", "BlazorApp6.dll"]
試したこと・調べたこと
上記の詳細・結果
BlazorCameraStreamerなどのライブラリを使用してみましたが、
同様に使用できませんでした。
補足
開発環境：
Windows10
VisualStudio 2022
Blazor Web App
FrameWork : .NET 8.0
Interactive render mode : Auto (Server and WebAssembly)
Interactivity location : Per page/component
0 コメント