'Real time video uploading (getMediaRecorder) to the server

What is the best way to upload video to the server ? Currently during recording we receiving chunks, and trying to do an uploading with socket.io which is create a lot of issue.

I wondering is it possible to stream from browser to server with webRTC somehow ? or maybe there is more elegant way to transfer video to the server in real time ?

Solution 1:^[1]

You can send local video stream to remote server by webrtc, local video include local camera video, screen sharing and HTMLMediaElement.captureStream

Here is whole exsample for send local camera stream and video element to remote:

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    // display local video file
    <video id="video_file" src="./assets/sample-mp4-file.mp4" loop controls></video>
    <br/>
    // trigger start to send local camera video
    <button id="send_camera">send local camera video</button>
    <div id="remote_video" style="width: 480px; height: 360px;"></div>
    <script>let p1, p2;
        function playRemoteVideo(track) {
            var ele = document.createElement('video');
            ele.srcObject = new MediaStream([track]);
            ele.autoplay = true;
            document.getElementById('remote_video').appendChild(ele)

        }
        async function sendByWebRTC(track) {
            p1 = new RTCPeerConnection({
                iceServers: [
                    {
                        urls: 'stun:stun.l.google.com:19302',
                    },
                ],
            });
            p2 = new RTCPeerConnection({
                iceServers: [
                    {
                        urls: 'stun:stun.l.google.com:19302',
                    },
                ],
            });

            p2.ontrack = (e) => {
                console.log('remote peer have track', e);
                playRemoteVideo(e.track)
            };

            // ensure exchange candidate
            p1.onicecandidate = (e) => {
                if (!!e.candidate) {
                    p2.addIceCandidate(e.candidate);
                }
            };
            p2.onicecandidate = (e) => {
                if (!!e.candidate) {
                    p1.addIceCandidate(e.candidate);
                }
            };

            // add local video track to 
            p1.addTrack(track);
            let offer = await p1.createOffer({
                offerToReceiveAudio: false,
                offerToReceiveVideo: false,
            });
            await p1.setLocalDescription(offer);

            await p2.setRemoteDescription(offer);

            let answer = await p2.createAnswer({
                offerToReceiveAudio: false,
                offerToReceiveVideo: false,
            });
            await p2.setLocalDescription(answer);
            await p1.setRemoteDescription(answer);
        }

        window.onload = function () {
            // bind event to send video element to remote
            document.getElementById('video_file').addEventListener('play', () => {
                console.log('play video file')
                var track = document.getElementById('video_file').captureStream().getVideoTracks()[0]
                sendByWebRTC(track)
            })
            // bind event to send local camera video to remote
            document.getElementById('send_camera').addEventListener('click', () => {
                // send local camera to remote
                navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
                    var track = stream.getVideoTracks()[0]
                    sendByWebRTC(track)
                })
            })
        }
    </script>
</body>

</html>

Click video control.play will send video element to remote.
Click button 'send local camera video' will send local camera to remote.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	shunbo li

'Real time video uploading (getMediaRecorder) to the server

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]