Categories
Uncategorized

Jan from AppyBee, ‘You usually give me a solution that is better than mine.’

Watch the interview on Youtube

We’re happy to present our interview with Jan from AppyBee. Jan is our client who has a history of coming to us, then parting with us, and then coming back. What didn’t Jan like about Fora Soft the first time, why did he decide to return, and what is he thinking about our collaboration now? Read the interview to find out.

Hi Jan, tell us about AppyBee.

It’s an online reservation system. with which we can literally book anything. An online event, a project, group session, or person. On top of that, it’s not only booking. Communicate with clients, send push notifications, messages. Pay by bundles or smart subscriptions.

We, as a B2B company, deliver website widgets and a native app.

We’re currently focused on the sports business. We have many types of businesses, such as co-working spaces, dog-walking services, and solariums.

By sports, did you mean pro sports, like football or basketball or gyms?

Both. The main thing is personal trainers, but one can also book a yoga class, a traditional gym, where you can pay a monthly fee to train. We also provide a solution for the current, corona-affected times. If you can’t buy a subscription, you just pay for a visit. Many types of business models, yeah.

appybee client dashboard
Clients overview on AppyBee

Was Fora Soft your 1st choice?

We started with Fora 6 years ago. We weren’t really experienced back then. We had an idea. We worked with Fora Soft for a couple years and wanted to develop an MVP, and that’s what we went with. The problem is, we went with it for too long, instead of moving on. Fora Soft should’ve advised us to change, but they didn’t do that. And, as I said, we were inexperienced. So things were messy, so we decided to leave Fora Soft. We weren’t happy with them.

We then tried all kinds of solutions. Outstaffing people, freelancers, other agencies, a combination of those. In the end, it was a disaster. We have a saying where I’m originally from: “I had it, I didn’t know. I knew it, I didn’t have it anymore”.

Everything has to fit. It’s not enough to have 1 good developer, 1 good project manager. Everything has to work together: QA, design… We burned a lot of money on it.

During that time there was some info we needed from Fora Soft. What I felt is “oh crap, I need to ask them something but we’re not working anymore..”. But I got all I needed instantly, they helped us a lot.

Then we decided to go back. There was one guy there, a PM who was always there. He gave us confidence that they have it under control.

We changed technology from Bootstrap to React. React.JS, React.Native, PWA (Progressive Web Apps). So, I asked the PM if they can handle it, and he said yeah. And then he explained everything. It felt like it was a Friday evening after a hard week. You sit out there and you have that vodka. 

I should have returned to Fora Soft much earlier. Fora Soft has everything under control. Everything under one roof. It all works perfectly. 

So the story is like a boyfriend and a girlfriend. At first, it doesn’t work out, but then you end up married.

By the way, the reason I worked with an agency is that I just wanted them to solve my problems and handle the answer in the correct and professional way. So, in another company, we worked with 5 different developers within 3 months. There also was a case where we changed a huge architectural part, which was a major update. It was really buggy and slow. In fact, thinking back I’m realizing that it was OK, but back then I didn’t.

In Fora Soft we worked with the same team all the time. For me, it’s a sign that people are happy with the company. They like what they’re doing. You guys grew from 30 people to 90 people (editor’s note: it’s 110 people now 🙂 ). So, before it was a mess. You could say that we had a relationship, it didn’t work out, but then eventually it did. Now we’re back together for 5-6 months, but if I’m being honest, we should’ve done this much earlier. The breakup had to happen, but here we are.

AppyBee client profile
A client profile on AppyBee


Compare before and after working with Fora Soft. Before the first time we worked together, even.

In the beginning, there was some technology, and we didn’t know what the usual way was. What we noticed in the beginning, we had a Trello board. It’s nice, but it’s like this (shows a pack of sticky papers), like moving this around. Then we moved to another company. They taught us that with Jira we can do this, with that we can do that. They overdid it. I felt like I was wasting hours on all that. That was the main difference. I wanted to go back, I was never unhappy with the PM. He’s the good guy, he was also there to help. It’s one of the reasons I went back. He gave me confidence.

Now it’s the same project, which is important. I also got more people who’re helping me. I get to talk with the business analyst, with the designer, with the front-end, and the back-end. It’s a complete solution.

The advantage of Fora Soft is that the team’s communication system is really good.

You talk to each other within teams. It’s difficult to have an agency, an out-staffer, a freelancer. It works, but not efficiently. So here we are with the comparison.

Can you share any measurable figures, such as a number of crushes, clients, or revenue?

The revenue is difficult because another large part is the marketing, and the development cannot change that. 

However, what we do notice is the amount of money we paid to Fora Soft, let’s say, amount X. I don’t wanna name numbers now. I see it now: I pay half and I get double. I got much more value. but not only the value. It’s also the stability. You have confidence. Right now all the things that are not efficient are being solved. I get information back. So I have a confident feeling now. I sleep well now. What I’m saying is, I don’t know it’s not only the measurable things, but I sleep well.

I’m going to tell you about one situation that happened at the previous company. They did work for us. They had one guy that also was working for us from that agency full-time. I asked him questions, but I didn’t get any information back. So we were doing tasks and ping each other within Jira. We had a daily meeting, and I was asking: why aren’t you reacting to any questions we’re asking in Jira? He said, ‘ I turned off the notifications’.

We’re paying a lot of money, it’s full-time, we’re with 5-6 people in a daily meeting and he gives an answer like that. I can tell you one thing. If he said that at the table, I think it would finish differently. You should be happy that it was online and with distance. So with software you cannot just move. It’s not another jacket you could buy. It’s not possible. So you really need to think about which company you are gonna work with and it needs to be a match. You also need to understand a company. The company needs to understand our culture, but we also need to understand the company’s culture and that needs to be a match. That’s really important. The expectations. And what I also noticed is that you have different projects. On one hand, you have short term projects, maybe 1-2 months. Easily done. But you also have work such as what we do. These are long-term projects. Important structural things that one needs to understand and move forward step by step. Test it thoroughly, think about what the clients have, move the priorities, and do some mind exchange, like what we’re doing with the business analyst right now. This was also a big difference. Back then you guys didn’t have that. Fora Soft didn’t have any business analyst that I talked to. But now I get to talk with the assistant project manager. We discuss everything. From time to time when I have an idea. I don’t share it. I want you to let me see what they’re gonna come up with. 

A lot of times, I get a solution from you guys which is better than mine. That’s a good thing.

Sometimes you have the feeling that it doesn’t go fast enough. Those are the important things. And as a company you can’t only point fingers. There’s a lot of things that we can also do better on communication. I also asked the question: what can we do better as an organization? How would you want us to deliver the information? Are we happy with it? Do we need to do something more? This is also important to have a good match. You cannot only say that this needs to be done and then finish. You really need to give correct information so they really understand what you want.

Were there any difficulties while working with Fora Soft, aside from that MVP thing?

The difficulties of working with Fora Soft. What I find difficult, but that’s not only connected to Fora Soft, is that I would like to, meet the team once a month. I’m looking for a situation how I can do that. So just sit down 1 day, 2 days, once a month, maybe once in 3 months to do a structural visit. To sit down with the guys face to face, to see who’s who. And then maybe pop up some ideas, have a board, talk, drink vodka and see what comes out. The difficulty is that you’re always behind the screen and talking. So that’s on the one hand, on the other hand, I cannot think about any difficulties. 

AppyBee founder
Jan, AppyBee founder

Qualities and things such as communication, professionalism, and determination are very important when it comes to any type of project work. Can you maybe rate us on a scale of 10 on those qualities and add something else that you see important here?

– What I would see as the quality, and I can really say that, because I had a lot of companies in between. I had three or four agencies, freelancers, and outstaffing people I worked with. I even had, not gonna name names, really had to fly in the “experts” to have a problem solved, which cost in the meantime. So I can definitely say it’s a 9 on communication.  In the beginning, I didn’t understand why you guys don’t want me to talk immediately with the developer. I do communicate but mostly need to go to the project manager. Back then I didn’t see it. Right now I absolutely see the advantages. because he will arrange everything.  I talk with him daily, and he will divide the work, and it’s efficient. It’s perfectly efficient. He’s always aware of everything that happens, good or bad. And that’s the communication which makes stuff more efficient.

Would you recommend Fora Soft to your friends or colleagues who are interested in a video application?

I would recommend Fora Soft to friends, family, and colleagues. I would not recommend Fora Soft to my competition.

That’s a good one, a good one. Thank you.

I think we have a contract also on that, right? So no competition. I wouldn’t recommend you guys to my competition but I do recommend to my business, my associates, and everybody else.

Maybe anything else that you would like to add?

– No, no, actually not.  As I said, seeing the team, that would maybe change, to have a drink from time to time, advice from Fora Soft. I would also expect we’re gonna organize a specific day for all the clients and whatnot it would be nice to go. And Mr Sapunov brings a big bottle of vodka, some special Russian vodka I’m dying to drink. Other than that I’m all good.

Thank you very much. My sincerest thanks for your time. It was a pleasant experience talking to you, and I will see you later.

Categories
Uncategorized

How to implement Picture-in-Picture mode in React.JS

implement-picture-in-picture

Picture-in-picture (PIP) is a separate browser window with a video that sits outside the page.

You minimize the tab or even the browser where you’re watching the video, and it’s still visible in the little window. It’s handy if you’re broadcasting a screen and want to see your interlocutors or are watching a really interesting show, but someone sent a message.

picture-in-picture-youtube
That’s how Youtube picture-in-picture mode looks like

Let’s figure out how to create this window and make it work.

As of early 2022, the Picture-in-picture specification is in draft form. All browsers work differently, and the support leaves a lot to be desired.

As of early 2022, only 48% of browsers support the feature.

Let’s go to a technical guide to implementation with all the pitfalls and unexpected plot twists. Enjoy 🙂

Tutorial on how to set up PiP

First, you need a video element.

<video controls src="video.mp4"></video>

In Chrome and Safari, the PiP activation button should appear. 

picture-in-picture-chrome
In Chrome, click on the 3 dots in the bottom right corner

5 minutes and it’s done! 

What about Firefox?

Unfortunately, Mozilla doesn’t yet have full picture-in-picture support 🙁

To activate PiP in Mozilla, every user has to go into configuration (type about:config in the search box). Then find media.videocontrols.picture-in-picture.enabled and make it true.

Because of the weak support for PIP in Mozilla, we won’t look at that browser any further.

Now you can activate web picture-in-picture in all popular browsers. 

But what if this is not enough?

Could it be more convenient?

Maybe add a nice activation button?

Or automatically switch to PIP when you leave the page? 

Yes, this is all possible! 

Software PiP activation

To start, let’s implement the basic open/close functionality and connect the button.

Let’s say your browser supports picture-in-picture on the web. To open and close the PiP window, we need to:

  1. make sure the feature is supported
  2. make sure that there is no other PIP 
  3. implement the cross-browser picture-in-picture activation/deactivation function.

Check support

To make sure we can programmatically activate a PIP window, we need to know if it is activated in the browser and if there is an opening method.

You can check the activation status through the document pictureInPictureEnabled property:

"pictureInPictureEnabled" in document && document.pictureInPictureEnabled

To make sure that we can interact with the PIP window, let’s try to find a picture-in-picture activation method.

For Safari it’s webkitSetPresentationMode, for all other browsers requestPictureInPicture.

xport const canPIP = (): boolean => "pictureInPictureEnabled" in document &&
 document.pictureInPictureEnabled;

const supportsOldSafariPIP = () => {
 const video = document.createElement("video");

 return (
   canPIP() &&
   video.webkitSupportsPresentationMode &&
   typeof video.webkitSetPresentationMode === "function"
 );
};

const supportsModernPIP = () => {
 const video = document.createElement("video");

 return (
   canPIP() &&
   video.requestPictureInPicture &&
   typeof video.requestPictureInPicture === "function"
 )
};

const supportsPIP = (): boolean => supportsOldSafariPIP() || supportsModernPIP(

Checking for the presence of a PiP window

To determine whether or not we already have a picture-in-picture window, you can look it up in the properties of the document

document.pictureInPictureElement

Opening and closing functions

Opening function

The standard requestPictureInPicture open method.

video.requestPictureInPicture();

For more support among browsers, let’s implement a fallback. To enter picture-in-picture on safari, you need to use the webkitSetPresentationMode method of the video element:

video.webkitSetPresentationMode("picture-in-picture")

Closing function

The standard closing method:

document.exitPictureInPicture()

Fallback for Safari

video.webkitSetPresentationMode("inline")

As a result, we have the functionality to open or close the PIP.

export const canPIP = () =>
 "pictureInPictureEnabled" in document &&
 document.pictureInPictureEnabled;

const isInPIP = () => Boolean(document.pictureInPictureElement);

const supportsOldSafariPIP = () => {
 const video = document.createElement("video");

 return (
   canPIP() &&
   video.webkitSupportsPresentationMode &&
   typeof video.webkitSetPresentationMode === "function"
 );
};

const supportsModernPIP = () => {
 const video = document.createElement("video");

 return (
   canPIP() &&
   video.requestPictureInPicture &&
   typeof video.requestPictureInPicture === "function"
 )
};
const supportsPIP = () =>
 supportsOldSafariPIP() || supportsModernPIP();

export const openPIP = async (video) => {
 if (isInPIP()) return;

 if (supportsOldSafariPIP())
   await video.webkitSetPresentationMode("picture-in-picture");
 if (supportsModernPIP())
   await video.requestPictureInPicture();
};

const closePIP = async (video) => {
 if (!isInPIP()) return;

 if (supportsOldSafariPIP())
   await video.webkitSetPresentationMode("inline");
 if (supportsModernPIP())
   await document?.exitPictureInPicture();
};

Now, all we have to do is enable the button.

const disablePIP = async () => {
 await closePIP(videoElement.current).catch(/*handle error*/)
};

const enablePIP = async () => {
 await openPIP(videoElement.current).catch(/*handle error*/)
};

const handleVisibility = async () => {
 if (document.visibilityState === "visible") await disablePIP();
 else await enablePIP();
};

const togglePIP = async () => {
 if (isInPIP()) await disablePIP()
 else await enablePIP()
};

Don’t forget to catch errors from asynchronous functions and connect the functionality to the button.

<button onClick={togglePIP} className={styles.Button}>
 {isPIPOn ? "Turn off PIP" : "Turn on PIP"}
</button>
floating-window-video-player
How to open and close pip mode in a browser?

See? Not so much code and the button for switching between PiP and normal mode is ready!

Automatic activation of web picture-in-picture

Why do you need picture-in-picture?

To surf the Internet and watch video streams from another page!

Chatting in a video conference in your browser, you want to tell something while peeking into Google Docs but still seeing the person you’re talking to, just like in Skype. You can do that with PiP. Or you want to keep watching the movie while answering an urgent message in a messenger – this is also possible if the site where you watch the movie has developed PiP functionality.

Let’s implement the automatic opening of the PiP window when you leave the page.

Safari has the autoPictureInPicture property, it turns on the Picture-In-Picture mode only if the user is watching a fullscreen video.

To activate it, you need to make the video element property autoPictureInPicture true.

if (video && "autoPictureInPicture" in video) {
  video.autoPictureInPicture = true;
}

That’s it for Safari.

Chrome and similar browsers allow you to ping without a fullscreen, but the video must be visible and the focus must be on the page.

You can use the Page Visibility API to track page abandonment.

document.addEventListener("visibilitychange", async () => {
 if (document.visibilityState === "visible")
   await closePIP(video);
 else
   await openPIP(video);
});

Enjoy, the picture-in-picture auto-activation is ready.

PIP Controls

PiP video has the following buttons by default:

  • pause (except when we pass a media stream to a video tag)
  • switch back to the page 
  • next/previous video

Use the media session API to configure video switching.

navigator.mediaSession.setActionHandler('nexttrack', () => {
 // set next video src
});
navigator.mediaSession.setActionHandler('previoustrack', () => {
 // set prev video src
});
video-player-mini-view
Customised picture-in-picture mode

Linking with video conferencing

Let’s say we want to make a browser-based Skype with screen sharing.

It would be nice to show the demonstrator’s face. And also so that he can see himself, should, for example, his hair end up disheveled.

Javascript picture-in-picture would be perfect for that!

To display a WebRTC media stream in PiP, all you have to do is apply it to the video, and that’s it.

video.srcObject = await navigator.mediaDevices.getUserMedia({
 video: true,
 audio: true,
})
video-pop-up-player
Implement picture-in-picture mode for video calls

In this uncomplicated way, you can show the face of the screen demonstrator. And best of all, there is no need to transmit additional video of the speaker’s face, because it’s already present in the demonstration exactly where the author wishes it to be.

This not only saves traffic for all users in the video conference but also creates a more convenient interface for the demonstrator and the audience.

The same logic works with the interlocutor in an online conference.

Anything that can be displayed in the video tag can be displayed in the PiP window.

The pitfalls

Nothing works perfectly from the first try 🙂 Here are some tips on what to do when picture in picture mode is not working.

Error: Failed to execute ‘requestPictureInPicture’.

DOMException: Failed to execute ‘requestPictureInPicture’ on ‘HTMLVideoElement’: Must be handling a user gesture if there isn’t already an element in picture-in-picture JS.

So either the browser has realized that we’re abusing the API, or you forgot to check if the window is open

In the w3 draft, the requirements are userActivationRequired and playingRequired. This means that picture-in-picture can only be activated when the user interacts and if the video is playing.

At the moment the error can be found in 2 popular cases: 

  • (Chrome) trying to navigate to PiP if the page is out of focus.
  • (Safari) attempt to navigate to PiP without user interaction 

The video in the PiP window doesn’t update

To deal with this problem in react, just change the key property along with the media stream update or src.

<video controls key={/* updated key */} src="video.mp4"></video>

Video in the PiP window freezes

From time to time a video hangs. This usually happens when the video tag disappears from the page. In such a situation, you need to call the document.exitPictureInPicture() method.

When starting a broadcast in another tab or application, the auto-opening PiP window doesn’t work (Chrome)

This problem is related to this error. The reason is that when you click on the system window to select a tab or page to show, our page loses focus. If there is no focus, the userActivationRequired condition can’t be satisfied, so you can’t open Pip right after the start of the demonstration.

However, it is possible to open a PiP window in advance, say, when the page loses focus:

document.addEventListener("blur", () => {
 // open PIP
})

In this case, the PiP will open before the broadcast begins.

Conclusion

Despite pretty weak browser support, only 48% as of early 2022, Javascript-enabled PiP is a pretty quick feature to implement and brings an amazing user experience to web app users with video or broadcasts.

However, you should consider the fact that half of the users may never use it due to poor support.

You can test this feature out in the sandbox.

BONUS TIP

How to turn on picture-in-picture on YouTube?

  1. Turn on the video
  2. Open console. For macOS, use Option + ⌘ + J. For Windows or Linux, use Shift + CTRL + J.
  3. Enter this code:
document.onclick = () => {
 document.querySelector('video')?.requestPictureInPicture();
 document.onclick = null;
};

4. Press Enter.
5. Click on an empty spot on the page.

Categories
Uncategorized

How to create a custom Internet TV streaming service: features, technical pitfalls, devices, price

Internet TV app on a smart TV and a smartphone

How to create a video streaming service like Netflix for your business? If you are not a technical person, you may feel puzzled. What technical pitfalls to foresee for each function – to not face unexpected reworks and costs? What technologies to pick for each device? How much may it cost? We’ll help in this article using our 16 years worth of experience in video software development.

Example of an Internet TV product developed by Fora Soft

Internet-TV-app-design
Vodeo OTT application for iOS for Janson Media Internet TV service

100.000 users of Janson Media Inc. can now watch movies and series in the iOS app. Rent a film and watch it in as good quality as your Internet connection allows.

Internet TV, OTT, IPTV software development – what’s the difference

OTT and IPTV are 2 kinds of Internet TV – television delivered to viewers by the Internet Protocol – IP:

  • OTT – Over-The-Top or Television over the Internet, uses an open network. It’s the regular Internet you use for emails or website browsing. Examples: Netflix, YouTube, Hulu. Use it on the phone, tablet, smartTV, laptop, or desktop computer – at home or outside, even in another country. When you have the Internet, log in to your account and watch.
  • IPTV – Internet Protocol Television, uses a closed network and not the public Internet – you access the TV through a private managed Local Area Network – LAN, or Wide Area Network – WAN. E.g., if an Internet provider makes a net of his own cable – this is the provider’s own private LAN, not accessible from the Internet. Examples: Comstar IPTV, DIRECTV STREAM, Movistar+. Works at your home only, where the cable is.

Check our infographic below to see more on the difference between OTT and IPTV as well as Cable and Satellite TV, or read more in this detailed article.

television-system-types
Difference between 5 kinds of television: Broadcast TV, Satellite TV, Cable TV, IPTV, OTT

We at Fora Soft have spent years developing software for both types of Internet TV, including Set-Top-Box firmware, too. And, since OTT and IPTV interfaces extend the concepts used for Satellite and Cable TV receivers, our team is capable of developing frontends for these kinds of televisions, as well.

Features for OTT and IPTV platforms

The most frequent and interesting features of Internet TV applications. At Fora Soft we develop custom software, so if you need something extra – we can plan and implement it.

4 types of content: live, pseudo-live, on schedule, on-demand

How to create a streaming service? Start with the decision of what type of content you’ll have.

streaming content type
Difference between 4 types of content live, pseudo-live, on-schedule, on-demand

Live streaming

It’s a live TV broadcast. You stream on the air – the audience watches right when everything happens. 

How to create a live streaming service: the choice of technology is a balance between latency, scalability, and cost.

  • WebRTC – for sub-second latency but the audience of fewer than 500 viewers
  • HLS – for a big audience of 500 to millions of viewers but with a latency of 2-60 seconds
  • WebRTC with Kurento and adjustments – for sub-second latency and a big audience but for a higher cost: read more in our article 

Use cases: sports streaming, e.g. a football match, a show with questions from the public in real-time. Live streaming is more expensive than pseudo-live streaming – explained in the Pseudo-live streaming section below. So if you don’t really need real-time, it’s better to use pseudo-live streaming.

Pseudo-live streaming

On classic TV, they call it live-to-tape: a pre-made recording broadcasted to all users simultaneously. Stream is not real-time – it’s pre-recorded, then transcoded on the server before going to viewers.

You get better video quality for less money when you do not compress in real-time:

  • Less money:
    The stream has a smaller size because there’s time to compress more effectively. Each of the video resolutions has a higher degree of compression. The smaller size goes through the servers the fewer you pay for that. 
  • Better picture quality:
    What video resolution to show depends on the user’s Internet speed. The same video size has a lower resolution (worse quality) in real-time and higher resolution (better quality) when compressed before sending to users. The same user has the same video size limitation due to his Internet speed. Therefore the user gets a better quality video – with a higher resolution – with pseudo-live streaming.

Use cases: TV shows with no real-time interactions with the audience, e.g. news streaming, The Voice.

Streaming on schedule

Organizing pre-recorded streams into a grid gives a totally TV-like experience: a set of parallel channels with a set of shows going one after another on each channel.

We program the ability for the admin to create the channels and build their schedule with videos. Different versions for different countries and timezones.

Use cases: managing a TV channel with different TV show streaming, e.g. Discovery+.

Video-on-demand (VOD)

A collection of movies, series, and other content that you can buy and watch at any moment – even radio. Some of the VOD features:

  • Free and paid videos
  • Favorite videos
  • Recommended videos – set by admins or picked based on the user’s taste
  • Filter and sort by genre, popular, newest, highest rating
  • Direct search for videos – with a virtual keyboard for SmartTVs to type from a remote
  • Rate videos
  • Pin code before opening adult videos
  • Schedule video release and expiration date – when the video stops being available

Use cases: movie and series streaming and distribution, e.g. Netflix.

Video recording

tv show recording
3 types of stream recording

Recording in real-time
Click record while watching online to record a show for your home collection. Download the recording to a user device, store it in the application, or in some third-party storage service. Or all of the above.

Recording on schedule

Set a time, and the recording will switch on. For STB-based solutions you need to leave the STB switched on.

Time shifting

Some channels support timeshift – rewind the allowed hours back and watch what you’ve missed.

Video player for video streaming services

Video player with video controls and subtitles
Video player with video controls and subtitles

Video controls

Play, pause, stop, rewind, fast-forward buttons.

Subtitles

Upload a subtitles file to videos in formats like SRT, SUB, SSA, AQT, ASS, JSON. These are the most popular ones. If yours is not on the list, we can program support for other formats.

Picture-in-Picture

floating window player streaming
Picture-in-picture in Internet TV – OTT or IPTV

The video you watch now shrinks into a small one in the corner while you look through a TV guide or pick another show. Works in browser: check a PiP demo at the end of our article. Works on mobile devices as well: read more about PiP on Android in this our article.

Payment and monetization in a streaming platform

Monetization by ads

Advertising-based Video-on-Demand – AVOD: viewers watch movies and series interrupted by ads. Example: YouTube free version.

advertising in player example
Set up advertising revenue for streaming platform

Advertisements on a website page or app page but not in the video: advertising networks like Google Ads integrate and show relevant ads to visitors. Website or app owner gets income from ads views.

streaming service monetisation
Advertisements on a website page or app page but not in the video

Paid subscription

Content unlocks for watching when the user subscribes. Subscription payments are automatically charged from his card. Monthly or annual.

payment-streaming-service
Paid subscription in Internet TV OTT app

Most popular, reliable, and easy for users payment systems: Stripe, PayPal. The owner registers an account with them to receive payments. Users just pay by card the way they are used to.

Buy a movie

Transactional Video-on-Demand
Transactional Video-on-Demand – TVOD (buy a movie)

Transactional Video-on-Demand – TVOD: pay for each piece of content: for one movie or one season of a show.

Hybrid model

mon
Combine the most suitable ways of monetization for your project

A mix of the models above. For example, a free plan with ads, a subscription to unlock some part of content, and some movies and series are paid for.

Access code

Enter the code on the TV to unlock access. Convenient for IPTV apps, e.g. for hotels.

Content Delivery Network (CDN)

Content Delivery Network
What is CDN – Content Delivery Network

You can’t beat physics: the longer the distance between your server and your audience, the bigger the delay. Taking this problem on in a straightforward way, by buying or renting hardware all around the world, will cost you a fortune.

CDN solves this problem. CDN is that network of servers in almost every country that someone has already bought and is ready to rent you. Each piece of your content is downloaded on each server – but only when the 1st user requests it. So the very 1st user still has the delay, but all the following do not.

Amazon’s CloudFront and Cloudflare are CDNs that we use most frequently at Fora Soft. Read more on CloudFront and Cloudflare differences in the article.

Adaptive video quality

Adaptive video quality in Internet TV
Adaptive video quality in Internet TV

Users should watch videos in the best quality possible. The limitation is their Internet speed. The program keeps an eye on it and automatically adjusts the video resolution to keep the video from stuttering even on a volatile network.

Video processing

Different formats

Converts videos into different formats to deliver to different end-users’ devices.

Different resolutions

Converts videos in different resolutions to deliver to users with different Internet speeds.

Compression

Decreases video size without a loss in quality by removing doubling data.

Split into chunks

When the videos are delivered chunked, the user never needs to stand by until a full movie is downloaded. The playback starts almost immediately, and keeps on, while the remaining parts are being downloaded in the background. Scrobble through a movie seamlessly – once you move the playhead to the desired location, the stream will resume in a moment, no matter how long was the skipped part.

Digital Right Management (DRM)

– encryption to protect videos from stealing and unauthorized watching. The major studios will only let you sell their content if your platform is well-protected against copyright infringement.

When a user clicks play, the program checks the license server if he has the key. The server gives the decryption key if all is fine, and the player decrypts the video file with it and plays it.

Technologies:

Devices for which Fora Soft develops streaming television

streaming-software-development
Devices for Internet TV software development
  • Web browsers – use without download
  • Smartphones and tablets – iOS and Android
  • Desktop PCs and laptops
  • Smart TVs – Samsung, LG, Android-based STBs, Apple TV
  • Virtual reality (VR) headsets

Website is the simplest form of OTT online cinema.

  • It opens on laptops and desktop computers. 
  • If optimized for mobile devices – it looks and works well on smartphones and tablets in a browser. Optimization requires extra time and cost because the UI for each page should be re-thought over for smaller screens. 
  • Modern smart TVs open websites as well – so you can watch such OTT on a smartTV. iPhone users share screens to modern smart TVs with 3 taps too – so for them, it’s even easier, and the full-screen view looks exactly like any other movie on TV. 

So if you want the most cost-effective option, a web Internet TV application is the best.

How to make a streaming website? We use JavaScript, framework React for web development, mainly WebRTC, HLS, and Kurento technologies for video streaming, and FFMPEG and GStreamer for video processing.

iOS and Android native apps offer a better user experience. They are one tap away from the users, they don’t have to search for them in a browser. So for established media companies, we develop mobile apps. 

How to make a mobile streaming platform? We use native programming languages: Swift for iOS, Kotlin for Android, mainly WebRTC, HLS, and Kurento technologies for video streaming, and FFMPEG and GStreamer for video processing.

Smart TVs have application stores too. It’s easier to launch a TV application like Netflix than search the site and share the phone’s screen. So for better user experience, we develop applications for Smart TVs. And yes, we can build a Netflix clone for your streaming TV service.

How to create such an OTT platform or make an IPTV server? We use JavaScript for Samsung and LG Smart TVs, Swift for AppleTV, Kotlin for AndroidTV.

Examples of OTT services worldwide

When planning your Internet TV app, it’s wise to check the best examples in the industry. The ones with the biggest worldwide user base:

  • Netflix – 214 million subscribers in 2021
  • Amazon Video – 120 million
  • Disney+ – 118 million
  • HBO Max
  • Apple TV Plus

Check more indicators in this research from Statista.

? How much development of an OTT or IPTV app costs

At Fora Soft, we develop custom software and do not sell ready one. So all the functions listed above are the most useful examples based on our experience. We may develop all of them for you or just a few, or add something else.

That is why we do planning before programming like they do a blueprint before building a house. Analysts draw a wireframe, then estimate your project. Approximate indications:

The simplest VOD OTT app for 1 platform 

  • 3-5 months 
  • About $36,000

A fully functioning system with VOD movies, login, simplest payment, rating, search. 1 platform means an iOS app or a web app for example.

The simplest IPTV app for 1 platform

  • 4-6 months 
  • Around $49,000

A fully functioning system with channels like at hotels.

OTT solution similar to Netflix for 1 platform

  • From 12 months 
  • From $115,000

A fully functioning system with different types of VOD content, live shows, login, a hybrid payment system, search, ratings, recommendations, special offers.

Call us to discuss your needs. Or send us your requirements and we’ll provide you with an estimation.