質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.39%
blazor

Blazorは、マイクロソフトが開発している.NETベースのWebアプリフレームワークです。C#でフロントエンドもバックエンドも一貫して書くことが可能。クライアントサイド(WebAssembly)とサーバーサイド形式のホスティングモデルがあります。

C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

Q&A

解決済

1回答

268閲覧

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

dn315

総合スコア201

blazor

Blazorは、マイクロソフトが開発している.NETベースのWebアプリフレームワークです。C#でフロントエンドもバックエンドも一貫して書くことが可能。クライアントサイド(WebAssembly)とサーバーサイド形式のホスティングモデルがあります。

C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

1グッド

0クリップ

投稿2024/03/27 05:06

実現したいこと

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👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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で試したところ上手くいきました。 ベストアンサーに選びたいので同じ内容を回答欄に投稿いただけますでしょうか?
guest

回答1

0

ベストアンサー

カメラの取得は安全なコンテキストである必要があるのですが、その環境は安全なコンテキストでしょうか?
具体的には globalThis.isSecureContexttrue を返しますでしょうか?
(例外的に localhosthttp でも 安全なコンテキスト に含まれたりしますが外からアクセスするのであれば安全なコンテキストを満たすために 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

総合スコア252

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.39%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問