MediaRecorderで取得したBlobがPHPで受け取れない

getUserMediaで取得したstreamを録画してPHPに渡したいと考えています。
MediaStreamRecorder.jsを利用してBlobデータを取得することはできたのですが、
取得したBlobをFormDataに入れてPOSTしたところ、PHP側で取得することができません。
（ファイル名は送れているのですが、肝心のBlobが送れていないようです）

また、Firefoxに実装されているMediaRecorderAPIを使った場合でも同様に、
Blobが送れない状態です。

【検証環境】
MacOSX 10.10.3
Chrome: 最新
Firefox: 最新

どなたか解決策をご存知でしたら、ご教授いただければ幸いです。
よろしくお願いいたします。

lang
1<html>
2<head><title>WebRTC Camera</title></head> <body>
3<button id='rec_s' onclick='startRecording();'>rec start</button>
4<button id='rec_e' onclick='stopRecording();'>rec end</button>
5<video id="video1" autoplay="1"></video> </body>
6<script src='https://code.jquery.com/jquery-1.11.3.min.js'></script>
7<script src="https://cdn.webrtc-experiment.com/MediaStreamRecorder.js"> </script>
8<script>
9var video1 = document.getElementById('video1'); 
10var my_stream = null;
11
12navigator.getUserMedia = ( navigator.getUserMedia ||
13                       navigator.webkitGetUserMedia ||
14                       navigator.mozGetUserMedia ||
15                       navigator.msGetUserMedia);
16var mediaConstraints = {
17    video: true
18};
19
20navigator.getUserMedia(mediaConstraints, function(stream) {
21	my_stream = stream;
22	video1.src = URL.createObjectURL(stream);
23},
24function(err) { 
25	console.log(err); 
26});
27
28var recorder =  null;
29function startRecording() {
30	// MediaStreamRecorder 
31	recorder = new MediaStreamRecorder(my_stream);
32    recorder.mimeType = 'video/webm';
33	recorder.ondataavailable = function(blob) {
34		var formData = new FormData();
35		formData.append('filename', 'test.webm');
36		formData.append('blob', blob);
37
38		xhr('upload.php', formData, function (data) {
39		   	console.log(data);
40		});
41	}
42
43	// MediaRecorder (in Firefox)
44	/*
45	recorder = new MediaRecorder(my_stream);
46	recorder.mimeType = 'video/webm';
47	recorder.ondataavailable = function(evt) {		
48		var formData = new FormData();
49		formData.append('filename', 'test.webm');
50		formData.append('blob', new Blob([evt.data], { type: evt.data.type }));
51
52		$.ajax({
53		    type: 'POST',
54		    url: '/upload.php',
55		    data: formData,
56		    processData: false,
57		    contentType: false,
58		    success: function(data) {
59		    	console.log(data);
60		    },
61		});
62	}
63	*/
64
65 	// 録画開始
66 	recorder.start(1000 * 5);
67}
68
69// 録画停止
70function stopRecording() {
71	recorder.stop();
72}
73
74function xhr(url, data, callback) {
75    var request = new XMLHttpRequest();
76    request.onreadystatechange = function () {
77        if (request.readyState == 4 && request.status == 200) {
78            callback(location.href + request.responseText);
79        }
80    };
81    request.open('POST', url);
82    request.send(data);
83}
84</script>
85</html>

upload.php

lang
1<?php
2	var_dump($_POST);

出力結果 (console.log(data))

lang
1array(1) {
2  ["video-filename"]=>
3  string(9) "test.webm"
4}

ikuwow

2015/06/28 06:45

タイトルは「MediaRecorderで取得したBlobがPHPで受け取れない」のように問題を明示するほうがわかりやすいかと思います。

webri

2015/06/28 06:47

ありがとうございます。修正いたしました。

sounisi5011

2015/07/09 18:06

$_FILES変数をvar_dumpした場合の内容について、情報追加を求めます。

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

回答2件

自己解決

sounisi5011さんの情報追加依頼の通り、$_FILES変数をvar_dumpしてみたところ、
アップロードできていることが確認できました。

php
1array(1) {
2  ["filename"]=>
3  string(9) "test.webm"
4}
5array(1) {
6  ["blob"]=>
7  array(5) {
8    ["name"]=>
9    string(4) "blob"
10    ["type"]=>
11    string(10) "video/webm"
12    ["tmp_name"]=>
13    string(66) "/private/var/folders/vs/1qzp7xfj1lb3z03yv4jl07180000gn/T/phpuHJcSG"
14    ["error"]=>
15    int(0)
16    ["size"]=>
17    int(1301860)
18  }
19}