如何使用Websocket和Javascript MediaRecorder API保存实时视频流并将其转换为MP4？

Question

我正在尝试使用Javascript和.NET Web Socket上传实时视频流。我每秒将Base64编码的数据传递到Web套接字服务器，在Web套接字服务器中，它将数据附加到单个WebM格式的文​​件中。有时，由于未上传视频而导致未知错误或部分上传了视频。有人可以提供最佳方法来帮助您在服务器上实时上传视频并将其转换为MP4，而无需付费的第三方工具。我在下面附加我正在使用的代码-

//js code

var handleDataAvailable = function(event) {
      if (event.data && event.data.size > 0) {
          try{          
                var reader = new window.FileReader();                  
                reader.onloadend = function () {
                  var base64data = reader.result;
                  if (ws.readyState == WebSocket.OPEN){
                    ws.send(base64data);
                  }
                }
                reader.readAsDataURL(event.data);            
          }catch(ex){

          }      
      }
    }
const SERVER_URL = "ws://localhost:5029";
var ws = new WebSocket(SERVER_URL);
var mediaRecorder = new MediaRecorder(outputStream, options);
mediaRecorder.ondataavailable = handleDataAvailable;

// C# code
// System.Net.WebSockets;
// websocket connection handling code
//

//on message event of websocket
public async Task OnMessage(string message)
{
    var base64Data = Regex.Match(message, @"data:video/(?<type>.+?),(?<data>.+)").Groups["data"].Value;
    var ByteArray = Convert.FromBase64String(base64Data);
    string path = "~//TempUploads//Recordings//test.webm";
    if (!Directory.Exists(HttpContext.Current.Server.MapPath(path)))
    {
        Directory.CreateDirectory(HttpContext.Current.Server.MapPath(path));
    }

    using (var stream = new FileStream(HttpContext.Current.Server.MapPath(path), FileMode.Append))
    {
      try
      {
        stream.Write(ByteArray, 0, ByteArray.Length);
      }
      catch (Exception ex)
      {


      }

    }

}

Answer 1

对于那些在MediaRecorder API中遇到类似问题的人，请确保您检查以下共同点：

• 您实际上已经开始使用mediaRecorder.start()录制流
• 尝试以毫秒为单位将数据作为参数传递给start()方法，将数据发射的时间段增加到> = 1.5s，例如：mediaRecorder.start(1500)。这为您的客户端在块之间提供了更多的喘息空间，减慢了向后端发送数据的速度，但增加了块大小。