Blazor Web App + dockerコンテナでカメラ撮影

実現したいこと

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"]

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

BlazorCameraStreamerなどのライブラリを使用してみましたが、
同様に使用できませんでした。

補足

開発環境：
Windows10
VisualStudio 2022
Blazor Web App
FrameWork : .NET 8.0
Interactive render mode : Auto (Server and WebAssembly)
Interactivity location : Per page/component

juner

2024/03/28 04:31 編集

カメラの取得は安全なコンテキストである必要があるのですが、その環境は安全なコンテキストでしょうか？具体的には globalThis.isSecureContext は true を返しますでしょうか？（例外的に localhost は http でも安全なコンテキストに含まれたりしますが外からアクセスするのであれば安全なコンテキストを満たすために https の必要があります https://developer.mozilla.org/ja/docs/Web/Security/Secure_Contexts https://developer.mozilla.org/ja/docs/Web/API/MediaDevices/getUserMedia

dn315

2024/03/29 00:10

ありがとうございます。 httpでやっておりました。数日間悩んでました。目から鱗です。

dn315

2024/04/04 04:39

コメントありがとうございます。証明書を取得し、httpsで試したところ上手くいきました。ベストアンサーに選びたいので同じ内容を回答欄に投稿いただけますでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

カメラの取得は安全なコンテキストである必要があるのですが、その環境は安全なコンテキストでしょうか？
具体的には globalThis.isSecureContext は true を返しますでしょうか？
（例外的に localhost は http でも 安全なコンテキスト に含まれたりしますが外からアクセスするのであれば安全なコンテキストを満たすために https の必要があります

https://developer.mozilla.org/ja/docs/Web/Security/Secure_Contexts

https://developer.mozilla.org/ja/docs/Web/API/MediaDevices/getUserMedia

投稿2024/04/05 00:01

juner

総合スコア128