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}
回答2件
あなたの回答
tips
プレビュー