Embed RTSP Video Stream on HTML Website - html

I would like to embed a video stream from an IP camera into a website.
The URL for this stream looks like this:
rtsp://my.camera.com/axis-media/media.amp
If I open the stream in VLC it is working fine.
I have tried to use stuff from here but nothing is working:
https://wiki.videolan.org/Documentation:WebPlugin

It can be done with VLC or Quicktime but the actual problem your most likely experiencing is that web browsers have stopped suporting the VLC and Quicktime plugins. At time of writing this reply only Firefox still supports this plugin.
This also means you need VLC or Quicktime installed on your PC (Which I gather you have since it plays the steam in VLC).
Try Firefox for now to see if your stream works.
If it asks to Activate the VLC / Quicktime plugin click Allow or Allow and remember.
When using VLC the HTML Code in your website should resemble this:
<div id="cctv-container">
<object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab" id="vlc" events="True" width="640" height="480">
<param name="Src" value="rtsp://my.camera.com/axis-media/media.amp"/>
<param name="ShowDisplay" value="True"/>
<param name="AutoLoop" value="False"/>
<param name="AutoPlay" value="True"/>
<embed id="vlcEmb" type="application/x-google-vlc-plugin" version="VideoLAN.VLCPlugin.2" autoplay="yes" loop="no" target="rtsp://my.camera.com/axis-media/media.amp" width="640" height="480"/>
</object>
</div>
The only way at present to have it stream in Chrome or IE is to have VLC transcode the RSTP stream for you to a HTML5 supported stream.
Here is a sample VLC command to do just that:
vlc rtsp://my.camera.com/axis-media/media.amp :network-caching=1000 :sout=#transcode{vcodec=theo,vb=1600,scale=1,acodec=none}:http{mux=ogg,dst=:8181/stream} :no-sout-rtp-sap :no-sout-standard-sap :sout-keep
The new output stream can then be embedded in a HTML5 shim:
You can obviously change the port or encoding type as you see fit e.g.
:http{mux=flv,dst=:1234/stream}

Related

How can I stream an mp3 file in a web page?

I want to integrate an mp3 audio file with a size of 20MB into my website (PHP 7, Apache webserver).
<audio id="myaudio" src="./assets/myaudio.mp3" preload=„none" controls></audio>
The mp3 file should not be loaded on every page load, only when someone presses the play button.
The mp3 file should be streamed and start to play immediately (no waiting for complete download)
The mp3 file should also run in Firefox.
Does anyone have an idea how I can achieve all this?
Streaming MP3
by Toby Mack
To stream MP3's on a page you will need to have an MP3 player like WinAmp, Windows Media Player, or Real Audio Player. The MP3 will stream as it loads on the page and will allow for longer larger sound files to be played.
Save your MP3 file to the same directory where you will be playing the sound from, or a sound directory which you know the URL for already,
Open up a notepad by clicking Start => Programs => Accessories => Notepad
Type in only the exact Address or URL of your MP3 file.
Type it in as simple as this:
http://example.com/sound/music.mp3
where the domain is your domain, the sound folder is where you placed your MP3, and the music.mp3 is your mp3 file.
Save this file as music.m3u . Upload this file into the directory where you will place your sound.
Open your page up in an editor such as Notepad that will allow you to edit the code on the page.
Insert the following code into the HTML code of your page for a clickable link to stream by using this:
Clickable player and doawnload this file by right clicking it and save to yur directory:
<img border="0" src= "mp3.gif" width="41" height="25">
Or you can embed with this:
<EMBED src="music.m3u" autostart=true hidden=true>
Or you can embed for both IE and Netscape with this:
<!This code for IE>
<EMBED SRC="http://example.com/sound/music.m3u" HIDDEN="true" AUTOSTART="true" width="128" height="128">
<!This code for Netscape>
<OBJECT ID="MediaPlayer"
classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"
CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715"
standby="Loading Microsoft Windows Media Player components..."
TYPE="application/x-oleobject" width="239" height="179">
<PARAM NAME="FileName" VALUE="http://server/path/your-file.asx">
<PARAM NAME="AnimationatStart" VALUE="false">
<PARAM NAME="TransparentatStart" VALUE="true">
<PARAM NAME="AutoStart" VALUE="true">
<PARAM NAME="ShowControls" VALUE="0">
<Embed TYPE="application/x-mplayer2"
pluginspage="http://www.microsoft.com/isapi/redir.dll?prd=windows&sbp=mediaplayer&ar=Media&sba=Plugin&"
SRC="http://example.com/sound/music.m3u"
Name=MediaPlayer
ShowControls=0
Width=2
Height=2
</embed>
</OBJECT>

Raspberry Pi RTSP steam in browser

I have set up a RTSP stream from my raspberry pi camera module using this:
raspivid -o - -t 9999999 |cvlc -vvv stream:///dev/stdin --sout '#rtp{sdp=rtsp://:8554/}' :demux=h264
I am able to view it using VLC with: rtsp://192.168.0.18:8554/
When I attempt to embed the video in a web page the video does not show.
<!DOCTYPE html>
<html><body>
<OBJECT classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"
codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab"
width="800" height="600" id="vlc" events="True">
<param name="Src" value="rtsp://192.168.0.18:8554/" />
<param name="ShowDisplay" value="True" />
<param name="AutoLoop" value="False" />
<param name="AutoPlay" value="True" />
<embed id="vlcEmb" type="application/x-google-vlc-plugin" version="VideoLAN.VLCPlugin.2" autoplay="yes" loop="no" width="640" height="480"
target="rtsp://192.168.0.18:8554/" ></embed>
</OBJECT>
</body></html>
What is the best way to embed the video feed in HTML to view it in a web browser?
Well this is a bit tricky - when you open the RTSP link directly with VLC it should work since VLC comes packed with all the codecs (in your case H264). However I'm not aware of what happens with the browser plugin - does it reuse the codecs from the VLC installation or what. It could be that a codec is simply missing on the viewer's end but I'm not sure about that. Also, using the plugin you could run into issues with support among different browsers and whatnot.
The html5 video thing is a bit sketchy since as far as I remember (and this may have changed) neither live H.264 nor WebM is fully supported across all browsers. I'd still go with WebM since Chrome and Firefox has it and only IE requires an add-on. Check this question, it has a valid WebM streaming command line in the response and see if that works for you. If it does you should be even able to omit all the embed stuff and just use a plain HTML5 video tag.

Embedding WMV video file in HTML page using Silverlight plugin

I need to embed a video file codified in Windows Media Video format (WMV). The video files are send in streaming using Windows Media Services(in on Demand Mode) over HTTP protocol, and the client need to reproduce them.
I need to dinamically create a page with a video file embedded (each time the file and its path can change).
If I simply put in browser client the path of the file to reproduce, like:
http://myMediaServer:8000/stremVideo/pinball.wmv
automatically Windows Media Player opens, and I can control the reproduction of the video (seek forward, seek backward, pause or resume), without any problem, while if the video file is embedded in an HTML page, using the following code I can't seek the reproduction but I can only pause and resume the video.
<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="480" height="360" codebase="http://www.microsoft.com/Windows/MediaPlayer/">
<param name="Filename" value="http://remoteServer:8000/stremVideo/pinball.wmv">
<param name="AutoStart" value="true">
<param name="ShowControls" value="true">
<param name="BufferingTime" value="2">
<param name="ShowStatusBar" value="true">
<param name="AutoSize" value="true">
<param name="InvokeURLs" value="false">
<embed src="http://remoteServer:8000/stremVideo/pinball.wmv" type="application/x-mplayer2" autostart="1" enabled="1" showstatusbar="1" showdisplay="1" showcontrols="1" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,0,0,0" width="480" height="360"></embed>
</object>
So, the questions are the following:
How can I obtain all the control for the embedded video file?
Someone suggest to use Silverlight plugin. How can I embed video in a HTML page using Silverlight plugin? I need to create a Silverlight application? If yes, I need to have one application for each video file I want reproduce?
You need to create one Silverlight player app and use it as more times as you want.
And you can control it via JS.
Silverlight is best solution for high-quality WMV on pages.
Params, which you defined, are params of Silverlight app and you must specify in app which params you must have and how they will be used.
There is an open source player frame work which may help: Have you looked at this? http://playerframework.codeplex.com/

Why doesn't RTSP (sdp) Quicktime embed work in FF and IE?

I have an embed code that plays streaming video:
<object width="640" height="480" id="qt" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="MY STREAM URL">
<param name="autoplay" value="true">
<param name="controller" value="false">
<embed id="plejer" name="plejer" src="/poster.mov" bgcolor="000000" width="640" height="480" scale="ASPECT" qtsrc="MY STREAM URL" href="MY STREAM URL" kioskmode="true" showlogo=false" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/">
</embed></object>
The embed works as expected in Chrome. However in FireFox(3.6) and IE(9) I get a quicktime logo. I've checked my quicktime player prefs and I don't see a streaming or sdp option in the mime options.
Any ideas why I'm seeing this issue?
Your embed tag is set up to initially display a "poster" video (at /poster.mov, and then change to the stream when its clicked on. The object tag isn't (and also skips many of the parameters you're including in the embed). The general idea with these embed inside object schemes (particularly with QuickTime) is to pass the same parameters in both tags, the object covering IE, the embed covering basically everybody else. – John Flatness

How to play an AVI file in a video tag?

I'm wondering if it's possible to make a browser play a AVI file within a video tag.
Everything I found on the web talking about it focus on MP4 and Ogg formats but nobody talks about the AVI format.
The only solution I found is to drop the video tag and make the video playable using JW Player.
Only the DivX web player can stream avi files. actually, theres a plug in for vlc to stream avi files also, but its buggy.
Sometimes it's a pain in the ass to get a solid answer. its one of the big sucks of the internet.
<object id="ie_plugin" classid="clsid:67DABFBF-D0AB-41fa-9C46-CC0F21721616"
width="660"
height="300"
codebase="http://go.divx.com/plugin/DivXBrowserPlugin.cab">
<param name="custommode" value="stage6" />
<param name="autoPlay" value="false" />
<param name="src" value="link-to-avi" />
<param name="bannerEnabled" value="false" />
<embed id="np_plugin" type="video/divx"
src="link-to-avi"
custommode="stage6"
width="660"
height="300"
autoPlay="false"
bannerEnabled="false"
pluginspage="http://go.divx.com/plugin/download/">
</embed>
</object>
note where it says "link-to-avi" twice :)
Today there are excellent approaches to deal with it. One of them is the module fluent-ffmpeg found on npm.
It requires the previous installation of FFMPEG
The support of avi isn't direct. It will be necessary build a server with node to serve your html.