Skip to main content

"processed" event not working properly?

Danny Valdez

I am using the "processed" event for an application that has been live for a year or two.

ziggeoApp.on("ready", function() {
   var element = document.getElementById('ziggeorecorder');
   var recorder = ZiggeoApi.V2.Recorder.findByElement(element);
 
   recorder.on("processed", function() {
      // do something important here
   });

});

I'm noticing now that after the recorder is initiated, the "processed" event only fires after the FIRST recording is made. If I refresh the page and start a new recording, "processed" does NOT fire. If I hit the "re-record" button and record again, it does NOT fire.

I'm 99% sure I tested all of this behavior before and it used to work as expected, so I assume this is an error after the most recent update?

Note: I am using this JS file--

<script src="https://assets.ziggeo.com/v2-stable/ziggeo.js"></script>

Any help is appreciated. Thanks!

0

Comments

5 comments

Date Votes
  • Official comment
    Bane

    Hi Danny,

    Thank you for including the relevant parts of the code as well as the revision.

    We did not make any changes to the processing event. It should always fire after verified event fires, regardless if it was upload, recording or re-recording.

    What I think might be happening is that you might have 2 different codes for adding recorder and that one of those attaches the event while the other does not.

    To test if something like this is happening can you please add the following code on your page and check in the console what is shown?

    ziggeoApp.embed_events.on("processing", function (embedding, percentage) {
        console.log(percentage);
    }

    This should listen to all processing events from all embeddings on the page even if no event was set for the specific one.

    I am guessing that you are familiar with browser console however just in case it is needed for you or someone else visiting this post, you can see more details about this here: https://ziggeo.com/blog/how-to-find-and-see-things-in-browser-console/

  • Danny Valdez
    • Edited

    Hi Bane,

    Thank you so much for taking the time to respond. I am nearly certain I do not have 2 different codes initiating the recorder. Let me show everything related to Ziggeo on my page:

    In <head>:

    <link rel="stylesheet" href="https://assets.ziggeo.com/v2-stable/ziggeo.css" />

    In <body>:

    <ziggeoaudiorecorder ziggeo-timelimit=300 ziggeo-recordingwidth="1280" ziggeo-recordingheight="720"  ziggeo-width=388 ziggeo-height=218 ziggeo-skipinitialonrerecord=true ziggeo-theme='modern' ziggeo-allowupload=false id='ziggeorecorder'></ziggeoaudiorecorder>

    At bottom of <body>:

    <script src="https://assets.ziggeo.com/v2-stable/ziggeo.js"></script>
<script>
     var ziggeoApp = new ZiggeoApi.V2.Application({
          token: "XXXXXXXXX",
          webrtc_on_mobile: true
     });
</script>

    Later in <script>:

    ziggeoApp.on("ready", function() {
     var element = document.getElementById('ziggeorecorder');
     var recorder = ZiggeoApi.V2.Recorder.findByElement(element);

     recorder.on("rerecord", function () {
          // do something here
     });

     recorder.on("processed", function() {
          console.log("ziggeo processed");
          // do something here
         });

         recorder.on("playing", function () {
              console.log("ziggeo press play");
              // copy of "processed" do something here
         });
    
     $('#linku-voicemail-camera-modal').on('hidden.bs.modal', function (e) {
          recorder.stop();
          })

     $('#linku-voicemail-camera-modal').on('show.bs.modal', function (e) {
          recorder.reset();
     });

});

    That is everything. As you see, there is only the one instance ever made. A couple things to note:

    - I only added the "recorder.on('playing')" function as a bandaid for the "processed" event not firing. I figured most people would listen to their audio before submitting. The "playing" event DOES fire every time as expected. So as long as the user tries listening to their audio once, I can still accomplish what is needed. But it's still not ideal.

    - I tried removing the "recorder.reset()" from the bootstrap modal event-- just to see if that was related. But it made no difference.

    - I also tried entering your code above ("embed_events.on('processed...')"). I was able to see the console.log of the event firing on first record. But nothing after that. Note that I tried changing your embed_event to "playing", and it worked every time I played a recording, as expected.

    - Another piece to note: The recorder itself is also not displaying any "Audio processing" text. I notice after a recording is made, it should state "Uploading", "Verifying", then "Audio Processing" (or something like that). I am not even seeing that last text for these instances-- which is why I was under the impression something was wrong with the processing event as a whole?

    - Last thing to note: I just realized I never specified this is the Audio recorder. Might that make a difference?? Elsewhere in our app we have the normal (video) recorder in use, and the "processed" event fires as expected there.

    Thanks again for your help! It's very much appreciated :)

    0
  • Bane

    Thank you Danny for all of the details, definitely helps.

    Based on everything you wrote there might be some issue with the processed event for the audio recorder then. We have not really change it however it can only help if we try changing the revision to latest just to see if it makes any difference.

    This would be done by removing the stable reference and replaced as:

    <link rel="stylesheet" href="https://assets.ziggeo.com/v2-latest/ziggeo.css" />
    <script src="https://assets.ziggeo.com/v2-latest/ziggeo.js"></script>

    This would just help us to know if in the latest revision there is any difference in workflow.

    Now with that said, since you are using audio recorder I would recommend to change the code into this:

    <ziggeoaudiorecorder ziggeo-timelimit="300" ziggeo-width="100%" ziggeo-skipinitialonrerecord="true" ziggeo-theme="modern" ziggeo-allowupload="false" id="ziggeorecorder"></ziggeoaudiorecorder>

    * I have removed the video related parameters for video resolution and also set the recorder with 100% to make it fluid / responsive. You can always set the width and height as you had if you wanted, just wanted to include this info in case it is interesting.

    I would also recommend changing the header code (where the app token is set) as so:

    <script>
     var ziggeoApp = new ZiggeoApi.V2.Application({
          token: "XXXXXXXXX",
          webrtc_on_mobile: true,
              webrtc_streaming_if_necessary: true
         });
</script>

    In some cases the only way to use WebRTC is to have the streaming implementation of it. Generally I would suggest not using the streaming version directly, however as above it is going to provide you with best experience. The only difference would be seen on the iOS.

    If there is no difference in latest revision then I would suggest listening to `ready_to_play` event instead. It will fire right away after processing is done, signaling that the video can be played.

    ziggeoApp.embed_events.on("ready_to_play", function (embedding) {
	console.log('video is ready for playback');
});

    Hope the above helps, and please do let us know if the processing works for you with the latest revision. In the meantime we will be checking on our side what might be happening with audio recorder and the processing event.

    0
  • Danny Valdez

    Hi Bane,

    Thanks for your tips on better implementation.

    I tried replacing the references with "v2-latest"-- and unfortunately the behavior was the same.

    However-- I changed my code to listen for the "ready_to_play" event instead-- and that worked like a charm! With that in place, I think our app now behaves exactly as expected, and I'm satisfied. Thanks for your help!

    0
  • Bane

    Hi Danny,

    Of course happy to help :)

    Glad to hear that the ready_to_play event works great for you.

    Also just in case it helps, the codes:

    ziggeoApp.embed_events.on("ready_to_play", function (embedding) {
	console.log('video is ready for playback');
});

    and

    recorder.on("ready_to_play", function () {
	console.log('video is ready for playback');
});

    are practically the same. The difference is that the ones added on recorder directly will fire only when that event happens on that specific recorder, while the first example (with ziggeoApp.embed_events.on) will fire for all embeddings on the page which is why they always pass the reference to the embedding.

    0

Please sign in to leave a comment.

Didn't find what you were looking for?

New post