jimmybow / visdcc

Dash Core Components for Visualization.
MIT License
144 stars 18 forks source link

Adding Event to get output #22

Closed ankanbhunia closed 4 years ago

ankanbhunia commented 4 years ago

I have some javascript code to record videos using the user's webcam: I'm using run_js function to run the code inside a callback. Here is the js code:


VIDEO_HTML = 

var my_div = document.createElement("DIV");
var my_p = document.createElement("P");
var my_btn = document.createElement("BUTTON");
var my_btn_txt = document.createTextNode("Press to start recording");

my_btn.appendChild(my_btn_txt);
my_div.appendChild(my_btn);
document.body.appendChild(my_div);

var base64data = 0;
var reader;
var recorder, videoStream;
var recordButton = my_btn;

var handleSuccess = function(stream) {
  videoStream = stream;
  var options = {  
    mimeType : 'video/webm;codecs=vp9'  
  };            
  recorder = new MediaRecorder(stream, options);
  recorder.ondataavailable = function(e) {            
    var url = URL.createObjectURL(e.data);
    var preview = document.createElement('video');
    preview.controls = true;
    preview.src = url;
    document.body.appendChild(preview);

    reader = new FileReader();
    reader.readAsDataURL(e.data); 
    reader.onloadend = function() {
      base64data = reader.result;
    }
  };
  recorder.start();
  };

recordButton.innerText = "Recording... press to stop";

navigator.mediaDevices.getUserMedia({video: true}).then(handleSuccess);

function toggleRecording() {
  if (recorder && recorder.state == "recording") {
      recorder.stop();
      videoStream.getVideoTracks()[0].stop();
      recordButton.innerText = "Saving the recording... Please wait!"
      setProps({ 
            'data': {'data':base64data 
                      }
        })

  }
}

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

var data = new Promise(resolve=>{
recordButton.onclick = ()=>{

toggleRecording()

sleep(2000).then(() => {
  // wait 2000ms for the data to be available

  resolve(base64data)
});

}
});

I want the recorded "data" from the js code to be used as input to another callback in my dash app. I've seen this https://github.com/jimmybow/visdcc/blob/master/example/Run_js/Add_event_and_callback.py, but couldn't find out a way to do that.