How to set up a simple Ziggeo recorder and player page with C#
With Ziggeo API (https://ziggeo.com), you are able to integrate video recording and playback with as few as two lines of code in your site, service or app. In this tutorial, you will learn how to create your first Ziggeo recorder/player app.
Pre-Requisites: Before we start, we need to integrate the Newtonsoft.Json library ( Full documentation on how to download, set up, and integrate this library can be found here
Creating a Web application project and a Page
Let’s learn how to create a Web application project and add a new page to it. That page will contain the HTML code for your Ziggeo implementation.
To create a Web application project
- Open Microsoft Visual Studio
- On the File menu, select New Project
The New Project dialog box appears.
- Select the Templates -> Visual C# -> Web templates group on the left.
- Choose the ASP.NET Web Application template in the center column.
- Name your project ZiggeoProject and click the OK button.
- Next, select the ِEmpty template and click the OK button to create the project.
Creating a new ASP.NET Page
When you create a new Web application using the ASP.NET Web Application project template, Visual Studio adds an ASP.NET page named Default.aspx, as well as several other files and folders. You can use the Default.aspx page as the home page for your Web application. However, for this tutorial, we will create and work with a new page.
To add a page to the Web application
- Close the Default.aspx page. To do this, click the tab that displays the file name and then click the close option.
- In Solution Explorer, right-click the Web application name (in this tutorial the application name is ZiggeoProject), and then click Add -> New Item. The Add New Item dialog box will be displayed.
- Select the Visual C# -> Web templates group on the left. Then, select Web Form from the middle list and name it ZiggeoRecorder.aspx.
- Click Add to add the web page to your project.Visual Studio which creates the new page and opens it.
Adding HTML to the Page, embedding Ziggeo recorder and player
Now you have a new web page open, delete all the pre-existing code on the page, and build your own HTML page with Ziggeo code implemented in it. You can combine both the player and recorder code on the same page, however, for this tutorial, we will create a separate page for each.
Recorder page:
For the recorder page, we’re going to create a simple HTML blank page, with Ziggeo Recorder embedded. To do this, we’re going to follow the steps below:
We need to add the following assets to the <head> part in our page:
Then, we need to specify our api token (also in the <head> part):
<script>
var app = new ZiggeoApi.V2.Application({ token:"APPLICATION_TOKEN" });
</script>Now that we have this covered, we simply need to add the <ZiggeoRecorder> tag inside the page body:
<ziggeorecorder></ziggeorecorder>We can then add any special attributes to customize the recorder. Adding all that together, Our full code should look like this:
<!DOCTYPE html>
<html>
<head><link rel="stylesheet" href="<//assets-cdn.ziggeo.com/v2-stable/ziggeo.css>" /> <script src="<//assets-cdn.ziggeo.com/v2-stable/ziggeo.js>"> </script><script>
var app = new ZiggeoApi.V2.Application({ token:"APPLICATION_TOKEN" });
</script> <!-- CHANGE THIS to your application token -->
</head>
<body>
<ziggeorecorder
ziggeo-width=640
ziggeo-height=480
id="ziggeo-recorder">
</ziggeorecorder>
</body>
</html>
Running the Page
To make sure that everything is working as expected, we will first run the page.
- In Solution Explorer, right-click ZiggeoRecorder.aspx and select Set as Start Page.
- Press CTRL+F5 to run the page.
The page is displayed in the browser. Although the page we created has a file-name extension of .aspx, it currently runs like any HTML page.
To display a page in the browser you can also right-click the page in Solution Explorer and select View in Browser.
- Close the browser to stop the Web application.
Player page:
As mentioned above, you can combine both Ziggeo Player and Recorder in a single page, but we’re going to create a new page to implement the player.
To create a new page, follow the same process as Creating a new ASP.NET Page, once we’ve set up a new page, we can then add the same header element as the recorder page, and the player tag in the page body:
<ziggeoplayer > </ziggeoplayer>Just like the recorder, we can optionally add attributes to tweak and customize the recorder. Now, our full recorder code should look like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="<//assets-cdn.ziggeo.com/v2-stable/ziggeo.css>" />
<script src="<//assets-cdn.ziggeo.com/v2-stable/ziggeo.js>"></script>
<script>
var app = new ZiggeoApi.V2.Application({ token:"APPLICATION_TOKEN" });
</script> <!-- CHANGE THIS to your application token --></head>
<body>
<ziggeoplayer
ziggeo-video="_sample_video"
ziggeo-width=320 ziggeo-height=180
ziggeo-theme="modern"
ziggeo-themecolor="red">
</ziggeoplayer>
</body>
</html>
We can now run this page to test that it’s working as expected.
And that’s it! It’s really that simple to use Ziggeo! For more information about Ziggeo API, SDKs, and full documentation, please visit ziggeo.com/docs
✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.
