web-dev-qa-db-ja.com

HTML5 getUserMediaレコードウェブカメラ、オーディオとビデオの両方

Chrome=を使用して、ブラウザからビデオ（ウェブカメラ）とオーディオ（マイク）をキャプチャし、ストリームをビデオファイルとして保存することはできますか？

これを使用して、ユーザーが後で見ることができるファイルに簡単な（30秒）メッセージ（ビデオとオーディオの両方）を記録できるビデオ/フォトブースのようなアプリケーションを作成したいと思います。

私はドキュメントを読みましたが、オーディオとビデオの両方をキャプチャする方法の例を（まだ）見ていません。また、結果をビデオファイルに保存する方法をまだ見つけていません。

誰が助けることができますか？

html5getusermedia
30
Harm Kabisa

MediaStreamRecorderは、getUserMedia（）ストリーム（まだ実装中）を記録するためのWebRTC APIです。これにより、Webアプリはライブのオーディオ/ビデオセッションからファイルを作成できます。

<script language="javascript" type="text/javascript">
function onVideoFail(e) {
    console.log('webcam fail!', e);
  };

function hasGetUserMedia() {
  // Note: Opera is unprefixed.
  return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia || navigator.msGetUserMedia);
}

if (hasGetUserMedia()) {
  // Good to go!
} else {
  alert('getUserMedia() is not supported in your browser');
}

window.URL = window.URL || window.webkitURL;
navigator.getUserMedia  = navigator.getUserMedia || 
                         navigator.webkitGetUserMedia ||
                          navigator.mozGetUserMedia || 
                           navigator.msGetUserMedia;

var video = document.querySelector('video');
var streamRecorder;
var webcamstream;

if (navigator.getUserMedia) {
  navigator.getUserMedia({audio: true, video: true}, function(stream) {
    video.src = window.URL.createObjectURL(stream);
    webcamstream = stream;
//  streamrecorder = webcamstream.record();
  }, onVideoFail);
} else {
    alert ('failed');
}

function startRecording() {
    streamRecorder = webcamstream.record();
    setTimeout(stopRecording, 10000);
}
function stopRecording() {
    streamRecorder.getRecordedData(postVideoToServer);
}
function postVideoToServer(videoblob) {

    var data = {};
    data.video = videoblob;
    data.metadata = 'test metadata';
    data.action = "upload_video";
    jQuery.post("http://www.foundthru.co.uk/uploadvideo.php", data, onUploadSuccess);
}
function onUploadSuccess() {
    alert ('video uploaded');
}

</script>

<div id="webcamcontrols">
    <button class="recordbutton" onclick="startRecording();">RECORD</button>
</div>

http://www.w3.org/TR/mediastream-recording/

13
Konga Raju

私が知る限り、オーディオとビデオを一緒に記録し、1つのファイルとして保存する方法はありません。オーディオをwavファイルとして、ビデオをwebmファイルとしてキャプチャして保存することができます。

ビデオの保存方法に関する素晴らしい投稿です。 http://ericbidelman.tumblr.com/post/31486670538/creating-webm-video-from-getusermedia

そして、あなたのオーディオを保存するための便利なユーティリティ

https://github.com/mattdiamond/Recorderjs

6
TarranJones

現在、Webでオーディオとビデオを記録するためのいくつかのプロダクション対応ソリューションがあります。

デスクトップブラウザ

MediaRecorder API（HTML）

MediaRecorder API（MediaStream Recorder）は、WebカメラへのアクセスをgetUserMedia()に依存しています。 Firefox 30以降およびChrome 49 + でサポートされています。

フラッシュクライアント+ rtmpメディアサーバー

Webページに埋め込まれ、訪問者のWebカメラとマイクをキャプチャし、生のビデオとオーディオデータをエンコードするFlash（.swf）アプリケーションが必要です（組み込みコーデック：H.264、Spark、Nellymoser ASAOおよびSpeexを使用）および記録されたデータを（rtmp経由で）メディアサーバーにストリーミングします。

データはストリーミングされるため、記録を停止するとすぐに、すべてのデータはすでにメディアサーバー上にあります（アップロード時間なし）。もう1つの利点は、クライアントコンピューターがクラッシュしてもビデオが失われないことです。

メディアサーバーには少なくとも3つのオプションがあります。

  1. Red5 は無料でオープンソースです（その中の記録プロセスにコードパッチを個人的に提供しましたが、素晴らしい動作を保証できます）
  2. Wowza （$ 65 /月）
  3. Adobe Media Server Pro （$ 4500）

メディアサーバーは、（httpではなくstreaming/rtmpを介して）データを受信し、クライアントで使用されるコーデックと使用されるメディアサーバーに応じて、オーディオおよびビデオデータはmp4、flvまたはf4vファイルで多重化されます。

このFlashクライアント+メディアサーバーの記録プロセス-2002年のFlash Player 6以降、かなりうまく機能しています。

モバイルブラウザ

HTML Media Capture

HTML Media Capture（ ここでスクリーンショットで説明 ）を使用して、デバイスのネイティブのビデオ録画アプリとコーデックを使用してビデオを録画できます。 HTML Media Captureはローカルで（デバイス上で）レコードを作成し、ファイルをWebサーバーにアップロードします（通常のHTTPアップロードプロセス）。

iPhoneなどのiOSデバイスのSafariでHTML Media Captureを使用すると、Androidでは再生できない.movファイルが作成されます。解決策は、FFmpegを使用して.mp4サーバー側に変換することです。

AndroidブラウザーでHTML Media Captureを使用すると、最終結果はiPhoneで再生可能な.mp4ファイルになります。一部の古いAndroid電話は.3gpを作成しますファイル。

両方（デスクトップ上のFlashクライアント+メディアサーバーとモバイル上のHTML Media Capture）を実装する商用ソリューションは、 [〜＃〜] hdfvr [〜＃〜] です。

3
Octavian Naicu

これは私のgithubリポジトリで、オーディオ+ビデオを記録するためのライブラリを提供し、最終的にコンテンツをチャンクとしてサーバーにアップロードします

  1. これはChrome、Operaをサポートしています
  2. ブロブがスライスされてアップロードされるため、アップロード時間が短縮されます

Html_Audio_Video_Recorder

2
imal hasaranga perera

以下を使用します。

<input type="file" accept="image/*;capture=camera"> \\ Snapshot
<input type="file" accept="video/*;capture=camcorder"> \\ Video
<input type="file" accept="audio/*;capture=microphone"> \\ Audio

次に、フォームをPHPで通常のファイルとして扱います

1
AgeDeO