简体   繁体   English

使用ASP.NET MVC处理/接收来自WebRTC的实时视频网络摄像头流或任何基于浏览器的捕获机制到服务器

[英]Handling / receiving live video webcam stream from WebRTC or any browser based capturing mechanism to the server using ASP.NET MVC

We need to capture a live video stream from WebRTC (or any other capturing mechanism from the client webcam, even if it is not supported on all browsers, but as a PoC). 我们需要从WebRTC(或客户端网络摄像头的任何其他捕获机制)捕获实时视频流,即使它不是在所有浏览器上都支持,而是作为PoC支持。

This live video needs to be handled by a server component (ASP.Net MVC / Web API), I imagine that the code on the server will look like: 这个实时视频需要由服务器组件(ASP.Net MVC / Web API)处理,我想服务器上的代码看起来像:

[HttpPost]
public ActionResult HandleVideoStream(Stream videoStream)
{
      //Handle the live stream
}

Looking for any keyword or helpful link. 寻找任何关键字或有用的链接。

We have already implemented a way to send individual frames using base64 jpg, but this is not useful at all, because there is a huge overhead of the base64 encoding and because we could use any video encoding to send the video more efficiently (send the difference between the frames using VPx -vp8- for example), the required solution needs to capture a video from the webcam of the client and send it live (not recorded) to the server (asp.net) as a stream -or chunks of data representing the new video data-. 我们已经实现了一种使用base64 jpg发送单个帧的方法,但这根本没用,因为base64编码有很大的开销,因为我们可以使用任何视频编码来更有效地发送视频(发送差异)在使用VPx -vp8-的帧之间,所需的解决方案需要从客户端的网络摄像头捕获视频并将其作为流 - 或数据块实时(未记录)发送到服务器(asp.net)代表新的视频数据。

Your question is too broad and asking for off-site resources is considered off-topic on stackoverflow. 您的问题太广泛,并且要求异地资源在stackoverflow上被视为偏离主题。 In order to avoid opinion-prone statements I will restrict the answer to general concepts. 为了避免倾向于意见的陈述,我将限制一般概念的答案。

Flash/RTMP 闪存/ RTMP

WebRTC is not yet available on all browser so the most widely used way of capturing webcam input from a browser currently in use is via a plugin. WebRTC尚未在所有浏览器上提供,因此从当前使用的浏览器捕获网络摄像头输入的最广泛使用的方式是通过插件。 The most common solution uses the Adobe Flash Player , whether people like it or not. 最常见的解决方案是使用Adobe Flash Player ,无论是否喜欢它。 This is due to the H.264 encoding support in recent versions, along with AAC , MP3 etc. for audio. 这是由于最近版本中的H.264编码支持,以及音频的AACMP3等。

The streaming is accomplished using the RTMP protocol which was initially designed for Flash communication. 流式传输使用RTMP协议完成,该协议最初设计用于Flash通信。 The protocol works on TCP and has multiple flavors like RTMPS ( RTMP over TLS/SSL for encryption), RTMPT ( RTMP encapsulated in HTTP for firewall traversal). 该协议适用于TCP ,具有多种风格,如RTMPSRTMP over TLS/SSL for encryption), RTMPTRTMP封装在HTTP用于防火墙遍历)。

The stream usually uses the FLV container format. 流通常使用FLV容器格式。

You can easily find open-source projects that use Flash to capture webcam input and stream it to an RTMP server. 您可以轻松找到使用Flash捕获网络摄像头输入并将其流式传输到RTMP服务器的开源项目。

On the server-side you have two options: 在服务器端,您有两个选择:

  • implement a basic RTMP server to talk directly to the sending library and read the stream 实现一个基本的RTMP服务器直接与发送库通信并读取流
  • use one of the open-source RTMP servers and implement just a client in ASP (you can also transcode the incoming stream on the fly depending on what you're trying to do with your app). 使用其中一个开源RTMP服务器并在ASP实现一个客户端(您也可以根据您尝试对应用程序执行的操作来动态转码传入流)。

WebRTC 的WebRTC

With WebRTC you can either: 使用WebRTC您可以:

  • record small media chunks on a timer and upload them on the server where the stream is reconstructed (needs concatenating and re-stamping the chunks to avoid discontinuities). 在计时器上记录小媒体块并将其上传到重建流的服务器上(需要连接并重新标记块以避免不连续)。 See this answer for links . 请参阅此答案以获取链接
  • use the peer-to-peer communication features of WebRTC with the server being one of the peers. 使用WebRTC的对等通信功能,服务器是其中一个对等体。

A possible solution for the second scenario, which I haven't personally tested yet, is offered by Adam Roach: Adam Roach提供了第二种情况的可能解决方案,我还没有亲自测试过。

  1. Browser retrieves a webpage with javascript in it. 浏览器检索其中包含javascript的网页。
  2. Browser executes javascript, which: 浏览器执行javascript,其中:
    1. Gets a handle to the camera using getUserMedia , 使用getUserMedia获取相机的句柄,
    2. Creates an RTCPeerConnection 创建RTCPeerConnection
    3. Calls createOffer and setLocalDescription on the RTCPeerConnection RTCPeerConnection上调用createOffersetLocalDescription
    4. Sends an request to the server containing the offer (in SDP format) 向包含商品的服务器发送请求(采用SDP格式)
  3. The server processes the offer SDP and generates its own answer SDP , which it returns to the browser in its response. 服务器处理商品SDP并生成自己的答案SDP ,并在其响应中返回浏览器。
  4. The JavaScript calls setRemoteDescription on the RTCPeerConnection to start the media flowing. 该JavaScript调用setRemoteDescriptionRTCPeerConnection启动媒体流。
  5. The server starts receiving DTLS/SRTP packets from the browser, which it then does whatever it wants to, up to and including storing in an easily readable format on a local hard drive. 服务器开始从浏览器接收DTLS/SRTP数据包,然后根据需要执行任何操作,直到并包括以易读的格式存储在本地硬盘驱动器上。

Source 资源

This will use VP8 and Vorbis inside WebM over SRTP ( UDP , can also use TCP ). 这将在WebM上使用VP8Vorbis不是SRTPUDP ,也可以使用TCP )。

Unless you can implement RTCPeerConnection directly in ASP with a wrapper you'll need a way to forward the stream to your server app. 除非您可以使用包装器直接在ASP实现RTCPeerConnection否则您需要一种方法将流转发到您的服务器应用程序。

The PeerConnection API is a powerful feature of WebRTC . PeerConnection APIWebRTC的强大功能。 It is currently used by the WebRTC version of Google Hangouts. 它目前由Web Hang使用的WebRTC版本使用。 You can read: How does Hangouts use WebRTC . 您可以阅读: 环聊如何使用WebRTC

Agreed that this is an off-topic question, but I recently bumped into the same issue/requirement, and my solution was to use MultiStreamRecorder from WebRTCExperiments. 同意这是一个偏离主题的问题,但我最近碰到了相同的问题/要求,我的解决方案是使用来自WebRTCExperiments的MultiStreamRecorder This basically gives you a "blob" of the audio/video stream every X seconds, and you can upload this to your ASP.NET MVC or WebAPI controller as demonstrated here . 这基本上给你一个每X秒的音频/视频流的“斑点”,并且证明你可以上传你的ASP.NET MVC或控制器的WebAPI 这里 You can either live-process the blobs on the server part by part, or concatenate them to a file and then process once the stream stops. 您可以按部分对服务器上的blob进行实时处理,也可以将它们连接到文件,然后在流停止后进行处理。 Note that the APIs used in this library are not fully supported in all browsers, for example there is no iOS support as of yet. 请注意,并非所有浏览器都完全支持此库中使用的API,例如,目前还没有iOS支持。

My server side analysis required user to speak full sentences, so in addition I used PitchDetect.js to detect silences in the audio stream before sending the partial blob to server. 我的服务器端分析要求用户说出完整的句子,所以另外我使用PitchDetect.js在将部分blob发送到服务器之前检测音频流中的静音。 With this type of setup, you can configure your client to send partial blobs to server after they finish talking, rather than every X seconds. 使用这种类型的设置,您可以将客户端配置为在完成通话后将部分blob发送到服务器,而不是每隔X秒。

As for achieving 1-2 second delay, I would suggest looking into WebSockets for delivery, rather than HTTP POST - but you should play with these options and choose the best channel for your requirements. 至于实现1-2秒延迟,我建议查看WebSockets以进行交付,而不是HTTP POST - 但您应该使用这些选项并根据您的要求选择最佳渠道。

Most IP cameras these days will use H264 encoding, or MJPEG. 目前大多数IP摄像机都使用H264编码或MJPEG。 You aren't clear about what sort of cameras are being used. 您不清楚正在使用什么类型的相机。

I think the real question is, what components are out there for authoring/editing video and which video format does it require. 我认为真正的问题是,有哪些组件用于创作/编辑视频以及它需要哪种视频格式。 Only once you know what format you need to be in, can you transcode/transform your video as necessary so you can handle it on the server side. 只有当您知道需要使用的格式时,才能根据需要对视频进行转码/转换,以便在服务器端处理。

There are any number of media servers to transform/transcode, and something like FFMPEG or Unreal Media Server can transform, decode, etc on server side to get it to some format you can work with. 有许多媒体服务器可以进行转换/转码,像FFMPEG虚幻媒体服务器这样的东西可以在服务器端进行转换,解码等,以使其达到您可以使用的某种格式。 Most of the IP cameras I have seen just use an H264 web based browser player. 我见过的大多数IP摄像机都使用基于H264网络的浏览器播放器。

EDIT: Your biggest enemy is going to be your delay. 编辑:你最大的敌人将是你的延迟。 1-2 seconds of delay is going to be difficult to achieve. 1-2秒的延迟将很难实现。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM