How to get video tag after upload in React?

Nagaraj S Jayaram

• April 19, 2019 11:27
• Edited

We are using React, we need a video tag after uploading the recorded video to store tag Id to our server for further reference, and finding difficulties to get the video tag using React.

sample code :

<ZiggeoRecorder
apiKey={API_KEY}
height={180}
width={320}
onRecording={this.recorderRecording}
onUploading = {this.recorderUploading}
/>

0

• Official comment

  

  Nagaraj S Jayaram

  • April 23, 2019 12:52

  

  We are getting above error for a single recording we resolved it after adding the line "onRef={ref => (this.child = ref)}" in <ziggeorecorder>, and change from "let properties = this.recorderInstance.get();" to "let properties = recorderInstance.get();" (removed this keyword, then getting token).

  But when we use video and screen recorder both we are getting null.

  sample code :

  <ZiggeoRecorder
             apiKey={apiKey}
             onRef={ref => (this.child = ref)}
             id="screenRecorder"
             framerate={1}
             countdown={0}
             allowscreen={true}
             allowrecord={false} // Optional you can even set it to true
             allowupload={false} // Optional you can even set it to true
             chrome_extension_id="meoefjkcilgjlkibnjjlfdgphacbeglk"
             chrome_extension_install_link="https://chrome.google.com/webstore/detail/ziggeo-screen-capture/meoefjkcilgjlkibnjjlfdgphacbeglk/related"
             opera_extension_id="dnnolmnenehhgplebjhbcmfdbaabkepm"
             opera_extension_install_link="https://addons.opera.com/en/extensions/details/3d46d4c36fefe97e76622c54b2eb6ea1d5406767/"
             onVerified={this.recorderVerified}
         />
         <ZiggeoRecorder
             id="recorder1"
             ziggeo-popup ="true"
             apiKey={apiKey}
             onRef={ref => (this.child = ref)}
             height={this.state.recorder.height}
             width={this.state.recorder.width}
             onVerified={this.recorderVerified1}
         />
  
  recorderVerified = (embedding ) => {
  let recorderInstance = this.child.recorderInstance();
  let properties = recorderInstance.get();
  console.log('token1' + properties);
  };
  
  recorderVerified1 = (embedding ) => {
  let recorderInstance = this.child.recorderInstance();
  let properties = recorderInstance.get();
  console.log('token2' + properties['video'] );
  };
  
  
  
  
  

   
• 

  Rashad Aliyev

  • April 25, 2019 08:10
  • Edited

  Hi Nagaraj,

  Could you please, try to give different child name for each Recorder Component like this.child & this.child1 ? As 'this' is context of the parent Component not Recorder itself.

  We have tested it was working also on that way you tried to do. But only difference you'll get the one instance not different.

  Below are images showing difference. 

  The same child instance

  

  Different child instances

  

   

  recorderVerified = (embedding) => {
    let _recorder = this.child.recorderInstance();
    console.log('INST 1', _recorder);
    _recorder.application.videos.get(_recorder.get('video')).success(function (data) {
       console.log('data', data);
    });
    console.log('Recorder onRecorderVerified');
  };
  
  recorderVerified1 = (embedding) => {
    let _recorder = this.child.recorderInstance();
    console.log('INST 2', _recorder);
    _recorder.application.videos.get(_recorder.get('video')).success(function (data) {
      console.log('data', data);
    });
    console.log('Recorder onRecorderVerified');
  };
  
  render() {
  return (
  <section className="recorder-page">
  <ZiggeoRecorder
    id="screenRecorder"
    apiKey={API_KEY}
    onRef={ref => (this.child = ref)}
    framerate={1}
    countdown={0}
    allowscreen={true}
    allowrecord={false} // Optional you can even set it to true
    allowupload={false} // Optional you can even set it to true
    chrome_extension_id="meoefjkcilgjlkibnjjlfdgphacbeglk"
    chrome_extension_install_link="https://chrome.google.com/webstore/detail/ziggeo-screen-capture/meoefjkcilgjlkibnjjlfdgphacbeglk/related"
    opera_extension_id="dnnolmnenehhgplebjhbcmfdbaabkepm"
    opera_extension_install_link="https://addons.opera.com/en/extensions/details/3d46d4c36fefe97e76622c54b2eb6ea1d5406767/"
    onVerified={this.recorderVerified}
  />
  <ZiggeoRecorder
    id="recorder1"
    ziggeo-popup ="true"
    apiKey={API_KEY}
    onRef={ref => (this.child = ref)}
    height={this.state.recorder.height}
    width={this.state.recorder.width}
    onVerified={this.recorderVerified1}
  />
  </section>
  );
  }

  1
• 

  Bane

  • April 23, 2019 01:47

  Hi Nagaraj,

  So the way to get the video token would be by using some of the events. My suggestion is the verified event.

  recorderVerified = (embedding ) => {
      console.log('Verified fired');
      let recorderInstance = this.child.recorderInstance();
      let properties = this.recorderInstance.get();
      console.log('token:' + properties['video'] );
  };
  
   <ZiggeoRecorder
  apiKey={API_KEY}
  onVerified={this.recorderVerified}
  />

  Hope this helps :)

  Regards,
  Bane

  0

Please sign in to leave a comment.