用户相机通过ASP.NET CORE API上传和流式传输

时间:2019-11-20 06:21:09

标签: asp.net asp.net-core signalr

我需要将视频从用户摄像机流传输到另一个用户。 .NET Core堆栈中最简单的解决方案是什么?我们的应用程序位于asp mvc core 2.2中,我们将很快升级到3.0。

我有简单的Java脚本代码来获取摄像机流。但是,如何连续将它们上传到服务器,然后再将其流式传输到另一个客户端?我必须使用SignalR或其他Websocket技术吗?

        视频源:     

<video autoplay muted playsinline></video>
<p></p>

<script>
    var videoSelect = document.querySelector('select#videoSource');
    videoSelect.onchange = getStream;

    getStream().then(getDevices).then(gotDevices);

    function getDevices() {
        return navigator.mediaDevices.enumerateDevices();
    }

    function gotDevices(deviceInfos) {
        console.log('Available input and output devices:', deviceInfos);
        for (const deviceInfo of deviceInfos) {
            const option = document.createElement('option');
            option.value = deviceInfo.deviceId;
            if (deviceInfo.kind === 'videoinput') {
                option.text = deviceInfo.label || `Camera ${videoSelect.length + 1}`;
                videoSelect.appendChild(option);
            }
        }
    }

    function getStream() {
        if (window.stream) {
            window.stream.getTracks().forEach(track => {
                track.stop();
            });
        }
        var videoSource = videoSelect.value;
        var constraints = {
            audio: true,
            video: {
                deviceId: videoSource ? { exact: videoSource } : undefined,
                width: {
                    min: 1280,
                    max: 1920
                },
                height: {
                    min: 720,
                    max: 1080
                },
                frameRate: 10
            }
        };
        return navigator.mediaDevices.getUserMedia(constraints).then(gotStream).catch(handleError);
    }

    function gotStream(stream) {
        videoSelect.selectedIndex = [...videoSelect.options].findIndex(option => option.text === stream.getVideoTracks()[0].label);
        var videoElement = document.querySelector('video');
        videoElement.srcObject = stream;
        videoElement.onloadedmetadata = function (e) {
            videoElement.play();
        };
    }

    function handleError(error) {
        var errorP = document.querySelector('p');
        errorP.innerHTML = error;
    }
</script>

0 个答案:

没有答案