Question

我在asp.net mvc上使用RecordRTC插件这是它

https://github.com/muaz-khan/RecordRTC/tree/master/RecordRTC-to-ASPNETMVC

这是我的控制器

 // ---/RecordRTC/
    public ActionResult Index()
    {
        return View();
    }

    // ---/RecordRTC/PostRecordedAudioVideo
    [HttpPost]
    public ActionResult PostRecordedAudioVideo()
    {
        foreach (string upload in Request.Files)
        {
            var path = AppDomain.CurrentDomain.BaseDirectory + "uploads/";
            var file = Request.Files[upload];
            if (file == null) continue;

            file.SaveAs(Path.Combine(path, Request.Form[0]));
        }
        return Json(Request.Form[0]);
    }

    // ---/RecordRTC/DeleteFile
    [HttpPost]
    public ActionResult DeleteFile()
    {
        var fileUrl = AppDomain.CurrentDomain.BaseDirectory + "uploads/" + Request.Form["delete-file"] + ".webm";
        new FileInfo(fileUrl).Delete();
        return Json(true);
    }
}

}

这是脚本

＆＃13;

  function PostBlob(blob) {
                    // FormData
                    var formData = new FormData();
                    formData.append('video-filename', fileName);
                    formData.append('video-blob', blob);
                    // progress-bar
                    var hr = document.createElement('hr');
                    container.appendChild(hr);
                    var strong = document.createElement('strong');
                    strong.id = 'percentage';
                    strong.innerHTML = 'Video upload progress: ';
                    container.appendChild(strong);
                    var progress = document.createElement('progress');
                    container.appendChild(progress);
                    // POST the Blob using XHR2
                    xhr('/RecordRTC/PostRecordedAudioVideo', formData, progress, percentage, function (fName) {
                        container.appendChild(document.createElement('hr'));
                        var mediaElement = document.createElement('video');
                        var source = document.createElement('source');
                        source.src = location.href + 'uploads/' + fName.replace(/"/g, '');
                        source.type = 'video/webm; codecs="vp8, vorbis"';

                        mediaElement.appendChild(source);

                        mediaElement.controls = true;
                        container.appendChild(mediaElement);
                        mediaElement.play();

                        progress.parentNode.removeChild(progress);
                        strong.parentNode.removeChild(strong);
                        hr.parentNode.removeChild(hr);
                    });
                }

                var record = document.getElementById('record');
                var stop = document.getElementById('stop');
                var deleteFiles = document.getElementById('delete');

                var preview = document.getElementById('preview');

                var container = document.getElementById('container');

                var recordVideo;
                record.onclick = function () {
                    record.disabled = true;

                    navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia;
                    navigator.getUserMedia({
                        audio: true,
                        video: true
                    }, function (stream) {
                        preview.src = window.URL.createObjectURL(stream);
                        preview.play();

                        recordVideo = RecordRTC(stream, {
                            type: 'video'
                        });

                        recordVideo.startRecording();

                        stop.disabled = false;
                    }, function (error) {
                        alert(error.toString());
                    });
                };

                var fileName;
                stop.onclick = function () {
                    record.disabled = false;
                    stop.disabled = true;

                    preview.src = '';

                    fileName = (Math.round(Math.random() * 99999999) + 99999999) + '.webm';

                    recordVideo.stopRecording(function () {
                        PostBlob(recordVideo.getBlob());
                    });

                    deleteFiles.disabled = false;
                };

                deleteFiles.onclick = function () {
                    deleteAudioVideoFiles();
                };

                function deleteAudioVideoFiles() {
                    deleteFiles.disabled = true;
                    if (!fileName) return;
                    var formData = new FormData();
                    formData.append('delete-file', fileName);
                    xhr('/RecordRTC/DeleteFile', formData, null, null, function (response) {
                        console.log(response);
                    });
                    fileName = null;
                    container.innerHTML = '';
                }

                function xhr(url, data, progress, percentage, callback) {
                    var request = new XMLHttpRequest();
                    request.onreadystatechange = function () {
                        if (request.readyState == 4 && request.status == 200) {
                            callback(request.responseText);
                        }
                    };

                    if (url.indexOf('/RecordRTC/DeleteFile') == -1) {
                        request.upload.onloadstart = function () {
                            percentage.innerHTML = 'Upload started...';
                        };

                        request.upload.onprogress = function (event) {
                            progress.max = event.total;
                            progress.value = event.loaded;
                            percentage.innerHTML = 'Upload Progress ' + Math.round(event.loaded / event.total * 100) + "%";
                        };

                        request.upload.onload = function () {
                            percentage.innerHTML = 'Saved!';
                        };
                    }

                    request.open('POST', url);
                    request.send(data);
                }

                window.onbeforeunload = function () {
                    if (!!fileName) {
                        deleteAudioVideoFiles();
                        return 'It seems that you\'ve not deleted audio/video files from the server.';
                    }
                };

＆＃13;

视频正在写入上传文件夹，但不会在视图中上传以供观看。

我在控制台中出现此错误

Failed to load resource: the server responded with a status of 404 (Not Found)

和路径为<source src="http://localhost:53159/RecordRTC/Indexuploads/128861458.webm" type="video/webm; codecs="vp8, vorbis"">

它在链接上的样本是

<source src="http://localhost:49498/uploads/136131867.webm" type="video/webm; codecs=&quot;vp8, vorbis&quot;">

我复制了他的代码，我的麻烦或错误在哪里？

Answer 1

我发现解决方案的麻烦在于插件

上传时有这样的链接。

source.src = location.href + 'uploads/' + fName.replace(/"/g, '');

但它必须像这样

source.src = document.location.origin + '/uploads/' + fName.replace(/"/g, '');

现在一切都好。

无法上传视频RecordRTC（ASP.NET MVC）

1 个答案: