首页 > 解决方案 > 将媒体对象从视图发布到控制器

问题描述

我需要将 mediaStreamObj 从 View 发布到 Controller 并将其存储在 VarBinary 的 SQL Server 中。稍后,varBinary 数据被传递给不同的应用程序进行流式传输。在当前核心中,流数据为空。请帮我在流中传递实际数据以将其保存在数据库中并在不同的应用程序中用于流式传输

Javascript代码

let startRecord = document.getElementById("startrecord");
let stopRecord = document.getElementById("stoprecord");
let liveVideo = document.getElementById("livevideo");

let constraintObj = {
    audio: true,
    video: true
};

navigator.mediaDevices
.getUserMedia(constraintObj)
        .then(function (mediaStreamObj) {
            liveVideo.srcObject = mediaStreamObj;
            liveVideo.play();

            let mediaRecorder = new MediaRecorder(mediaStreamObj);
            let chunks = [];

            startRecord.addEventListener("click", ev => {
                mediaRecorder.start();
            });
            stopRecord.addEventListener("click", ev => {
                mediaRecorder.stop();
            });
            mediaRecorder.ondataavailable = function (ev) {
                chunks.push(ev.data);
            }
            mediaRecorder.onstop = function () {                
                let blob = new Blob(chunks, { 'type': 'video/mp4' });
                HttpPost(blob);
                chunks = [];
            }
        })
        .catch(function () {
            console.log("Error");
        })

function HttpPost(blob) {    
    let params = {
         VideoStream: blob,
         VideoType: 'video/mp4'
    };

    //var formData = new FormData()
    //formData.append('VideoStream', blob)
    //formData.append('VideoType', 'video/mp4')

    $.ajax({
        type: "POST",
        url: "/Home/Load/",
        data: params,
        success: function (msg) {       
        },
        error: function (err) {
            alert(err);
        }
    });  
}

MVC - C#

[HttpPost]
public string Load(VideoModel video)
{
    return View();
}

public class VideoModel
{
    public string VideoType { get; set; }
    public Stream VideoStream { get; set; }
}

HTML

<button id="startrecord" 
    class="btn btn-outline-danger btn-lg btn-block" >Record</button>
<button id="stoprecord" 
    class="btn btn-outline-info btn-lg btn-block" >Stop</button>

<video id="livevideo" controls></video>

标签: javascriptc#jqueryasp.netasp.net-mvc

解决方案


推荐阅读