I have integrated rtmp with node server now i need to show rtmp stream in my angular 6 app as live video. Any suggestion for me?
I have tried vidojs and other player but that did not worked for me.
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{"example_option":true}'>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4" />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" />
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
https://www.npmjs.com/package/ngx-webcam
The one component gives you full control and lets you take snapshots via actions and event bindings
Stream needs to be delivered in format that can be played on HTML5 (HLS, MPEG DASH, WebRTC).
If stream is H264+AAC can be delivered using Wowza SE as HLS to Safari, DASH to Chrome/Firefox (adaptive playback is required depending on browser)
You can try this technology in this demo that should play HLS in Safari and DASH in Chrome:
https://videonow.live/channel/videonowlive/
If using different codecs or want to publish as WebRTC, transcoding will also be required.
For further research, deploy this free open source WP plugin for running these capabilities on your own setup:
https://wordpress.org/plugins/videowhisper-live-streaming-integration/
Web browsers do not support rtmp without flash. You must convert to a format it does support like DASH, and use a player like video.js
Related
I want to add a live stream to my site. Is it possible?
The source: https://istanbuluseyret.ibb.gov.tr/bagdat-caddesi/
<video id="videojs620230c0a8c70_html5_api" class="vjs-tech" preload="auto" autoplay="" loop="" muted="" poster="https://services.ibb.gov.tr/cam_out/wp-content/uploads/sites/4/2021/07/bagdat_caddesi1_05.jpg" data-setup="{"fluid":true,"plugins":{"airplayButton":{}}}" playsinline="" src="blob:https://istanbuluseyret.ibb.gov.tr/539fef53-2de7-4324-bc51-e493701508e6">
<source src="https://livestream.ibb.gov.tr/cam_turistik/cam_trsk_bagdat_cad_1.stream/playlist.m3u8" type="application/x-mpegURL">
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
</video>
You cannot use M3U8 files in a <video> tag.
To play the video you must read the M3U8 (text) file and pass the inside links to the <video> tag using a buffer, so this means using MediaSource Extensions (MSE) method. There are tutorials online on how to prepare your video data for MSE
Alternatively just use a ready-to-use video player that understands M3U8 playlists.
One example player is videoJS.
(test your .m3u8 file here: https://videojs.github.io/videojs-contrib-hls/)
I have a video running in the background of my website. It's HTML5 with a jpg fallback.
I use this HTML
<video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0">
<source src="video/nieuw.mp4" />
<source src="video/nieuw.webm" type="video/webm; codecs=vp8,vorbis" />
<source src="video/nieuw.ogg" type="video/ogg; codecs=theora,vorbis" />
<img src="img/bg1.jpg" alt="bg" />
</video>
I have fiddled around with the sequence of these <source> files, and I have fiddled a lot with converting tools. I used MIRO convertor, VLC, iMovie etc.. etc...
But I always end up with at least one browser that doesnt show the movie, for example Safari on Mac desnt work, all other browsers do. Or All browsers but windows / Chrome doesnt work. And it's driving me mad.
Can you guys please post your best practices? What sequence of html5 code do you use, and which program / settings do you use to convert the movie?
Thanks a lot!
It's 2016, MPEG-4/H.264 video format has won the battle, you can drop webm and ogv http://caniuse.com/#feat=mpeg4
Convert with AWS Elastic transcoder
The best way to do is integrate any player(like jwplayer) as the video tags are not supported by all browsers and convert all videos in one common format at time of upload as per your player support using any library like ffmpeg lib.
http://www.w3schools.com/html/html5_video.asp
Codecs are beyond the scope of the w3c specification. Zencoder has a pretty good blog post about this exact issues here:
https://www.brightcove.com/en/resources/blog/what-formats-do-i-need-for-html5-video/
Ok, I got it working in every common browser, with a fallback for the olders ones. I used VLC to convert the files, and used the HTML below:
<video id="video_background" volume="0" muted="muted" loop="loop" autoplay="true" preload="auto">
<source type="video/mp4; codecs=avc1.42E01E,mp4a.40.2" src="video/pr6.mp4"></source>
<source type="video/webm; codecs=vp8,vorbis" src="video/pr6.webm"></source>
<source type="video/ogg; codecs=theora,vorbis" src="video/pr6.ogv"></source>
<img alt="bg" src="img/bg1.jpg">
</video>
I would like to stream my desktop to some other devices like ps3, tablet or smartTV.
The simplest solution for this I thought was vlc streaming to a html5 page stored on a local server. I start vlc in my commandline with the following transcode settings:
:sout=#transcode{vcodec=h264,vb=100,scale=0,acodec=mpga,ab=96,channels=2,samplerate=44100}:standard{access=http,mux=ts{use-key-frames},dst=:8080}
The html code:
<video width="704" height="396" controls="controls" loop="loop" autoplay="autoplay">
<source src="http://####:8080/" type="video/mp4" />
Your browser does not support the video tag.
</video>
I can watch the stream into vlc on a different machine. According to this post:
Streaming mp4 with vlc to html browser
mux=mp4 won't create a working stream. Also reported in the vlc manual. Unless I am mistaken they define ts as the right mux for h264.
So where is the clue?
You can't use mp4 mux format to pack h264 encoded video. You must use asf or ts mux. Ts and asf not working with html5 video player. Use vlc plugin to play video or change video codec to other such theora...
I am trying to make a video streaming site and I want to use VLC to play my video. However, I want other people who doesn't have VLC to be able to view my videos through a VLC plugin. Is it possible? I want to use VLC because it can play anything.
The viewer has to have VLC and the Browser Plugin Installed on there pc, depending on the file format of the video you could use the HTML5 Video tag.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
Update your browser.
</video>
This will only work if the viewer has a html5 ready browser meaning old versions of IE wont be able to see the video but the code will tell them that they have to update there browser
You might want to checkout the current beta of http://www.projekktor.com - it's a generic HTML 5 player, which uses whatever backend is available on the user's PC. Since recently, it also supports VLC: https://twitter.com/projekktor/status/354187957571297281
GOAL
FLV Video files being served by Wowza Media Server to be played on all devices, platform/browser independent. I'm currently working with a player loaded with AJAX which uses VideoJS.
WHERE IM WORKING
http://activemd.net/html5/
THE CODE
It seems like you have to provide 3 different types of videos for HTML5, so my approach is trying to have Wowza transcode them to the 3 types.
<video id="example_video_1" class="video-js vjs-default-skin" controls="" preload="none" width="432" height="300" poster="amd-poster.jpg" autoplay="" data-setup="{}">
<source src="http://74.208.104.107:1935/riverview/mp4:ri_martino.flv" type="video/mp4">
<source src="http://74.208.104.107:1935/riverview/webm:ri_martino.flv" type="video/webm">
<source src="http://74.208.104.107:1935/riverview/ogg:ri_martino.flv" type="video/ogg">
</video>
PROBLEM
My videos won't play, anywhere. When I use http versions of the videos, my player plays them without a problem.
WHAT I HAVE TRIED
An example from the StackOverflow post at: Wowza, iOS and HTML5 video tag
An example from the Wowza post at: http://www.wowza.com/forums/content.php?35-How-to-set-up-video-on-demand-streaming
QUESTION
How can I get my FLV videos to be streamed to all devices, regardless of platform or browser?
Am I going about the whole transcoding approach incorrectly?
Thanks.
Rick
WebM & Ogg are not supported for Video On Demand (VOD) application. You must convert the file to MP4.
You can also use JW Player which is a Wowza supported player.