getUserMedia не загружается после записи - PullRequest
Новая
       190

getUserMedia не загружается после записи

1 голос
/ 06 апреля 2020

У меня следующая проблема с getUserMedia, я пытаюсь загрузить видео после завершения записи, но, видимо, оно не загружается или не отвечает, кто-то может мне помочь? спасибо.

Когда я нажимаю кнопку «Остановить и загрузить», я получаю нулевой ответ .. Мне нужно загрузить этот файл напрямую на веб-сервер. 

<div class="content">

<video playsinline poster="./poster.png" onclick="this.play();"></video>
<button id="btn-stop-recording" type="button" disabled>Stop And Upload</button>

<script src="./RecordRTC.js"></script>
//library URL (https://): webrtc-experiment.com/RecordRTC.js
<script>
var video = document.querySelector('video');

function captureCamera(callback) {
    navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then(function(camera) {
        callback(camera);
    }).catch(function(error) {
        alert('Unable to capture your camera. Please check console logs.');
        console.error(error);
    });
}

function stopRecordingCallback() {
    video.src = video.srcObject = null;
    video.muted = false;
    video.volume = 1;
    //video.src = URL.createObjectURL(recorder.getBlob());
    video.src = window.URL.createObjectURL(recorder.getBlob());
    document.write(video.src);
    var fd = new FormData();
    fd.append('fname', 'test.webm');
    fd.append('data', video.srcObject);
    $.ajax({
        type: 'POST',
        url: './true.php',
        data: fd,
        processData: false,
        contentType: false
    }).done(function(data) {
           console.log(data);
    });
}

var recorder; // globally accessible

document.getElementById('btn-start-recording').onclick = function() {
    this.disabled = true;
    captureCamera(function(camera) {
        video.muted = true;
        video.volume = 0;
        video.srcObject = camera;

        recorder = RecordRTC(camera, {
            type: 'video',
            mimeType: 'video/webm'
        });

        recorder.startRecording();

        // release camera on stopRecording
        recorder.camera = camera;

        document.getElementById('btn-stop-recording').disabled = false;
    });
};

document.getElementById('btn-stop-recording').onclick = function() {
    this.disabled = true;
    recorder.stopRecording(stopRecordingCallback);
};
</script>
<div>

Файл true. php> >>> 

<?php
foreach(array('video') as $type) {
    if (isset($_FILES["${type}-blob"])) {

        echo 'uploads/';

        $fileName = $_POST["${type}-filename"];
        $uploadDirectory = 'uploads/'.$fileName;

        if (!move_uploaded_file($_FILES["${type}-blob"]["tmp_name"], $uploadDirectory)) {
            echo(" problem moving uploaded file");
        }

        echo($fileName);
    }
}
?>

Согласно журналу консоли файл отправляется на сервер, но при получении файла php он не загружает его на сервер.

ПОЧТОВЫЕ ДАННЫЕ ОТ AJAX ВЫЗОВ: 

POST /true.php HTTP/1.1
Host: localhost:9090
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:74.0) Gecko/20100101 Firefox/74.0
Accept: */*
Accept-Language: es-ES,es;q=0.8,en-US;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate
X-Requested-With: XMLHttpRequest
Content-Type: multipart/form-data; boundary=---------------------------39520532461108107029652486848
Content-Length: 644254
Origin: http://localhost:9090
Connection: close
Referer: http://localhost:9090/

-----------------------------39520532461108107029652486848
Content-Disposition: form-data; name="fname"

test.webm
-----------------------------39520532461108107029652486848
Content-Disposition: form-data; name="data"; filename="blob"
Content-Type: video/webm

1 Ответ

0 голосов
/ 06 апреля 2020

Этот материал сбивает с толку, и с уважением, вы запутались. Запись ведется не getUserMedia, а RecordRTC. Данные, которые вы хотите загрузить, являются содержимым BLOB-объекта, предоставленного вам recorder.getBlob(). И этот Blob содержит двоичные данные; вы не сможете разобраться в его содержании, если не используете пакет типа ebml .

И обратите внимание, что .getBlob() возвращает Обещание, поэтому вам нужно .then(), чтобы узнать, когда ваш BLOB-объект готов.

Но вы близки. Вы хотите загрузить Blob. Несколько изменений, и вы готовы к go. 

function stopRecordingCallback() {
    recorder.getBlob()
    /* getBlob completes normally */
    .then (function(blob) {
        const fd = new FormData()
        fd.append('fname', 'test.webm')
        fd.append('data', blob)
        $.ajax({
            type: 'POST',
            url: './true.php',
            data: fd,
            processData: false,
            contentType: false
        })
        .done(function(data) {
           console.log(data)
    })
    /* getBlob's promise rejected */
    .catch(console.err)
}

Я не отлаживал это, но это близко к тому, что я сделал.

Похоже, вы Возможно, вы пытаетесь настроить элемент <video> для предварительного просмотра записанного видео. Если это правда, я предлагаю вам загрузить загрузку, а затем запустить предварительный просмотр.

Pro tip Ваш код для этого носителя WebRT C будет короче и намного проще для чтения, если вы начнете использовать async / await вместо .then() и обратные вызовы. Выяснить, async / await - одно из лучших вложений времени, которое вы можете сделать.

...