record video and save in folder

Sign in to vote

User-939850651 posted

Hi Gopi.MCA,

Gopi.MCA

In html5 I want simple video recording button1 = start recording button2 = stop recording and upload to server folder for example videouplaodedfolder and it should be in 3gp or mp4 format with less size..

how to do this please give me full code

According to your description, I think you could try to use RecordRTC: WebRTC audio/video recording | RecordRTC.js.

And according to different needs, there are different examples for reference, when you stop recording, you can send the recorded data to the server through ajax and save it. Something like this:

function stopRecordingCallback() {
        video.src = video.srcObject = null;
        video.src = URL.createObjectURL(recorder.getBlob());
        //Start to save blob data to server folder 
        var data = recorder.getBlob();
        reader = new FileReader();
        reader.readAsDataURL(data);
        reader.onload = function (event) {
            var arrayBuffer = event.target.result;
            $.ajax({
                type: "POST",
                url: "WebForm1.aspx/Save",
                data: '{ "blobData": "'+arrayBuffer+ '"}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    // Do something here
                    console.log("upload vedio file" + msg.d);
                }
            });
        };
        //End save file operation
        recorder.screen.stop();
        recorder.destroy();
        recorder = null;

        document.getElementById('btn-start-recording').disabled = false;
    }

[WebMethod]
        public static string Save(string blobData)
        {
            //blobData: base64 data
            //save video file to server
            //...
            return "success";
        }

For more details code, you could refer to RecordRTC | screen-recording.

Best regards,

Xudong Peng

Monday, May 31, 2021 7:53 AM

0

Sign in to vote

User-807418713 posted

hello

I'm new to this can you make one aspx page and one folder name "Video Upload"

on button click the camera should start capturing video recording and when user click stop/upload button then recorded camera video should save to "Video Upload" Folder.

Thanking You

Monday, May 31, 2021 8:33 AM

0

Sign in to vote

User-939850651 posted

Hi Gopi.MCA,

Sorry, due to some reasons, I cannot reply in time.

Using the conventional MediaStream Recording API can also achieve the requirements you describe.

A simple demo:

<head runat="server">
    <title>Demo</title>
    <style>
        #video {
            border: 1px solid #999;
            width: 98%;
            max-width: 860px;
        }

        .error {
            color: red;
        }

        .warn {
            color: orange;
        }

        .info {
            color: darkgreen;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <p>
                This example shows you the contents of the selected part of your display.
        Click the Start Capture button to begin.
   
            </p>

            <p>
                <input type="button" id="start" value="Start Capture" />&nbsp;
        <input type="button" id="stop" value="Stop Capture" />
            </p>

            <video id="video" autoplay="autoplay"></video>
            <br />
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
            <script>
                const videoElem = document.getElementById("video");
                const startElem = document.getElementById("start");
                const stopElem = document.getElementById("stop");

                // Options for getDisplayMedia()

                var displayMediaOptions = {
                    video: {
                        cursor: "always"
                    },
                    audio: false
                };

                // Set event listeners for the start and stop buttons
                startElem.addEventListener("click", function (evt) {
                    startCapture();
                }, false);

                stopElem.addEventListener("click", function (evt) {
                    stopCapture();
                }, false);

                var stream = null;

                async function startCapture() {
                    try {
                        stream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
                        videoElem.srcObject = stream;

                        let recorder = new MediaRecorder(stream);
                        //console.log(recorder);
                        let chunks = [];
                        recorder.start();
                        recorder.ondataavailable = event => {
                            if (event.data.size > 0) {
                                chunks.push(event.data)
                            }
                            console.log(chunks);
                        }

                        recorder.onstop = () => {
                            const blob = new Blob(chunks, {
                                type: 'video/mp4'
                            })

                            chunks = [];
                            reader = new FileReader();
                            reader.readAsDataURL(blob);
                            reader.onload = function (event) {
                                var arrayBuffer = event.target.result;
                                //console.log(arrayBuffer);
                                $.ajax({
                                    type: "POST",
                                    url: "RecordAndSave.aspx/Save",
                                    data: '{ "blobData": "' + arrayBuffer + '"}',
                                    contentType: "application/json; charset=utf-8",
                                    dataType: "json",
                                    success: function (msg) {
                                        // Do something here
                                        console.log("upload vedio file" + msg.d);
                                    }
                                });
                            };
                        }
                        //console.log(stream);
                        dumpOptionsInfo();
                    } catch (err) {
                        console.error("Error: " + err);
                    }
                }

                function stopCapture(evt) {
                    let tracks = videoElem.srcObject.getTracks();
                    tracks.forEach(track => track.stop());
                    videoElem.srcObject = null;
                }

                function dumpOptionsInfo() {
                    const videoTrack = videoElem.srcObject.getVideoTracks()[0];
                }
    </script>
        </div>
    </form>
</body>

public static string path = string.Empty;
        protected void Page_Load(object sender, EventArgs e)
        {
            path = Server.MapPath("/videouplaodedfolder");
        }

        [WebMethod]
        public static string Save(string blobData)
        {
            blobData = blobData.Replace("data:video/mp4;base64,", "");

            byte[] resource = Convert.FromBase64String(blobData);
            FileInfo file = new FileInfo(path+"\\TestVideo.mp4");
            using (Stream sw = file.OpenWrite())
            {
                sw.Write(resource, 0, resource.Length);
                sw.Close();
            }
            return "success";
        }

And you need to set its size in web.config according to the situation.

<system.web.extensions>
    <scripting>
      <webServices>
        <jsonSerialization maxJsonLength="50000000"/>
      </webServices>
    </scripting>
  </system.web.extensions>

I have tested it and it works very well. Hope this can help you.

Best regards,

Xudong Peng

Wednesday, June 9, 2021 1:21 AM

Asked by:

record video and save in folder

Question

All replies

Gopi.MCA