Watch DLink IP Camera on iPhone and Android

Somehow, the director of a certain organization T wanted to see from the holiday how his salesmen work in his absence. So on the ceiling in the office of the sales department appeared IP-camera with a microphone. Then I, as a techie, had to give the sound + video from the camera to the apple phone and to the tablet from the company, which returns debts with whole trucks of five-cent coins.

I have to say, all residents of the office know about the camera with a microphone.

The first solution to this problem was very straightforward: a webcam and Skype, which itself picked up the phone when it called from the director. The decision did not last long. Then the camera will “fall” with the eye down, the computer will be “forgotten” to turn on. And in those rare happy occasions, when you could call all the same, for some reason everyone worked.
The director asked for another solution to the problem that the staff could not influence. I offered a wi-fi camera, which can be turned off only by turning off the power at the camera or access point or the entire cabinet. The socket of the camera on the ceiling, you will not turn it off quickly. Disabling the access point or office is fraught with the failure of all computers. The decision was supported and paid. Getting started.

The choice of camera somehow immediately limited to the presence on the shelves of the store. This is the D-Link DCP-2130. Installation and setup of the camera are simple: installation - electrician, camera - ip-address and password. The camera is able to give the image via http in mjpeg, but without sound. Able to give sound + video by rtsp ( rtsp://ipcamera/video1.sdp )
For some reason, not all players are friends with rtsp. VLC turned out well done and won other colleagues.
The shortcut “ vlc rtsp://ipcamera/video1.sdp ” to the director’s desktop and browsing in the office on the desktop is ready.
')
But then I had to get a tambourine, because I want to watch a movie with funny people from anywhere.
Path one: forward rtsp on the gateway from an external ip to the camera. Fail. And that's why:
1. rtsp does not have any protection in the form of authentication of the beholder and it is forbidden to release this movie outside on the ball. I wanted to rename video1.sdp to mohqu3iep8Ohh.sdp , but I don’t remember that, and see p.2
2. I didn’t dig much, but I managed to understand that rtsp is hard or even impossible to view on iOS, and not every Android player will master it.
And so, port forwarding outside the camera was dropped.

The second way: html5 or flash. Success, but not all.
I could not find a single flash player that would support rtsp. HTML5 video does not support streaming at all. But! VLC perfectly reads the existing stream, VLC can decode video on the fly, VLC can transmit via HTTP, and even with authentication. And we have a gateway computer. We combine the gateway and VLC skills together by a team on the gateway

 vlc.exe -I dummy rtsp://192.168.0.333:554/live1.sdp --http-reconnect --repeat --rtsp-caching=4600 --loop --sout=#transcode{width=320,vcodec=h264,vb=384,fps=15,venc=x264{aud,profile=baseline,level=30,keyint=30,ref=1},acodec=mp4a,ab=64,channels=1,samplerate=22050,audio-sync}:http{user=camuser,pwd=campass,dst=:8080/st.flv} --no-sout-rtp-sap --no-sout-standard-sap --ttl=1 --sout-keep 

where 192.168.0.333 are IP cameras, and rtsp://192.168.0.333/live1.sdp is, respectively, a live stream from the camera.
As a result, we obtain that camuser:campass@gate:8080/st.flv camuser:campass@gate:8080/st.flv a converted video stream that is already valid for a flash player. By the way, it opens with many players on Android, which is good news.
We open port 8080 on the gateway and the access to the outside appears, and, as you may have noticed, having at least some authentication. Now the flash player as a source can slip our stream in the form
camuser:campass@camera.my-org.ru:8080/st.flv
On the advice of friends, the choice fell on the JW Player. Its simplicity and performance fully satisfied.
I added a html page with authentication and a flash player, I checked it, it works from computers and from the tablet specified in the beginning of the article. Now the director from a computer or tablet comes to
camera.my-org.ru camera.my-org.ru , enters the name password and looks at how his eagles work, and who just flew on tea.

If the same stream is slipped into the html5 player, then nothing will come out, html5 does not want to understand streaming video. A long game with video / audio formats did not give any results. But I also want to watch a movie on the phone from one fruit company, and as you know, this very fruit company is your flash on html spit, so I was waiting

The third way: Bite off the apple and not die of happiness. Success.
Googling in Yandex for a long time did not give any results. Generally no. I began to doubt my skills in asking the search engines. I knew for sure that once Apple presentations can be watched live on Apple devices without additional dances, this is possible. At about the third time to find a solution, I noticed a frequently repeated combination of words, namely HTTP Live Streaming . I was delighted with Apple’s decision. As you know, html5 can only play an existing file. So that's it, they thought at Apple, and said: “let's imagine that the live stream is pieces of 10 seconds, you just have to finish playing the current piece, immediately start playing the next one” Super! It is as ingenious as it is simple. Everyone is busy with his business. HTML5 video shows files, he knows how. Http-server gives files and deals with any load, authorization, etc. It is for this purpose made. It remains only to slip these 10-second pieces in time. And there is a solution, and again VLC won. VLC, like the other members of this bundle, is busy solely with its business - encodes the video. Run

 vlc.exe -I dummy --mms-caching 0 rtsp://192.168.0.333:554/live1.sdp vlc://quit --sout="#transcode{width=320,height=180,fps=15,vcodec=h264,vb=384,venc=x264{aud,profile=baseline,level=30,keyint=30,ref=1},acodec=mp3,ab=64,channels=1}:std{access=livehttp{seglen=10,delsegs=true,numsegs=5,index=c:\www\cam01\istream.m3u8,index-url=http://camera.my-org.ru/cam01/cam01-########.ts},mux=ts{use-key-frames},dst=c:\www\cam01\cam01-########.ts}" 

This is what we get: VLC adds the folder c:\www\cam01\ cam01-########.ts and the constantly updated playlist istream.m3u8 , which contains links to these files. Stores 5 fresh video pieces, old deletes.
Actually this playlist and give HTML5 video player on iDevice as a source. Watch and enjoy streaming video. This is how simple the HTML file looks:

 <body> <center> <video width=320 height=180 controls="controls" src=/cam01/istream.m3u8 /> </center> </body></html> 

We only remember that Apache in .htaccess or configs needs to add new file types

 AddType application/x-mpegURL m3u8 AddType video/MP2T ts 

Unfortunately, only iDevice can be used as a source for HTML5 video. It is a pity that such a great solution disappears.

After scratching the ChSV from the work done, I updated the html page a bit. Now the director comes to the site, logs in, and looks at least from the desktop, at least from Android, at least from iOS.

hack: under android there is Puffin Web Browser which can show flash, even if flash is not installed.

We add VLC launch to autorun and, perhaps, it’s done.

Observations for the month of flight:
1. The VLC, which encodes the pieces for iOS, works stably for weeks.
2. VLC, which drives the stream for flash, loves to fall after 1-2 days of continuous operation. Solution - restart every two hours.
3. VLC, which drives the stream for a flash, sometimes loses the video, leaving only the sound on the photo of the black rectangle of not Malevich. No solution was found, therefore, a restart every two hours, not once a day.
4. The gateway that runs VLC is some kind of early P4 with 1G of RAM, Win2K3. VLC consumes a little RAM and 50-60% of the processor.