I am developing a web app which will be able to live stream or at least send video files which both user can access at same time.
I am using HTML5 and node.js
Is this a linux machine? I would recommend ffmpeg's ffserver for streaming. It gives you many configuration options and runs stable on my machine here. Like that you could convert your streaming source to the format you need for your player.
Instead of streaming, we can do one thing
If you have a server machine then upload that audio/video on that server machine.
You can upload in Node.js with the help of formidable module.
And since HTML5 allows video and audio so no need of flash player, just make sure the audio/video will be compatible in all browsers (for videos, mp4 works in all major browser Check this link for more information on HTML Videos). And after upload send a command(video location) from server to all clients which plays the video from the desired location in javascript
<html>
<body>
<video id='videoPlayer' width="320" height="240" controls="controls">
<source id='mp4Source' src="movie.mp4" type="video/mp4" />
<source id='oggSource' src="movie.ogg" type="video/ogg" />
</video>
<!-- You MUST give your sources tags individual ID's for the solution to work. -->
<script>
socket.on('videoLocation',function(data)
{playVideo(data);});
function playVideo(location){
var player = document.getElementById('videoPlayer');
var mp4Vid = document.getElementById('mp4Source');
player.pause();
// Now simply set the 'src' attribute of the mp4Vid variable!!!!
// (...using the jQuery library in this case)
$(mp4Vid).attr('src', location);
player.load();
player.play();
}
</script>
</body>
</html>
Related
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
I am doing a simple cordova app using a large local html5 video. The large local video is 1.76GB. I have tried the assets directory of www/videos/myfile.mp4 and the raw directory of /platforms/android/res/raw/myfile. I am referencing the directories in the tag correctly. I can get a 225MB video file working in either directory. A 452MB file works only in the raw folder but not the videos folder. I can get the 1.76GB file working if I reference it from external SD storage. I don't want the files to have to live on the SD card for security of the video file. So some locations work, but only up to a certain size, I am not sure what is the correct location or protocol for this large file. I have to play it locally and securely, so SD storage is out. The device will be offline, so using the internet is out to stream-download media. I know it will be a large apk file and I will have to do my own distribution.
Any hints on what is the best way to get the large file working from a directory inside the app will be appreciated.
Using latest Visual studio community and cordova CLI 6.3
I am trying to get the large file to work on android. The html5 video tag code is not really the issue, but is included below. I am using videojs and works fine, just not the very large file.
raw folder code
<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" width="640" height="264" poster="images/oceans.png" data-setup='{"fluid": true}'>
<source src="android.resource://com.MYAPP.MYAPP/raw/myfile" type="video/mp4">
<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>
assets folder code
<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" width="640" height="264" poster="images/oceans.png" data-setup='{"fluid": true}'>
<source src="videos/myfile.mp4" type="video/mp4">
<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>
Here follows the code snippet am using where TextToSpeech is a servlet which returns audio stream (via ServletOutputStream).
<audio autoplay controls>
<source src="/TextToSpeech?input=Welcome" type="audio/wav" />
Your browser does not support the audio element
</audio>
But Chrome browser is NOT auto-playing the audio. Can any one help me please?
P.S: I did test the audio stream by saving it to a file and it played well. So no issue with audio that returned from the server.
On mobile the audio autoplay function is usually disabled in order to avoid data traffic usage without explicit action from the user.
You could workaround that using javascript, when the page is loaded (i.e. jQuery.onready() ) you can start playing the audio file with something like that:
var audio = document.getElementById("audioId");
audio.autoplay = true;
audio.load();
I'm using the HTML5 audio tag to create a music player on my remote server. The audio tag works as expected when one computer is playing.
However, I'm getting a problem where if two computers are trying to play the same audio file, one of them will not stream until the other has paused its playing, finished streaming, or stopped streaming.
Is there some programming/server configuration that lets me stream the same file to multiple devices at the same time?
Here's the code, as requested
<html>
<body>
<audio id="jukebox" controls>
<source id="musiclocation" src="/music/test.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
this my code
<audio preload='false' id='player'>
<source src='https://dl-web.dropbox.com/get/mp3/player.wav?w=7e152d8e' />
</audio>
<audio preload='false' id='ai'>
<source 'https://dl-web.dropbox.com/get/mp3/ai.wav?w=431eb010'/>
</audio>
js
playerWav = document.getElementById('player', false);
aiWav = document.getElementById('ai');
...
if(contact_player(ball, player)){
playerWav.play();
...
if(contact_ai(ball, ai)){
playerWav.play();
playerWav.play() dont play( need help plees
wav files are not officially supported by HTML5 players and have no compression and therefore obscene bitrates. Use an officially supported format.
A summary of a few possible problems:
There is no src= in the second source tag.
There is no type specified in either source tag. (Try type="audio/wav".)
The links to the audio files are broken, although that may be because they are links to your private Dropbox and require you to login.