मैं .NET Core Blazor का उपयोग करके एक वीडियो-स्ट्रीमिंग एप्लिकेशन बनाना चाहता हूं। एक वेबसाइट में लाइव-वेबकैम को लागू करने के लिए एक साधारण उपयोगकेस होगा। अब तक मेरा समाधान ओपनसीवी के वीडियो कैप्चर (OpenCvSharp4.Windows 4.3) और एक एसिंक विधि पर आधारित है जो छवि स्रोत को लगातार Base64 string में परिवर्तित करता है। यह महत्वपूर्ण है कि वीडियो सर्वर से आ रहा है। openCV का उपयोग करना वैकल्पिक है। यह मेरा घटक है:
@page "/webcam"
@using OpenCvSharp
<div class="top-row">
<button type="button" class="btn btn-dark" @onclick="CaptureWebCam">Capture</button>
</div>
<img src="@_imgSrc" />
@code {
private string _imgSrc;
// Start task for video capture
protected async Task CaptureWebCam()
{
// 0 = default cam (mostly webcam)
using (var capture = new VideoCapture(0))
{
// set every image in videocapture as image source
using (var image = new Mat())
{
while (true)
{
capture.Read(image);
// encode image with chosen encoding format
string base64 = Convert.ToBase64String(image.ToBytes());
_imgSrc = $"data:image/png;base64,{base64}";
await Task.Delay(1);
StateHasChanged();
}
}
}
}
}
मेरी समस्या है:
प्रत्येक छवि के लिए base64 स्ट्रिंग का उपयोग करना बिल्कुल भी अच्छा नहीं है! मैंने जो शोध किया उससे मुझे अपने कच्चे वीडियो को एक mp4 कंटेनर (उदाहरण के लिए ffmpeg का उपयोग करके) में बदलना चाहिए और फिर HLS या RTSP प्रोटोकॉल का उपयोग करके एक html <video> तत्व में स्ट्रीम करना चाहिए। : DIY: वीडियो स्ट्रीमिंग सर्वर
यह वह जगह है जहां मैं फंस गया हूं, क्योंकि मुझे .net core blazor का उपयोग करके किसी वेबसाइट पर mp4 स्ट्रीम करने के लिए एक अच्छा फ्रेमवेवर्क/लाइब्रेरी/एपीआई नहीं मिल रहा है। कोई सुझाव?
मुझे VLC और WebRTC जैसा कुछ मिला लेकिन मुझे यकीन नहीं है कि यह काम करेगा। साथ ही मुझे पता चला कि SignalR पर WebRTC के संयोजन में स्ट्रीमिंग काम कर सकती है: SignalR के साथ वीडियो स्ट्रीम करना संभव है?
1 उत्तर
मैं एमजेपीईजी प्रारूप और टैग में एक स्ट्रीम का उपयोग कर रहा हूं। एपीकंट्रोलर के माध्यम से स्ट्रीम दें जहां जेपीईजी फ्रेम की एक धारा बनाई जाती है। स्थानीय नेटवर्क में काम किया वीडियो 800x600 30 एफपीएस।
[ApiController]
[Route("api/[controller]")]
public class CameraController : ControllerBase, IDisposable
{
...
[HttpGet("{id}/[action]")]
public async Task<FileStreamResult> Live(string id, string channel)
{
_stream = new SmartMjpegStream(channel);
_cameras.Add(Id = id, this);
return await Task.FromResult(new FileStreamResult(_stream, SmartMjpegStream.ContentType));
}
...
}
और इसके बाद CameraView.razor . में
<img src="camera/live?channel=rtsp://admin:12345@192.168.1.100/axis-media/media.amp" alt="..." />