save captured video on backend in django

[Afsaan]

Hello muaz. I'm pythonic but I know javascript little bit, I want to store video on the backend in Django please help me m finding very hard to do it. I don't know how to get posted stream data one-by-one on backend

[yodaljit]

hi @Afsaan . If you want to record the video and send it to django backend then you can use recordTRC to record your live stream and them send it to django backend through ajax when you stop the live stream. I've used this method for my website and it works.

                        var connection = new RTCMultiConnection();
                        var video = document.querySelector('#video')
                        // this line is VERY_important
                        connection.socketURL = 'https://rtcmulticonnection.herokuapp.com:443/';

                        // if you want audio+video conferencing
                        connection.session = {
                            audio: true,
                            video: true,
                            oneway: true
                        };
                        connection.mediaConstraints = {
                            video: true,
                            audio: true
                        };
                        connection.open('coach-stream')
                            
                        
                        connection.sdpConstraints.mandatory = {
                            OfferToReceiveAudio: false,
                            OfferToReceiveVideo: false
                        };
                        var blob
                        connection.onstream=function(event){
                            $('#count').html(connection.getAllParticipants().length+' <i class="fa fa-eye"></i>')
                            if( event.type === 'local' ){
                                video.addEventListener("pause", function(){
                                    connection.streamEvents.selectFirst({local: true}).stream.mute();
                                });
                                
                                video.addEventListener("play", function(){
                                    connection.streamEvents.selectFirst({local: true}).stream.unmute();
                                });
                        }
                            sid = event.streamid
                            video.srcObject = event.stream
                            var recorder = RecordRTC(event.stream, {type:'video'})
		            recorder.startRecording();

                         //stop button wiith id stp
                        $('#stp').on('click', function(e){
                        e.preventDefault();
                        connection.removeStream('video')
                        connection.removeStream('audio')
                        })
                           
                            var stprec = document.querySelector('#stp')
                            stprec.onclick = function(){
                                video.srcObject = null
                                video.poster = "{% static 'dash/images/ended.png' %}"
                                connection.getAllParticipants().forEach(function(pid) {
                                    connection.disconnectWith(pid);
                                });
                                connection.attachStreams.forEach(function(localStream) {
                                    localStream.stop();
                                });

                                // close socket.io connection
                                connection.closeSocket();
                                recorder.stopRecording(function(){
                                    blob = recorder.getBlob();
                                    console.log(blob)
                                    
                                    var fd = new FormData();
                                    fd.append("firstName", "John");
                                    fd.append('blob', blob, $('#stream-title').html()+'.mp4');
                                    for (var pair of fd.entries()) { 
                                        console.log(pair[0] + '–' + pair[1]) 
                                    }; 
                                    /*var xhr = new window.XMLHttpRequest();
                                    
                                    xhr.upload.addEventListener("load", function(evt) {
                                      progress.css('background-color', 'green').delay(2000)
                                      

                                    }, false);*/
                                    $.ajax({	
                                      type: 'POST',
                                      url: "{% url 'instructor_live' instructor.id %}",
                                      headers: {
                                        'X-CSRFToken': '{{csrf_token}}'
                                      },
                                      data: fd,

                                      //code to display a progress bar
                                      xhr: function() {
                                        var xhr =  $.ajaxSettings.xhr() ;
                                        xhr.upload.onloadstart = function(evt){
                                          console.log('load -> '+xhr.status)
                                          console.log(evt)
                                        };
                                        xhr.upload.onprogress =  function(evt) {
                                          console.log('progress -> '+xhr.status)
                                          console.log(evt.loaded/evt.total * 100)
                                          var percent = Math.round(evt.loaded/evt.total * 100)
                                          console.log(percent);
                                          $('#smodal').modal('show')
                                          $('#progress-bar').css('background-color', '#9c27b0')
                                          $('#progress-bar').css('width', percent+'%')
                                          $('#progress-bar').css('height', 10)
                                          $('#stext').html(percent+'%')
                                          
                                          
                                        };
                                        xhr.upload.onload = function(){
                                          $('#stext').html('Lecture saved!!');
                                          $('#smodal').modal('toggle')
                                        };
                                          return xhr;
                                      },
                                      processData: false,
                                      contentType: false,
                                      success:function(){
                                        console.log('done!')
                                      }
                                    });
                                });
                            };
                        };
                        }
                    });

Hope this helps. And sorry for the code format.

[Afsaan]

Thank you @yodaljit i wanted to send video in chunk (after every 4 sec) and in most of the method fps is missing or keeps on varying on different browsers/laptop. Can you help me in this