getUserMedia录制后不上传

Question

我的getUserMedia存在以下问题，我在录制完成后尝试上传视频，但显然没有上传或没有响应，有人可以帮我吗？谢谢。

当我单击“停止并上传”按钮时，响应为空。我需要将此文件直接上传到Web服务器。

<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>

Answer 1

[这些东西令人困惑，而且您很困惑。不是getUserMedia进行录音，而是RecordRTC。您要上传的数据是recorder.getBlob()给您的Blob的内容。并且，该Blob包含二进制数据；除非使用ebml之类的软件包，否则对其内容的理解不多。

而且，请注意.getBlob()返回一个Promise，因此您需要.then()才能知道Blob准备就绪的时间。

但是，你很近。您要上传Blob。进行一些更改，您就可以开始使用。

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>元素以预览录制的视频。如果是这样，我建议您使上传工作正常，然后使预览工作正常。