html5-audioringcentralcall-recording

Is it possible to playback a RingCentral call recording using a HTML5 audio element?


When using the RingCentral Call Log to access call recording audio files, a contentUri is provided in the response.record[x].recording object which points to a binary form of the call audio. The API's Authorization header is still necessary to retrieve this file.

Is it possible to play this back in a web app using a HTML5 audio element so we don't have to host/upload to call audio to our own system. It seems like this would need to avoid using the Authorization header and supply authorization in some other fashion. For example:

<audio src="https://media.ringcentral.com/.../recording/{recordingId}"></audio>

More information on the HTML5 audio element is available here:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio


Solution

  • It is possible to playback a RingCentral call recording with using an HTML5 audio element without downloading and hosting the audio file yourself. Authorization is still required so it must be passed using an approach other than the HTTP header.

    Two approaches include:

    1) Access Token in Query String

    You can append the access token to the media URL as a query parameter so you have something like:

    <audio 
      src="https://media.ringcentral.com/.../{recordingId}?access_token=MyToken">
    </audio>
    

    A caveat with this approach is that the URL will stop working when the access token expires, typically in one hour or less. This is useful for ephemeral links such as time-sensitive links in a chat stream, however, less so if the link needs to be retrieved later. For that, see the following approach.

    2) Access Token in Cookie

    If you want a permanent URL that doesn't expire, you can use a proxy service that manages the authentication for you. One way to do this is to use the RingCentral cookie-based Implicit Grant OAuth flow to transmit the access token to the proxy service. This way, when attempting to retrieve a media file via URL (without token), the proxy service can check if the cookie is present and valid. If it isn't, the proxy service can prompt for a successful Implicit Grant login before forwarding to the call recording media file. An example implementation of this is available here:

    https://github.com/tylerlong/permalink