從ajax提供的數據創建視頻文件URI

好吧，我已經閱讀了至少一百篇文章，並且我沒有找到明確的例子來完成我正在嘗試做的事情。我正在使用RecordRTC來獲取我的視頻。我可以以blob:http://www.example.com/be1b2fdd-af19-4a10-b8ef-7a56a1087e3c的形式獲取視頻的webm數據URI。我知道我基本上可以將此源（用於我的視頻元素）提供給畫布元素，然後使用畫布toDataURL()方法獲取編碼的dataURI。但是，如果看到編碼數據應該是視頻，則使用參數video/webm（對於toDataURL()）仍然會返回編碼的字符串，以用於mime類型的image/png。我的問題是：如果我將BLOB URL（blob:http://www.example.com/be1b2fdd-af19-4a10-b8ef-7a56a1087e3c）傳遞給PHP，我如何在我的服務器文件系統上創建webm文件？如果這是不可能的，我怎樣才能從畫布中爲video/webm mimetype創建編碼字符串？從ajax提供的數據創建視頻文件URI

這是我的視頻類對象：

var Video = { 
    eId: '', 
    element: {}, 
    source: {}, 
    RtcOpts: {video: true, audio: true}, 
    RTC: {}, 
    media: {}, 
    init: function(elementId){ 
     Video.eId = elementId; 
     Video.media = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; 
    }, 
    success: function(stream){ 
     Video.RTC = new MRecordRTC(stream); 
     Video.element = document.getElementById(Video.eId); 

     if(window.webkitURL || window.URL){ 
      Video.source = (window.webkitURL) ? window.webkitURL.createObjectURL(stream) : window.URL.createObjectURL(stream); 
     }else{ 
      Video.source = stream; 
     } 

     Video.element.autoplay = true; 
     Video.element.src = Video.source; 
     Video.RTC.startRecording(); 
     Video.element.play(); 
    }, 
    error: function(e){ 
     console.error('getUserMedia Error', e); 
    }, 
    stop: function(){ 
     Video.RTC.stopRecording(function(WebMURL){ 
      console.log(WebMURL); // prints the blob url 
      var recordedBlob = Video.RTC.getBlob(); 
      console.log(recordedBlob); // prints undefined 
      Video.save(recordedBlob); 
     }); 
    }, 
    save: function(recordedBlob){ 
     var formData = new FormData(); 
     formData.append('mode', 'getusermedia'); 
     formData.append('blob', recordedBlob); 

     var request = new XMLHttpRequest(); 
     request.onreadystatechange = function(){ 
      if(request.readyState == 4 && request.status == 200){ 
       console.log(request.responseText); 
      } 
     }; 
     request.open('POST', rootPath+'ajax/processVideo.php'); 
     request.send(formData); 
    } 
};

這是代碼是如何在我的腳本串聯模式運行：

var playerId = 'cam-'+t+'-'+click[1]+'-'+click[2]; 
Video.init(playerId); 

if(Video.media){ 
    document.getElementById('stop-'+playerId).onclick = function(e){ 
     e.preventDefault(); 

     Video.stop(); 
    }; 

    Video.media(Video.RtcOpts, Video.success, Video.error); 
}else{ 
    //fallback 
}

來源

2015-05-03 chaoskreator

你是如何得到blob網址的？你應該上傳的是你得到的文件blob。 'blob：'是一個blob URL，而不是數據URL。 –

啊，我剛剛找到了文檔。 'var recordedBlob = recordRTC.getBlob（）;''應該可以幫到你很多。 –

看，這就是我的想法。但是，recordedBlob總是未定義的。我將更新問題以包含一些示例代碼。 – chaoskreator

使用var recordedBlob = recordRTC.getBlob();，試試這個下面的代碼片段：

var xhr = new XMLHttpRequest(), 
    fd = new FormData(); 
xhr.open("POST", "/submit.php", true); 
fd.append("video", recordedBlob); 
xhr.addEventListener("load", function() { 
    // xhr.statusCode === 200 means it worked 
}); 
xhr.send(fd);

PHP（我真的生鏽了）$_POST["video"]應該包含blob。

來源

2015-05-03 04:03:46

從ajax提供的數據創建視頻文件URI

回答

相關問題