Embed IP Camera streaming into website with PHP? - php

I have done a quick google on this but i was wondering if this is possible? I have opened up ports on our router to it so its accessible from anywhere but could i use PHP or similar to grab live streaming and show it on a website somewhere?

Try this (HTML5) or just the inner object (HTML<5) with all occurences of %StreamURL% replaced with the URL of your stream.
<video width="320" height="240" autoplay controls>
<source src="%StreamURL%" type="video/mp4">
<object width="320" height="240" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.5.swf">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.5.swf" />
<param name="flashvars" value='config={"clip": {"url": "%StreamURL%", "autoPlay":true, "autoBuffering":true}}' />
<p>view with external app</p>
</object>
</video>

You need a server to broadcast the stream for the viewers and player component that can work on desktop and mobile as well.
I have posted some info about this here on another stackowerflow topic:
How can I display an RTSP video stream in a web page?
More info: http://ipcamlive.com/howdoesitwork

Related

How to stream a HTML5 video from FTP without showing credentials? [duplicate]

in video tag src we are trying to give src as a ftp resource its not picking it up. Can somebody give some direction on that.
<video src='ftp://server/pqr.mp4' />
I suspect that's because to allow efficient usage, the browser makes HTTP range requests, which are part of HTTP, not FTP. FTP is a pretty old protocol, and isn't really appropriate here for lots of reasons (no range requests, basic/no caching info, etc).
something like this
<video width="320" height="240" controls="controls">
<source src="http://movie.mp4" type="video/mp4" />
<source src="http://movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
The issue here is :
Loading an FTP sub-resource through an HTTP / S page is not allowed
This is for security issues, see https://bugzilla.mozilla.org/show_bug.cgi?id=1361848
Use this code:
<video width="320" height="240" controls="controls">
<source src="http://movie.mp4" type="video/mp4" />

Issues with embedding WMV files in html

I have a link to play a video in my website. When a user click on that video link, the div which embedded that video will popup(not popup window, its showing hidden div using jquery BlockUI). And there is close button it will hide the div which embedded video.
Everything is working fine. But video is not stopping on closing that div. I can hear the sound :( . I want to stop that sound too on closing that video. What to do. Please do the needful
<OBJECT ID="MediaPlayers" WIDTH="400" HEIGHT="350" CLASSID="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
STANDBY="Loading Windows Media Player components..." TYPE="application/x-oleobject">
<PARAM NAME="FileName" VALUE="1.wmv">
<PARAM name="autostart" VALUE="false">
<PARAM name="ShowControls" VALUE="true">
<param name="ShowStatusBar" value="false">
<PARAM name="ShowDisplay" VALUE="false">
<EMBED TYPE="application/x-mplayer2" SRC="1.wmv" NAME="MediaPlayer"
WIDTH="400" HEIGHT="350" ShowControls="1" ShowStatusBar="0" ShowDisplay="0" autostart="0"> </EMBED>
</OBJECT>
Try to use this when you close the popup window.
document.getElementById("MediaPlayers").stop();
Or you can use another div to wrap this player, and then add your html into innerHTML when open popup window and then remove all when you close the window. like
<div id="playerWrap">
<OBJECT ID="MediaPlayers" ....
.....
</OBJECT>
</div>
javascript code:
document.getElementById("palyerWrap").innerHTML = "";
reference by http://www.htmlforums.com/multimedia-elements/t-accessing-mediaplayer-functionality-from-javascript-65899.html
if you want everybody to be able to your video, you should use the html5 video tag instead. this will not only relieve you from unexpected behavior of propriatory plugins (windows media player) but also allow you to reach a broader spectrum of devices and therefore a bigger audience.
i suggest to convert you video to the webm format and using jplayer to display it on your site.

How to play in the same web page MPG video/audio files without making another new tab or new browser window?

I have 100 training, lecture, guide video files which has size 30MB to 1GB each of them. And they are all .mp4/mpg format. There is no web player i have found to play it in the inline html.
So this is what i am doing now let them download it. But i am looking for a way how to play those files using a web based media player so that the quality is not drop and it looks like same page without target="_blank", but with iframe?
Current code is like this:
<a href="/1/720p.mpg" target="_blank">
<img src="/img/icon/playivr.png" style="border:0px;">
</a>
<a href="/1/1080p.mpg" target="_blank">
<img src="/img/icon/playivr.png" style="border:0px;">
</a>
You could try use object tag for that:
<object data="data/test.mpg" type="video/mpeg" width="320" height="255">
<param name="src" value="data/test.mpg">
<param name="autoplay" value="false">
<param name="autoStart" value="0">
alt : test.mpg
</object>
But this will work only if user have a plugin.
The better way would be to convert videos to flv format using ffmpeg for example and play using some flash-based player. It's better since flash in installed on about 99% of computers.
Google chrome latest version supports HTML 5 tag "VIDEO"
<video width="1024" height="768" controls="controls">
<source src="file:HaveFun.mp4" type="video/mp4" />
</video>
Latest firefox browser supports the "video" tag but is unable to play mp4 files.
you can convert them to swf and run them as a flash or upload them to youtube then do the embedding thing. or be creative and use FLASH software and do your own player.
there is this Quick time thing but its isn't nice at all

What XSS/CSRF attacks (if any) to be aware of when allowing video embeds?

I've been assigned a project for a website where users will be allowed to upload video's (using a YouTube API) but more importantly (for me) they will also be allowed to submit video embed codes (from numerous video sites, YouTube, Vimeo, etc. etc.).
Having no experience with allowing users to embed video:
How can I best protect against cross site scripting and/or cross site request forgery attacks specifically for video embedding? What are some of the common pitfalls to watch for?
At a minumum I would think to strip all tags except <object>, <param> and <embed>. But I have a feeling this will not be enough, will it?
edit
Also:
Do you think allowing only known video domainnames in the <embed src= and <param name="movie" value= attributes is enough to prevent rogue flash movies from being embedded in those attributes?
/edit
If it is of importance, the environment will be:
PHP/Zend Framework
MySQL
Bonuspoints:
Is there a common minimum golden rule/code template for video embed codes that are valid across all video sites that I could use to filter the input?
First and most dangerous xss (?) is that flash can read your DOM... Don't embed videos on pages where user can input his/hers login data. Login forms should be separated.
Usually flash embeds uses code that looks similar to:
Youtube:
<object width="425" height="350">
<param name="movie" value="http://www.youtube.com/v/AyPzM5WK8ys" />
<param name="wmode" value="transparent" />
<embed src="http://www.youtube.com/v/AyPzM5WK8ys"
type="application/x-shockwave-flash"
wmode="transparent" width="425" height="350" />
</object>
Vimeo:
<object width="400" height="225">
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=10239065&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1" />
<embed src="http://vimeo.com/moogaloop.swf?clip_id=10239065&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="225"></embed>
</object>
<p>La Fete (HD - 2010) from Malcolm Sutherland on Vimeo.</p>
Metacafe:
<embed src="http://www.metacafe.com/fplayer/4317045/bmx_face_slide.swf" width="400" height="345" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allowFullScreen="true" allowScriptAccess="always" name="Metacafe_4317045"> </embed>
<br><font size = 1>BMX Face Slide - Free videos are just a click away</font>
Best solution for enabling embeded content is to strip tags with exception for embed, param, object and list of attributes from the the samples that can be used.
Remember, some attributes can run javascript code as well as anchor's href...
Edit:
Allowing only trusted sites in src and param's value attribute is kinda good way to prevent hAx0rs from doing bad things but it's not flawles. Another big thing: read more about allowScriptAccess. Its a Param's attribute you should remove or set to sameDomain / never. It will prevent SWF from running javascript :)
Why don't you just visit all the sites, save their embed code, and then only allow your users to submit the required site's parameters?

How to embed a quicktime video from a MySQL Blob

I am currently pulling out images from a MySQL Blob using code as follows:
<img src="data:<?php echo $type; ?>;base64,<?php echo base64_encode($file); ?>" width="240"/>
I am now trying to embed a movie in a page and I am currently using code as follows:
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="256" width="320">
<param name="src" value="http://www.yourdomain/your-video.mov">
<param name="autoplay" value="true">
<param name="type" value="video/quicktime" height="256" width="320">
<embed src="<?php echo base64_encode($file); ?>" height="256" width="320" autoplay="true" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/download/"></embed>
</object>
I'm not sure how to go about actually grabbing the data? Any ideas?
Refer the video to a URL like:
http://www.yourdomain/video.php?video_id=1234
In video.php, notify to the browser about the MIME type via the Content-Type header that you can send with the header() function.
BTW, it's the first time that I see someone uses the method you've shown to display an image.
Usually, you'd want to refer to a URL like the example above.
That's because that the browser will save the image in the cache, which will make your website to load faster.

Categories