onStream – The Broadcasting Machine

onStream – The Broadcasting Machine is the name of my latest flash project. Slogan says: “Broadcast LIVE video to your friends or the whole world from a computer or mobile. Watch other people broadcasting their webcamera, conferences, shows or movies.” With this flash application you can broadcast your webcamera, tv card, desktop or movies (read the section “What can be broadcasted?”). With different broadcasting settings you can broadcast to unlimited number of viewers as well as make private videochats. Based on your connection speed, choose appropriate quality for your broadcasts from 320×160 px webcamera resolution with 11kHz sound sampling up to high definition broadcasts.

The application is located on http://onstream.yoz.sk and there also exist a facebook application http://apps.facebook.com/onstream/. You can also publish and run the application from facebook newsfeed stream.

UI, requirements, technology

I have created custom UI components that easily works on ordinary PCs (mouse controlled) as well as on touch devices. You can switch the whole app or just one channel into fullscreen. Targeting Flash Player 10.1, you are able to use this application even on your android phones. The technology behind the app uses RTMFP protocol that use Flash Player for P2P communication between users (see protocol requirements). Together the Flash Player 10.1 and RTMFP let you create multicast streaming, what is expected to work on large streaming groups.

Broadcasting modes

  • Public / Private – With public mode anyone can search for your channel (based on channel name or description), while in private mode only people with correct link may join.
  • Broadcast / Video Chat – Broadcast your channel to unlimited number of viewers or select video chat mode where anyone who joins channel see and broadcast each other. Use broadcast mode for your live tweets, conferences, video or sound streaming.

What can be broadcasted?

  • Webcamera & Microphone – By default, you can select all your system installed webcameras and microphones.
  • MP3s / PC sounds – if your soundcard driver supports “Stereo-Mix” (“Mono-mix” “Wave Out”, “What U Hear”…), just make it as default sound source instead of your microphone
  • TV card – If you have one, plug it in and you should see your tv car in list (based on driver details).
  • Desktop / Movies / Images – There is some software available that let you broadcast your pc desktop, movies or images etc. My personal favourite is VH Toolkit (freeware) but there are also simplier alternatives like ManyCam (free), Fake Webcam (paid)…

Publishing channels

Once the broadcasting channel is created, there are several ways viewers notice:

  • Search – If the channel is in public mode, anyone can search / list the channel in the search section of the app.
  • Link – Any channel has its own unique link, click clipboard icon to copy this link into system clipboard and share link with your friends.
  • Facebook – Click facebook icon to publish the channel directly into your facebook newsfeed.

Screencast


YouTube  Creating broadcast type channel & searching channel


YouTube  Creating video chat channel & entering video chat channel


YouTube  Publishing channel to facebook


YouTube  Publishing channel to facebook via direct link


YouTube  Watching multiple channels

19 comments so far

  1. Og2t July 28, 2010 10:24

    Great stuff Jozef! What’s behind the scenes, do you use Adobe Stratus and/or Red5?

  2. Jozef Chúťka July 28, 2010 10:52

    @Og2t, thanks. Behind the scenes is stratus/RTMFP. With fp 10.1 you can multicast p2p using NetGroups, cool feature. backend is php+mysql – storing channel info and screenshots.

  3. Jk_ July 30, 2010 13:52

    This is really good! Easy to use and well thought.

  4. Lucas de Caunes September 12, 2010 12:41

    Fantastic Jozef Chúťka !!! i’m searching to an simple broadcast video and viewer, any demos exemples article or links ?

  5. Jozef Chúťka September 13, 2010 09:20

    Thank you Lucas. Try http://onstream.yoz.sk , you can embed it into your website via iframe etc.

  6. tom January 6, 2011 03:23

    great stuff Jozef…

    do you know of any easy tutorials for beginners to try and build a program like yours?

    i tried the adobe one but couldn’t get it to work, have you done any tutorials for your projects as they a re really cool..

  7. Jozef Chúťka January 6, 2011 11:23

    thank you tom,
    I have a lot of blog posts about things I am doing in my apps. It is just impossible to make one big tutorial for something I have been developing for months. Once you start working on your own, feel free to ask about your issues, I believe we can solve em all.

  8. tom January 12, 2011 17:28

    cheers jozef

    what i want to do is just make a simple video chat between 2 people, no extras, just go to web address and connect to other user. I already have a text chat i just need the video connection.

    Do you have or know of an easy tutorial that will allow me to do this, i need to make it in flash and then embed (swf) into website. so could be with cirrus or just using fms…

    cheers for the help

    tom

  9. Jozef Chúťka January 12, 2011 18:02

    tom, you can grab sources from Cirrus Sample Application
    http://labs.adobe.com/technologies/cirrus/samples/#resources

  10. tom January 13, 2011 02:50

    yeah i tried it but didn’t know where to put the python file, then i tried another version which was with mysql and php, but again i didn’t know how to join the flash code to publish it..

    http://active6.wordpress.com/2009/04/03/the-adobe-stratus-beta-sample-app-and-phpmysql/

    another thing i keep getting stuck on is, what rtmp address do i put in the flash file? because i downloaded the developer free version of fms4, it has installed in windows /program files/adobe/fms4..
    do i put rtmp://localhost or rtmp://myipaddress.. not sure what i should write after that..?

    cheers for the help jozef

  11. Jozef Chúťka January 13, 2011 10:59

    tom, with installed fms, there should also be some example apps and sources included (program files/fms/samples). you should also go through http://www.flashrealtime.com/ there is also a lot of useful stuff…
    – when running fms on localhost you should connect to rtmp://localhost/APPNAME/
    – when using cirrus rtmfp://p2p.rtmfp.net
    – when connecting to local p2p NetConnection.connect(“rtmfp:”)
    http://www.flashrealtime.com/local-flash-peer-to-peer-communication-over-lan-without-cirrus/

  12. garcimore October 29, 2012 21:13

    Hello, I know that this post is old, but I have a problem with Chrome & flash / camera… Perhaps do u have an idea why “Shockwave Flash crashed” when I getCamera in Flex (on Chrome only)

    I have test on http://onstream.yoz.sk/ with chrome, and it’s the same : Shockwave Flash crashed.

    Do have an idea of what I can change in flex to not crash Shockwave Flash with Chrome ????

    Thanks !!!!

  13. Jozef Chúťka October 30, 2012 15:45

    hi garcimore,
    I believe it is related to chrome ppapi flash player not my app.

  14. garcimore October 30, 2012 21:11

    Hi Jozef,

    thx for your answer and I think u are right ! But do u think that it means that users can not use chrome when we want to developp a flash application that will use the webcam ?

    Thanks !

  15. Jozef Chúťka October 30, 2012 21:29

    it seems that the latest version (11.4.31.110 pepper) is buggy, please wait for the update – I believe all chrome users suffers from this issue currently

  16. garcimore October 31, 2012 00:24

    Yes u are completly right ! I fund how workaround for it :
    http://code.google.com/p/chromium/issues/detail?id=155437

    ==> any call to Camera#setMode (AS3) that includes two specific resolutions (640×480 or 320×240) will lead to a crash.

    According to my test case, 640×480 will lead to an instant crash (upon load), while 320×240 only randomly does so (after around 4 or 5 consecutive page loads). No other “common” resolutions were found to cause similar crashes.

    A simple workaround is to call Camera#setMode with a resolution of 640×479 and 320×239. The FPS parameter does not have any impact on this bug.

    ^^

    Thx for your help 😉

  17. Jozef Chúťka October 31, 2012 09:34

    garcimore exactly, we can not do much about it ourselve – lets wait for flash player / chrome update…

  18. Denis March 23, 2013 19:24

    Josef, hi again. )

    I’ve found it.
    Here I can broadcast my video to any number of cams.

    Do you have or plan such an application for android?

    Thank you.

  19. Jozef Chúťka March 25, 2013 11:49

    hi Denis,
    yes with this app you can stream to as many receiver as you wisth, unfortunately I didnt have time to port this app for android yet, but it should not be any problem. if you are just interested in some free video conference app I would recommend you using google hangout

Leave a comment

Please be polite and on topic. Your e-mail will never be published.