Неправильно прописывается путь к файлу

261
19 марта 2017, 02:59

Пишу веб приложение используя ASP.NET MVC

Задача записывать видео с вебки и потом его выводить на вьюху.

Нашел такой интересный плагин

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

Скачал его семпл, запустил, все работает и записывает и выводит

Решил впилить себе в код, то есть перенес контроллер

Собственно вот код

public class RecordRTCController : Controller
{
    // ---/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];
            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);
    }
}

}

Вьюха вот (точнее скрипт на ней)

 <script> 
                // PostBlob method uses XHR2 and FormData to submit 
                // recorded blob to the PHP server 
                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.'; 
                    } 
                }; 
        </script>

Есть проблема, в примере у него строка вывода видео такая

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

У меня выходит так

<source src="http://localhost:53159/RecordRTC/Indexuploads/128861458.webm" type="video/webm; codecs=&quot;vp8, vorbis&quot;">

Не подскажете, почем так получается?

АПДЕЙТ

Я так понимаю в коде за вывод отвечет этот код

    <section class="experiment">
        <h2 class="header">Record and POST to Server! ( <a href="http://www.recordrtc.org/" title="Suggested to visit for RecordRTC demos and API Documentations">www.RecordRTC.org</a> )</h2>
        <p style="text-align:center;">
            <video id="preview" controls style="border: 1px solid rgb(15, 158, 238); height: 240px; width: 320px;"></video>
        </p>
        <hr />
        <button id="record">Record</button>
        <button id="stop" disabled>Stop</button>
        <button id="delete" disabled>Delete your webm/wav files from Server</button>
        <div id="container" style="padding:1em 2em;"></div>
    </section>
Answer 1

В общем проблема была в самой ссылке, как указал @Igor (спасибо)

строка src выглядела так source.src = location.href + 'uploads/' + fName.replace(/"/g, '');

Когда нужно было написать вот так source.src = document.location.origin + '/uploads/' + fName.replace(/"/g, '');

Теперь все работает.

READ ALSO
Создание игры Pacman на WPF

Создание игры Pacman на WPF

Задумал написать игру (простой PacMan)Сделал Grid сетку 30x30 присвоил нажатию клавиш (стрелочек) методы для перемещения картинки Pacman по гриду: как...

563
C sharp wpf как правильно собрать проект?

C sharp wpf как правильно собрать проект?

Помогите! Не могу собрать проектДелаю релиз - у меня запускается, на 4 других машинах либо ошибка(на одной машине), либо совсем ничего

292