JavaScriptでWebカメラを使って、それを動画として出力し、さらにその動画に字と音楽を付けられるか。

個人でWebサービスを作ろうとしているんですが、
カメラで撮影した動画に、現在地点の文字とゲームの音楽を入れたいのです。

ですが、(僕の調べ方が悪いのかもですが)調べてもどのような処理にすれば、サイト上で動画を作成し自動で編集すればいいのか全く分かりません。

ですので、そのような処理がJavaScript(ライブラリはjQuery)で出来るならどのような機能とかで実装できるかを教えて下さい。

お願いします。

退会済みユーザー

2019/02/08 13:06 編集

つまり映像に音楽の合成とYoutubeの時間表示の機能を実装したいと言うことですか？上記の意図をお持ちならおそらく不可能です。

退会済みユーザー

2019/02/08 13:06

違います。カメラで撮った(時間は指定)動画に指定の音楽を挿入し、現在地の名前を文字列として動画に挿入したいのです。もちろん全て自動です。

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

回答2件

ベストアンサー

できること

ウェブカメラを画面に出力 navigator.mediaDevices.getUserMedia
出力した内容に画像や文字を上書き HTML5 Canvas

微妙なこと

長い動画の記憶

ブラウザ上で使用できるストレージには制限があります。動画のような大きいデータは、扱いに困るでしょう。

エンコード

Webカメラから出力される動画を保存することは可能ですが、よくある.mp4や.webmなどの見慣れた形に変換するのは現時点では難しいでしょう。
JSで動くエンコーダなどもあるようですが...。

可能か不可能かで言えば可能ではありますが、技術的な障壁があるのは確かです。視点を変えて、ブラウザ上だけではなくサーバを用意し、Webカメラの内容を送信して動画ファイルとして返却する、などの回避方法はあります。

EDIT ウェブカメラで写真を撮ってその写真に現在地の文字をウェブ上で合成するなどは可能か？

可能です。

ウェブカメラの画像を取得 navigator.mediaDevices.getUserMedia
位置情報の取得 Geolocation API
画像に文字合成 HTML5 Canvas

補足
質問者さんはjQueryの使用を前提としているようですが、jQueryはJSの世界ではすでに古く、上の機能をjQueryを通して使用することはできません。それに、これらの機能をそのままのJavaScriptで利用するのはそれほど難しくありません。

投稿2019/02/11 09:00

編集2019/02/11 11:42

kznr.luk

総合スコア27

退会済みユーザー

2019/02/11 11:29

そうですか... そのような点を知らずに質問していました... では質問を変えてウェブカメラで写真を撮ってその写真に現在地の文字をウェブ上で合成するなどは可能でしょうか？

退会済みユーザー

2019/02/11 12:46

追記見ましたすみません...JSに関しては初心者で... ウェブストレージの限界や.mp4出力できないことから上のようなことをやることに変えましたあと jQueryが古いってことも知りませんでした色々教えて下さりありがとうございました

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

javascript,jQueryだと無理だと思います。
PHPだと音楽同士の合成まではとりあえずできるそうです。(質問者さんの意図とは違いますが)こちらに載ってます。あくまでもWAVファイル限定ですが
###追記
こちらにプラグインの紹介と実装の仕方が載っています。
###追記（2）
あっ出力は考えないのですね
失礼しました。一番上は考えないでください。
一応下に今も配布されているプラグインのURLを貼らせていただきました。