So far, we’ve managed to create a playlist and test it out on a test player on Wowza’s server. However, this test player is working on the server’s end and we now need to send this video feed over to the client’s side.
As always, it will help to define the technical terms before we proceed any further. This time, it will be the explanation of the server and client architecture.
Think about it this way. How does your computer receive data from the internet? How does everybody receive the same data? What happens is that data normally lives on your own computer and only you can access it. By uploading to the server, you put the data in a place where other people can access (of course different servers have different restrictions, e.g. passwords).
As of now everything we have done is testing and working on the server side environment, and not the client side. Imagine a restaurant, the server side is essentially like a kitchen while the client side is the customer. We have already tried the dishes within the kitchen, but we need to make sure the dish now arrives at the customer and check how they will receive it. In this case, the server will be wowza streaming engine, and the client will be the website that we are planning to test the player embedding on.
To do this we will be embedding the Wowza player on a website.
First, we need to retrieve the video streaming URL from the server end. This is how the client knows where to go to look for the video stream. We can retrieve this information from the same test players function from wowza streaming engine
We need use the URL “http://[server]/[application]/[stream]/playlist.m3u8″ for the Wowza player. Depending on the streaming protocol and player used the URL has to be different.
Next, open the Wowza player builder page and fill in your login details. This should be the same as the Wowza licenced account.
Under the source stream URL, fill in the URL details that are mentioned above. Click on update preview to test the stream.
If there is a notice ‘Stream source URL doesn’t use a secured HTTP (HTTPS) connection.
To preview the stream, Switch to Player Builder over HTTP. Don’t worry about it as we are still in a test environment.
Select ‘get embed code’. While section 2 and 3 code can be placed wherever you desire, let’s say in a WordPress post. Section 1 requires that you place the code in the head tag of your html file for that same page. while this is fairly straightforward for a simple site, it varies in the method for different kinds of websites.
For this example, I am going to be doing this in word press. First, open the directory where the WordPress site is hosted on (for me, I am using wamp). my directory is therefore ‘C:\wamp64\www\testwebsite\wordpress’. Here I am going to open the specific wordpress theme that I am using.
Under wp-content > themes > twentyseventeen (the theme that I am using), open the file header.php in any text editor you desire.
insert the code in section one between to 2 head tags <head> and </head>
And there we go! your client side website should now be able to play a livestream player from wowza!
Good! Will read in more detail tomorrow morning. DK, can you resize the images so they are larger and all provide a line break between each paragraph and the image, above and below. This will provide for a much more readable post. Please do that today before I read in the morning. Thanks!