Post

3 followers Follow
0
Avatar

How to get video tag after upload in React?

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}
/>

Nagaraj S Jayaram

Official comment

Avatar

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'] );
};




 

Nagaraj S Jayaram

Please sign in to leave a comment.

3 comments

0
Avatar

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

Bane 0 votes
1
Avatar

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>
);
}
Rashad Aliyev 1 vote