मेरे पास एक फ्लास्क ऐप है जिसे वीडियो रिकॉर्ड करना है और उस वीडियो को मेरी पायथन स्क्रिप्ट पर वापस भेजने में सक्षम होना चाहिए ताकि डेटाबेस में डाल दिया जा सके। मैंने इसे एक फॉर्म में डालने की कोशिश की है लेकिन मुझे यकीन नहीं है कि मैं इसे सही तरीके से कर रहा हूं। यहाँ मेरा जे एस है

  audio: false, 
  video:true
}; 

if (navigator.mediaDevices === undefined) {
  navigator.mediaDevices = {};
  navigator.mediaDevices.getUserMedia = function(constraintObj) {
      let getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
      if (!getUserMedia) {
          return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
      }
      return new Promise(function(resolve, reject) {
          getUserMedia.call(navigator, constraintObj, resolve, reject);
      });
  }
}else{
  navigator.mediaDevices.enumerateDevices()
  .then(devices => {
      devices.forEach(device=>{
          console.log(device.kind.toUpperCase(), device.label);
          //, device.deviceId
      })
  })
  .catch(err=>{
      console.log(err.name, err.message);
  })
}

navigator.mediaDevices.getUserMedia(constraintObj)
.then(function(mediaStreamObj) {
  //connect the media stream to the first video element
  let video = document.querySelector('video');
  if ("srcObject" in video) {
      video.srcObject = mediaStreamObj;
  } else {
      //old version
      video.src = window.URL.createObjectURL(mediaStreamObj);
  }
  
  video.onloadedmetadata = function(ev) {
      //show in the video element what is being captured by the webcam
      video.play();
  };
  let start = document.getElementById('startbtn');
  let stop = document.getElementById('btnStop');
  let vidSave = document.getElementById('vid2');
  let mediaRecorder = new MediaRecorder(mediaStreamObj);
  let chunks = [];
  
  start.addEventListener('click', (ev)=>{
      mediaRecorder.start();
      console.log(mediaRecorder.state);
  })
  stop.addEventListener('click', (ev)=>{
      mediaRecorder.stop();
      console.log(mediaRecorder.state);
  });
  mediaRecorder.ondataavailable = function(ev) {
      chunks.push(ev.data);
  }
  mediaRecorder.onstop = (ev)=>{
      let blob = new Blob(chunks, { 'type' : 'video/mp4;' });
      for (chunk in chunks) {
        console.log(chunk);
      }
      chunks = [];
      let videoURL = window.URL.createObjectURL(blob);
      vidSave.src = videoURL;
  }
  $.post('/video',
  {share: videoURL}, function(data) {

  })
})
});

और मेरे कुप्पी ऐप में मेरा मार्ग

@main_bp.route('/video' , methods=['GET', 'POST'])
@login_required
def video():
    form = VideoForm()
    if form.validate_on_submit():
        flash('Video Saved Successfully!')
        vid = request.json['share']
        print(jsonify(vid))
        return redirect('home.html')
    return render_template('video.html', form=form, name=current_user.username)```

मेरे पास एक वीडियोफॉर्म क्लास भी है क्योंकि मैं अपने लॉगिन फॉर्म के लिए इसका इस्तेमाल कर रहा हूं लेकिन मुझे वास्तव में यकीन नहीं है कि वीडियो किस तरह से मेरे पास वापस आ रहा है, जैसे जेसन, इमेज इत्यादि। यहां वीडियोफॉर्म है

class VideoForm(FlaskForm):
    video = FileField('img')
    submit = SubmitField('Save Video')

अगर कोई जानता है कि मुझे सही दिशा में इंगित करने के लिए कोई सुझाव कैसे है या कम से कम यह बहुत अच्छा होगा! धन्यवाद

0
Jordan voss 11 जिंदा 2021, 23:50

1 उत्तर

सबसे बढ़िया उत्तर

आप वीडियो को स्थानांतरित करने के लिए या तो "मल्टीपार्ट/फॉर्म-डेटा" प्रकार के एक फॉर्म का उपयोग कर सकते हैं।
इस प्रकार के साथ, डेटा को फ्लास्क में एक फ़ाइल (werkzeug.FileStorage) के रूप में एक्सेस किया जा सकता है।

let formData = new FormData();
formData.append('video', blob, "video.mp4");
$.ajax ({
  url: "/upload",
  type: "POST",
  data: formData,
  processData: false,
  contentType: false,
  success: function(resp){
    console.log(resp);
  }
});
@app.route('/upload', methods=['POST'])
def upload():
    video = request.files.get('video')
    if video: 
          
       # process the file object here! 

       return jsonify(success=True)
    return jsonify(success=False)

एक आसान विकल्प के रूप में, आप डेटा को सर्वर को अपरिष्कृत रूप में भी भेज सकते हैं।
इस मामले में, डेटा पूरे पोस्ट-बॉडी को भरता है और या तो संपूर्ण या स्ट्रीम से लोड किया जा सकता है (werkzeug.LimitedStream)।

$.ajax ({
  url: "/upload",
  type: "POST",
  data: blob,
  contentType: "video/mp4",
  processData: false,
  success: function(resp){
    console.log(resp);
  }
});
@app.route('/upload', methods=['POST'])
def upload():
    if request.headers.get('Content-Type') == 'video/mp4':
        # load the full request data into memory
        # rawdata = request.get_data()
        
        # or use the stream 
        rawdata = request.stream.read()

        # process the data here!

        return jsonify(success=True)
    return jsonify(success=False)
0
Detlef 13 जिंदा 2021, 05:20
बहुत बहुत धन्यवाद!, मैंने आपके पहले उत्तर से video = request.files['video'] का उपयोग करना समाप्त कर दिया, क्या आपको पता है कि इसे /upload पर जाने की आवश्यकता क्यों है और इसे केवल /video में नहीं जोड़ा जा सकता है?
 – 
Jordan voss
20 जिंदा 2021, 03:42
इसे /video में भी जोड़ा जा सकता है, लेकिन फिर आपको request.method का उपयोग करके GET और POST के बीच अंतर करना होगा। व्यक्तिगत रूप से, मैं उन मार्गों को अलग करना पसंद करता हूं जो एचटीएमएल प्रारूप में उत्तर देने वालों से जेसन लौटाते हैं। abort के संयोजन में ब्लूप्रिंट का उपयोग करके, यदि कोई त्रुटि होती है, तो आप संबंधित प्रारूप में उत्तर दे सकते हैं। पंजीकृत त्रुटि हैंडलर ब्लूप्रिंट द्वारा सीमित हैं।
 – 
Detlef
20 जिंदा 2021, 14:35