How to build live video streaming app


#1

Hi all

i want to build an mobile app using which people can see the live interview or any event that happens in our college
the advantage of this app is the people need not be physically present at the venue , they just login and view live video

since the app should run on all platforms i am planning to use the icon framework,

but i have never built any and have no idea about this platform.
can anyone of you give me a high level idea of what things would i require and high level view of how to build this app

the UI will simple, it will list the live events and on selecting any the user will be able to view the live stream on his mobile

appreciate your time and thanks for looking into this


#2

Looks like you’re re-inventing the wheel.
Use an existing service and app


#3

i am trying to learn mobile development and want to implement this myself, can you give me a high level overview of what all the things required.

assuming that i am using a camcorder to record the video and do i need to have a video streaming server then is that easy to develop.

as far app is concerned it should be easy, just embed a media player and give it an url and users can start to view the video

please correct me if iam wrong


#4

If you want to learn mobile development, you’d better focus on an app that requires some navigation and data fetching.


#5

It won’t be “easy” but it can be done.

I would look into sockets. You’ll need a server to handle the socket pool, and when a user opens a chat room, they connect to your server via Socket.io and you’ll need to emit data from the server to each connected client.

This should be a good starting point:
http://phoboslab.org/log/2013/09/html5-live-video-streaming-via-websockets

Good luck and let me know if you need any help.


#6

I am currently making one app that contains such function inside.

I serve the live streaming with nginx-rtmp (which generates m3u8 without ffmpeg).
iOS and Android > 4.4 default support playing m3u8 simply using video tags.

Also, by activating “allow-inline-play”, the video tag doesn’t have to be “fullscreen” to play. It will stay the height you gave it.

This is heaven! Because it is html tags instead of the NativeUI, you can use css to decorate it anyway you like.

Then I use socket io to enable the live chat functions during live, which needs a backend and database that stores the users that is inside the room, and you need to notify the backend everytime you enter or leave the room.

As for the normal dashboard page, I think it is general navigation and list problems that needs to integrate with a restful backend, I am not going to discuss them here.


#7

I’m looking to implement the same type of functionality. “Live Video - Not Full screen”. Can I ask “windht” how the latency of the video is. 1sec, 10 seconds, ?? .

Thanks,


#8

Hi craig.

The latency may refers to two facets. One is the render latency, since it is integrated within the browser and render with the browser, it should perform really well as long as ram is enough, the other is the network latency which may be the main latency reason and cannot be strictly controlled, you may check out m3u8’s properties and make different resolutions when you provide the stream.

In my case, using an Japan aws micro instance with nginx-rtmp reached from Hong Kong, latency is less than 10 secs from real situation, which is satisfying for me.

Hope this helps.


#9

Are you using a Computer+Webcam to publish the video to the server, or a Phone?
Im looking for a way to get the Video Data from an Ionic based App to a server and hardly find anything.

cheers,
Alex


#10

Hi Windht,
I also want to make it, but I’m still having trouble. Can you give any information library you use, or how you make it.

Thanks.


#11

What are you trying to make?

Only a live stream viewer app will be discussed here on ionic platform. I mentioned that the easiest way for viewer app is to use “m3u8” the hls format to play (which has inbulit support on iOS and Android)

If you are asking about the streaming server, you should search for server side help (Like the nginx rtmp server I mentioned).

If you are asking about streaming right from the phone, there is no cordova plugin can do this yet. But you can build one easily since there are a lot of streaming kits that requires one line of native code to start push stream.