создать видеофайл из ajax предоставил данныеURI

Хорошо, я прочитал по крайней мере сто статей по этому вопросу, и я не могу найти ясного примера, чтобы сделать то, что я пытаюсь сделать, точно. Я использую RecordRTC для получения моих видео. Я могу получить URI веб-данных для видео в виде blob:http://www.example.com/be1b2fdd-af19-4a10-b8ef-7a56a1087e3c. Я знаю, что могу в корне загрузить этот источник (используемый для моего видеоэлемента) в элемент canvas, а затем получить кодированный dataURI с помощью метода canvas toDataURL(). Однако, видя, что кодированные данные должны быть видео, использование параметра, такого как video/webm для toDataURL(), все еще возвращает закодированную строку для типа изображения image/png. Мой вопрос таков: если я передаю url blob (blob:http://www.example.com/be1b2fdd-af19-4a10-b8ef-7a56a1087e3c) на PHP, как я могу создать файл webm на файловой системе моего сервера? Если это невозможно, как я могу создать закодированную строку для mimetype video/webm с холста?создать видеофайл из 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

Как вы получили URL-адрес blob для начала? То, что вы должны загрузить, - это файл, который вы получили. '' blob: '' - это URL-адрес blob, а не URL-адрес данных. –

А, я только что нашел документацию. '' var записаноBlob = recordRTC.getBlob(); '' должно вам очень помочь. –

Смотрите, вот что я подумал. Тем не менее, recordBlob всегда не определен. Я собираюсь обновить вопрос, чтобы включить код примера. – 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

ответ

Смежные вопросы