I was doing some research on Live Streaming. I want to develop a solution where I will collect live streams from multiple remote cameras on my website, modify the stream with a custom text banner (i.e. we have on news TV channel, football match) at the bottom and broadcast it to all.
I know there are Flash plugins available for video streaming and editing, but I want to build this web app to be mobile friendly and responsive.
HTML5 could be used to display multiple video streams on the website, but how can I add a text banner, graphs or any other frame on a running live stream?
The easiest way to do this, and the way that gives you the most quality and control over presentation, is to just do it on the client application. It sounds like you control this, so just modify your application to fetch a data stream alongside the video stream. This will work great assuming that you control the client side, and exact synchronization isn't critical.
Assuming you don't control the players at all and you need to bake this all into the video, there are a variety of tools you can use. GStreamer, FFmpeg, even VLC depending on your requirements. If you need something more interactive, OBS might be something to look into as well.
Related
I am trying to figure out a way of having a customer walk up to a screen scan a QR code and then have control of the content on the screen via their web browser. I know bright sign can do this but unfortunately i need it within our SCALA players.
also dont want it to join a local hotspot like this video but more to use 4g and control a webpage anyone done this sort of thing.
Maybe using websockets or similar?
https://www.youtube.com/watch?v=zDni5mgMUPM
we are using Facebook's Unity SDK on the Facebook Web Platform (using Unity WebPlayer).
We went for the non-html approach so we only provide the .unity3d file url. (Unity Integration button is active)
Using this method we have this three problems:
1) we find no way to customize the Unity loading screen. This method and this method only work using old html integration way.
2) on Windows platforms, any Facebook floating div, such as chat windows or search dialog result, make the game to be invisible. (if fact facebook javascript sent the game canvas to -10000 x-position)
3) we can't use a custom html tiled background image. We might change the background after Unity is loaded but the transition doesn't look good
My questions are:
Is is possible to solve them and still using Unity Integration method?
Do you suggest us to go for the old html integration method?
Thanks!
We are working to resolve this soon.
Unfortunately for certain browsers, Unity will always draw on top of everything. That means when chat windows pop up they would appear under the game. We try to keep the game around if this isn't the case.
Does Application.ExternalEval() with JS not work for you?
The benefits you get from using the Unity Integration is that:
the dialogs will appear in game, so your players won't be kicked out of fullscreen if they are there.
cross platform would be easier, as you don't have to integrate a different SDK if you also export to Android and iOS
don't have to manage the web page on canvas
Unless you want more DOM control directly through JS/HTML before the game loads, it's probably better to stick with the Unity Integration.
I hope that helps your decision making.
I am currently working on my final year project for my degree in Software Engineering. I have decided that my project will be to develop a web application using HTML5 that will display chord sheets in a web browser (specifically Google Chrome). The idea is that each member of a band might have some sort of device in front of them (iPad, laptop etc.) which can access the application where they can log in, view the chords for the songs as the progress through a set and add annotations which are stored in the database and then shown to the user each time the song is displayed on their screem.
However, I am having a problem with how best to display all this in a browser window. I want it to have a similar appearance to that of a PDF document displayed in a browser window in that the user is able to scroll horizontally and vertically and zoom in and out as if they were viewing a PDF document. Is using SVG graphics the best way to achieve this? Or is there another way?
Rendering speed is going to be important as the idea is that this will be a system that could potentially be used in live situation, and I need to make sure I keep page loading/rendering times as low as possible.
I would greatly appreciate any thoughts you have!
Check out Vexflow! It’s an open-source web-based music notation rendering API, written completely in JavaScript, and runs right in the browser. VexFlow supports HTML5 canvas and SVG.
Here’s a demo and here’s a tutorial.
Is it possible to generate multiple thumbnails from a FLV using only as3? The flv is on the same server as the swf so I'm not using any dedicated streaming server. I'd imagine that as long as the flv has load the video you'd be able to pull bitmapdata from a specific time of the flv.
My idea is to pull around 8 images from every flv, convert them to buttons and use them as links to specific chapters in the flv.
If this is not possible, would it work better with a dedicated streaming server like red5?
Edit:
I'd also like to know how to do it if it's possible :)
The idea is to not use the server.
The thumbnails will only be used within the swif, so no saving to another location.
You can do this in AS3 as long as you're actually playing the video within Flash. While playing when you seek to the desired frame capture a bitmap. If you want to save the bitmap for later use you need server-side code to store it.
Streaming vs http download will not make this problem any easier or harder (although with a streaming server you can seek to the desired point without having to download the whole flv to that point).
This would be much better done on the server. You'll need an app that can extract an image from an FLV. ffmpeg can do it.
I know it is possible to get mplayer to output stills from an FLV (though might need a bit of fiddling to get the time reference right), and these in turn can be stuffed into ImageMagick to resize into thumbnails. Not best solution, but probably easier than digging around as3's API.
video thumbnailer is a good idea.
http://blog.chrometaphore.com/2010/03/26/how-to-create-video-thumbnails-runtime-in-pure-actionscript-3-0-videothumbnailer/
I'm looking for a simple way to put up musical "tunes" on a website.
So here's an analogy to explain my question:
Let's say I want to put up a couple of big triangles as a picture on my web page. I can either draw a bitmap and save as GIF/JPG/PNG, put it up somewhere on the internet, and link to it with an element. That works but the larger the picture the more space my image file takes up.
Alternatively, I can use SVG (even though Internet Explorer support is lacking, grr) and use vector graphics which uses very little bandwidth regardless of image size.
In the music world, I can use WAV or MP3 files. Works great -- but if I just want to publish a 1-minute song of simple notes, by knowing the durations & pitches, & don't care that it sounds 100% exactly like a piano or accordion, is there a way to (a) create a file with the song, and (b) put it online in a format that is space-efficient? 1 minute of MP3 usually takes up hundreds of kilobytes.
You could use a MIDI file, this stores durations/pitches etc. as you suggest. You should be able to easily find software to create this type of file. However you will probably find the results sound terrible, as it is very dependent on the synthesiser hardware/software that is available on the end-user's machine.
For what you need this might be reasonable though.
Look into playing music files on websites using Flash.
You can control the Flash through JavaScript calls.
This is currently the "recommended" way to play small audio clips in a website.
For larger media files, look into streaming FLV files using a Flash player.
Hope this helps :)
Check out the MIDI format for instruments.
http://en.wikipedia.org/wiki/MIDI