Adding the Pertinent Features
To add features to the screen recorder, put the following script in your index.html
file:
Be sure to replace the variablesCLOUDINARY_UPLOAD_PRESET
, CLOUDINARY_API_KEY
, andCLOUDINARY_CLOUD_NAME
with their values for your Cloudinary account. To learn how to obtain those values, see the next section.
Note the following in the script:
With lines 4 and 6, you obtain the button and video elements you created previously in the interface.
Line 8 assigns a function to be executed when you click the recorder button. This function accesses the user's display and then assigns the stream from there to the
srcObject
property of thevideoElement
with this code snippet:
What is being recorded on your screen then becomes visible. When you run the demo app, you'll see the display, as in this example:
The next section details how to connect a recording with Cloudinary. Afterwards, you can store recordings in the Cloudinary Media Library, gaining access to a wide array of capabilities for manipulating videos.
Last updated