Webシステム上でのWebカメラによるストリーミングデータの画像変換→画像ファイルとしてのNAS上での保存について

Question

前提・実現したいこと

Webシステムでの質問です。
1.Webカメラ、USBカメラのストリーミング画像をvideoタグに表示
2.ボタンを押したタイミングでcanvasタグ上のエリアに画像データを表示
3.2のタイミング(ボタンを押したタイミング）でcanvas上のデータと同じ画像をネットワーク内に繋がれたNASなどのフォルダにバックグラウンドで保存という事を実現したいと思っております。

このうち１，２はJavascript対応で実現でき、現在3を取り掛かっているところなのですがよい
方法が見つかりません。

１つ実現できそうなのはcanvas画像ファイルをBase64にエンコードし、そのデータをPostなどで送信してそれをサーバーで受け取りデータベースに保存というのを考えました。
しかしデータベースに画像ファイルのデータを保存するというのは賛否両論あるようで保留としています。（この案の場合、データベースの該当のBase64のデータを別のシステムで取り出し、画像ファイルに変換後、データベース上のデータを削除、目的のNASへのデータ保存を行なおうと思っています。）

今回の３を実現するにあたり何か良い方針がありましたらアドバイスを頂けますと非常に助かります。

Answer 1

1や2について、環境もフレームワークも何も開示せずいきなり質問されているため全くの推測になりますが、

WebRTCを使われているという前提で、WebRTCのエコシステムでの録画機能として
mediastream-recordingがあるようなので
これを使用されてはいかがでしょうか、

Comments

[k2etemjin]

ご回答ありがとうございます。

情報が足らず失礼いたしました。実はOutsystemsという開発環境下になり過去もそれほどこちらでも情報がない為、言語問わずWebシステム開発ではどうされるのかも知りたく投稿させていただきました。

現在実現しているJavascriptの１，２の実装の抜粋は以下です。

■1.Webカメラ、USBカメラのストリーミング画像をvideoタグに表示
var video = document.getElementById("xx-id");
var media = navigator.mediaDevices.getUserMedia({
video: true,
audio: false,
});

media.then(function(stream){
video.srcObject = stream;
});

■2.ボタンを押したタイミングでcanvasタグ上のエリアに画像データを表示
capture.addEventListener('click',function(){

canvas.getContext('2d').drawImage(video, 0, 0, canvasSizeX, canvasSizeY); //video
//canvas.toDataURL()->画像をbase64化したものを使ってデータをサーバー側に送る？
});

３については２のキャプチャー画像と同じ内容の画像ファイルをユーザーに意識させずバックグラウンドでこのWebサーバーと同じネットワーク上にあるNASの特定のフォルダに格納したいと思っています。このような動きはWebサーバー側で処理するものであるのかなと認識しております。（Outsystems側の経験もあまりなく四苦八苦しております。）

WebRTCについては調査不足でした。
まずは教えていただいた　mediastream-recording　を調べてみようと思います。