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

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

ただいまの
回答率

90.49%

  • PHP

    20763questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    16930questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML5

    4154questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • WebRTC

    78questions

    WebRTC(Web Real-Time Communication)とは、プラグイン無しでウェブブラウザ間の音声通話・ビデオチャットなどリアルタイムコミュニケーションができるオープンフレームワークです。W3CがAPIレベルで、IETFがプロトコルレベルでそれぞれ標準化が進められています。

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 4
  • VIEW 2,218

webri

score 13

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

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

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

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

<html>
<head><title>WebRTC Camera</title></head> <body>
<button id='rec_s' onclick='startRecording();'>rec start</button>
<button id='rec_e' onclick='stopRecording();'>rec end</button>
<video id="video1" autoplay="1"></video> </body>
<script src='https://code.jquery.com/jquery-1.11.3.min.js'></script>
<script src="https://cdn.webrtc-experiment.com/MediaStreamRecorder.js"> </script>
<script>
var video1 = document.getElementById('video1'); 
var my_stream = null;

navigator.getUserMedia = ( navigator.getUserMedia ||
                       navigator.webkitGetUserMedia ||
                       navigator.mozGetUserMedia ||
                       navigator.msGetUserMedia);
var mediaConstraints = {
    video: true
};

navigator.getUserMedia(mediaConstraints, function(stream) {
    my_stream = stream;
    video1.src = URL.createObjectURL(stream);
},
function(err) { 
    console.log(err); 
});

var recorder =  null;
function startRecording() {
    // MediaStreamRecorder 
    recorder = new MediaStreamRecorder(my_stream);
    recorder.mimeType = 'video/webm';
    recorder.ondataavailable = function(blob) {
        var formData = new FormData();
        formData.append('filename', 'test.webm');
        formData.append('blob', blob);

        xhr('upload.php', formData, function (data) {
               console.log(data);
        });
    }

    // MediaRecorder (in Firefox)
    /*
    recorder = new MediaRecorder(my_stream);
    recorder.mimeType = 'video/webm';
    recorder.ondataavailable = function(evt) {        
        var formData = new FormData();
        formData.append('filename', 'test.webm');
        formData.append('blob', new Blob([evt.data], { type: evt.data.type }));

        $.ajax({
            type: 'POST',
            url: '/upload.php',
            data: formData,
            processData: false,
            contentType: false,
            success: function(data) {
                console.log(data);
            },
        });
    }
    */

     // 録画開始
     recorder.start(1000 * 5);
}

// 録画停止
function stopRecording() {
    recorder.stop();
}

function xhr(url, data, callback) {
    var request = new XMLHttpRequest();
    request.onreadystatechange = function () {
        if (request.readyState == 4 && request.status == 200) {
            callback(location.href + request.responseText);
        }
    };
    request.open('POST', url);
    request.send(data);
}
</script>
</html>

upload.php
<?php
    var_dump($_POST);

出力結果 (console.log(data))
array(1) {
  ["video-filename"]=>
  string(9) "test.webm"
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • ikuwow

    2015/06/28 15:45

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

    キャンセル

  • webri

    2015/06/28 15:47

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

    キャンセル

  • sounisi5011

    2015/07/10 03:06

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

    キャンセル

回答 2

check解決した方法

0

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

array(1) {
  ["filename"]=>
  string(9) "test.webm"
}
array(1) {
  ["blob"]=>
  array(5) {
    ["name"]=>
    string(4) "blob"
    ["type"]=>
    string(10) "video/webm"
    ["tmp_name"]=>
    string(66) "/private/var/folders/vs/1qzp7xfj1lb3z03yv4jl07180000gn/T/phpuHJcSG"
    ["error"]=>
    int(0)
    ["size"]=>
    int(1301860)
  }
}

BlobをFormData形式にして、POSTすると、$_FILESに入るということですね。
大変勉強になりました。sounisi5011さん、ご回答くださったyu-riさん、ありがとうございました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

blobがオブジェクト型でPOSTできてないのかな~という感じがします。
上手いことシリアライズ化もしくはJSON化できれば受け取れるかもしれませんが…試してみます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 90.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • PHP

    20763questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    16930questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML5

    4154questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • WebRTC

    78questions

    WebRTC(Web Real-Time Communication)とは、プラグイン無しでウェブブラウザ間の音声通話・ビデオチャットなどリアルタイムコミュニケーションができるオープンフレームワークです。W3CがAPIレベルで、IETFがプロトコルレベルでそれぞれ標準化が進められています。