[Web] C# stream camera to web

소개

웹 카메라를 사용하여 영상 스트리밍을 위한 코드는 다양한 분야에서 활용될 수 있습니다. 본 글에서는 C#을 사용하여 카메라 영상을 웹으로 스트리밍하는 기본 코드를 살펴볼 것입니다.

코드 설명

index.html

    <canvas id="videoCanvas" width="640" height="480"></canvas>
    <script>
        var canvas = document.getElementById('videoCanvas');
        var context = canvas.getContext('2d');
        var image = new Image();

        image.onload = function () {
            context.drawImage(image, 0, 0, canvas.width, canvas.height);
            // 이미지가 로드되었을 때만 캔버스에 그리기
            context.drawImage(image, 0, 0);
        };

        image.src = '/api/stream';

        setInterval(function () {
            context.drawImage(image, 0, 0, canvas.width, canvas.height);
        }, 30);
    </script>

아래의 코드는 카메라에서 RTSP URL을 사용하여 비디오 스트림을 캡처하고 웹으로 전송합니다.

[HttpGet("stream")]
public async Task GetVideoStream()
{
    Response.ContentType = "multipart/x-mixed-replace; boundary=frame";

    using var capture = new VideoCapture(0);
    using var memoryStream = new MemoryStream();

    while (true)
    {
        using var frame = new Mat();
        capture.Read(frame);
        if (frame.Empty()) continue;

        Cv2.Flip(frame, frame, FlipMode.Y);

        frame.ToBitmap().Save(memoryStream, System.Drawing.Imaging.ImageFormat.Jpeg);
        var buffer = memoryStream.ToArray();

        await Response.Body.WriteAsync(Encoding.ASCII.GetBytes("\r\n--frame\r\n"));
        await Response.Body.WriteAsync(Encoding.ASCII.GetBytes("Content-Type: image/jpeg\r\n\r\n"));
        await Response.Body.WriteAsync(buffer, 0, buffer.Length);

        memoryStream.SetLength(0);
        await Response.Body.FlushAsync();
    }
}

핵심 부분

• VideoCapture는 카메라나 비디오 파일에서 프레임을 캡처합니다.
• Mat 객체는 OpenCV에서 이미지를 표현하며, 각 프레임을 처리합니다.
• Cv2.Flip은 이미지를 좌우 반전합니다.
• 마지막으로 메모리 스트림을 사용하여 JPEG 이미지로 저장하고, 이를 웹에 전송합니다.

마무리

이 코드는 C#과 OpenCV 라이브러리를 사용하여 웹 카메라의 영상을 웹에 스트리밍하는 간단한 예시입니다. 프로젝트에 맞게 조정하거나 확장하여 사용할 수 있습니다.

Note: 만들고나니 내것이 아니었다.