2017-09-25 1 views
2

친구, 내 웹 사이트에서 오디오를 캡처하려면 RecordRTC 다음 Im을 사용하여 서버에 사운드 블롭 업로드 및 XMLHTTPRequest를 통해 PHP 서버에 기록 된 파일을 성공적으로 업로드 관리. 여기에 임 업로드 내 코드 :Laravel

var audio_context; 
 
    var recorder; 
 
    var isMouseDown = false; 
 
    var fileType = 'audio'; 
 
    var fileName = 'ABCDEF.wav'; 
 

 
    function startUserMedia(stream) { 
 
    var input = audio_context.createMediaStreamSource(stream); 
 
    __log('Media stream created.'); 
 
\t console.log('Media stream created.'); 
 

 
    // Uncomment if you want the audio to feedback directly 
 
    //input.connect(audio_context.destination); 
 
    //__log('Input connected to audio context destination.'); 
 

 
    recorder = new Recorder(input); 
 
    __log('Recorder initialised.'); 
 
\t console.log('Recorder Initialized'); 
 
    } 
 

 
    function startRecording(button) 
 
    { 
 
    recorder && recorder.record(); 
 
    button.disabled = true; 
 
    button.nextElementSibling.disabled = false; 
 
    __log('Recording...'); 
 
\t console.log('Recording....'); 
 
    } 
 

 
    function stopRecording(button) 
 
    { 
 
    recorder && recorder.stop(); 
 
    button.disabled = true; 
 
    button.previousElementSibling.disabled = false; 
 
    __log('Stopped recording.'); 
 
\t console.log('Stopped Recording'); 
 
\t 
 

 
    // create WAV download slink using audio data blob 
 
    createDownloadLink(); 
 
    recorder.clear();  
 

 
    } 
 

 

 
    function createDownloadLink() 
 
    { 
 
    recorder && recorder.exportWAV(function(blob) 
 
\t { 
 
\t \t var counter = 0; 
 
\t \t 
 
\t \t var url = URL.createObjectURL(blob); 
 
     
 
\t \t var fileName = 'Recording'+counter+'.wav'; 
 
\t \t 
 
\t \t var fileObject = new File([blob], fileName, { 
 
          type: 'audio/wav' 
 
         }); 
 
\t \t \t \t \t \t 
 
\t \t var formData = new FormData(); 
 

 
         // recorded data 
 
\t \t formData.append('audio-blob', fileObject); 
 

 
         // file name 
 
     formData.append('audio-filename', fileObject.name); 
 
\t \t 
 
\t \t 
 
\t \t $.ajax({ 
 
          url: 'save.php', // replace with your own server URL 
 
          data: formData, 
 
          cache: false, 
 
          contentType: false, 
 
          processData: false, 
 
          type: 'POST', 
 
          success: function(response) { 
 
           if (response === 'success') { 
 
            alert('successfully uploaded recorded blob'); 
 
\t \t \t \t \t \t \t \t \t console.log('Successfully Uploaded Recorded Blob'); 
 
            // file path on server 
 
            var fileDownloadURL = '/uploads/' + fileObject.name; 
 

 
           
 
\t \t \t \t \t \t \t \t } else 
 
\t \t \t \t \t \t \t \t { 
 
            alert(response); // error/failure 
 
           } 
 
          } 
 
         }); 
 

 
    }); 
 

 
    } 
 

 

 
    window.onload = function init() { 
 
    try { 
 
     // webkit shim 
 
     window.AudioContext = window.AudioContext || window.webkitAudioContext; 
 
     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia; 
 
     window.URL = window.URL || window.webkitURL; 
 

 
     audio_context = new AudioContext; 
 
     __log('Audio context set up.'); 
 
     __log('navigator.getUserMedia ' + (navigator.getUserMedia ? 'available.' : 'not present!')); 
 
    } catch (e) { 
 
     alert('No web audio support in this browser!'); 
 
    } 
 

 
    navigator.getUserMedia({audio: true}, startUserMedia, function(e) { 
 
     __log('No live audio input: ' + e); 
 
    }); 
 
    };
<button onclick="startRecording(this);">record</button> 
 
    <button onclick="stopRecording(this);" disabled>stop</button>
이 내 Save.php 파일입니다

<?php 
 
// upload directory 
 
$filePath = 'uploads/' . $_POST['audio-filename']; 
 

 
// path to ~/tmp directory 
 
$tempName = $_FILES['audio-blob']['tmp_name']; 
 

 
// move file from ~/tmp to "uploads" directory 
 
if (!move_uploaded_file($tempName, $filePath)) { 
 
    // failure report 
 
    echo 'Problem saving file: '.$tempName; 
 
    die(); 
 
} 
 

 
// success report 
 
echo 'success'; 
 
?>

이제 난 내 Laravel 프로젝트에이 메커니즘을 적용해야, Laravel Framework에 대한 새로운 소식과 어떻게 실현 될 수 있는지 실마리가 없습니다. 친절하게 해결책을 찾도록 도와주세요. 감사

+0

: 당신은 당신의 원하는 디렉토리에 파일을 저장할 수있을 것입니다, 그리고

$blobInput = $request->file('audio-blob');

을 업로드 된 파일 및 저장 방법에 대한 설명서를 읽었습니까? – sisve

+0

https://laravel.com/docs/5.5/filesystem#file-uploads – mimo

+0

예, 읽었습니다. 문제는 여기 getusermedia()를 사용하여 캡처 한 BLOB를 처리하는 중입니다 ... 문제는 디렉토리에 업로드하는 것입니다. –

답변

0

먼저, 다음 코드를 사용하여 파일을 읽을해야합니다

Storage::put('here specify your path followed by your filename separated by /', file_get_contents($blobInput)); 
+0

urself가이 메커니즘을 구현 한 적이 있습니까? 그렇다면 일부 데모를 나와 공유하십시오! –

+0

현재 작업중인 프로젝트에서 구현했지만 불행히도 아직 제공 할 데모가 없습니다. 코드에 대한 추가 정보가 필요하면 알려주십시오. –