I use HTML5 <video> tag to play videos in my LAN from different computers. In my current setup, I have got a server, which provides the html page and all the videos I want to play. There are some computers which should play these videos by loading the html page. In general that works already. But sometimes after a while playing a video, the console says failed to load resource and the playing stops immediately. I thougt, this is maybe some sort of timeout in my LAN and I had the idea to play the videos locally, i.e. copy all videos to each computer and just provide the html on the server. The server html then, just links to file://.../.
but when I tried this approach on the server, the video was stopping every few seconds and it did not buffer at all. It was completely impossible to watch the video.
Videos are *.mp4; I run chrome on all win7 computers, Server is XAMPP.
Is there either a way to catch the failed to load resource error, or a way to play local videos in a reasonable quality?
Did none of you have problems like that yet?
A few thoughts:
does your config include 'AddType video/mp4 .mp4'?
is it possible that progressive loading has been disabled somehow?
how large are the videos? there are reports of > 30Mb files having playback issues in XAMPP
if you convert to another format ( .ogg, .avi, similar ) do they playback any better?
if you use a .php (or similar) file to provide progressive loading - any change? IE Stream from the app instead of directly.
Related
<video id="mash-video-player"
src="videos/xyz.mp4"
width="100%"
height="100%"
controls
preload="metadata">
</video>
When the selected video is "clicked", the above HTML is dynamically built and injected into a "video player" and played back. The contents of the are replaced every time a different video is clicked.
There are many videos in the folder that get listed for playback. The first one clicked (not the first one in the list), usually gets displayed and played almost instantly. From there on, it's a roll of the dice. Click on the next one and it might take 15 seconds. Might not ever be able to be played. Even if the same exact video file is clicked.
The original video files are around 100-300MB. I processed them down to 40-80MB. The video file size doesn't matter. The slow behavior is exactly the same.
One strange side-effect of this is that when it comes to refreshing the page to restart the webapp, the reload can take just as long or sometimes never get reloaded until I reboot the web server.
There are several stacko questions out there that have similar problems. I have reviewed and tried sensible solutions.
Encoding might be a problem, but these are MP4 video files, not very big.
% file xyz.mp4
xyz.mp4: ISO Media, MP4 v2 [ISO 14496-14]
Some of the solutions talk about the metadata being at the end of the file. So there is qtfaststart, now defunct and replaced by qtfaststart2. This python app attempts to move the metadata to an optimal location. Apparently all my videos are "optimal". This is not a solution.
Other solutions talk about caching and such. But even though 300MB might take some time to shove through a python HTTP server, it shouldn't take more than a few seconds. Ultimately that might be the core of the problem: using a python HTTP server.
As a work-around, I am running the video in a profoundly old-fashioned window.open() context, but it works as expected: videos load fast and clean using a "file:///videos/xyz.mp4" URL.
Hardware/Software:
Hardware: MacPro 3.7GHz Xeon, 32GB ram
Browser: Brave Version 1.46.134
Server: Python 3.9.2, HTTPServer, SimpleHTTPRequestHandler
Client and server are both running on the same machine.
Any and all suggestions welcome.
I'm running three Icecast servers, all streaming the same content. Since about two weeks, I got some users reporting that they cannot listen to the stream anymore. Their browser is trying to load the stream but it never starts playing. I started to dig into this a bit and I am able to reproduce the issue.
It's interesting that this issue does not occur on all devices. I got two PCs here, both on Windows 10, both running on the latest Firefox. One can stream without any issues, one starts downloading audio data but never plays it. Opening the Icecast mountpoint in VLC works in all cases and the stream starts within a second or so. On a device that is not playing the stream in Firefox, it neither works in Chrome. On the other hand, devices that are able to stream in Firefox also are in Chrome. I guess it has something to do with the OS..?
I started Wireshark on one PC that is affected by the issue and was able to see that the browser starts to download the audio data from the Icecast server but instead of playing it, it's caching it. I believe that the browser somehow "thinks" this is a download, not a stream. When I restart the Icecast process on the server during this caching period, the caching of the browser stops and it starts to play - but only for a few seconds, until the end of the cached stream is reached.
I assume that some browsers are waiting for some kind of EOF instead of just playing the stream. Of course, an EOF is never sent in a live stream.
Here is the link to the mountpoint of one of the Icecast servers: http://185.80.187.35/live
It seems that it doesn't matter which one of the three Icecast servers you use. If one works, the other two also work. If one doesn't, opening the stream from the other servers fail as well.
I have no idea what's happening there. Since the issue occurred, nothing in the setup has been changed. I tried to switch the audio format from MP3 to OGG, but this didn't fix the issue - so I switched back to MP3. I'm currently streaming at 64 kbps. I don't think this might be an issue since this worked for years, but might it be that such a low bitrate is not supported by some browsers any more? Should I raise the bitrate? Maybe add some HTTP headers to the Icecast config? I'm confused and running out of ideas.
PS: I just noticed that I got the same issue in Edge and IE. It really seems to depend on the PC, not the browser.
When the embedded player doesn't work on a device, the stream on its' own tab doesn't play either.
This is not the behavior I'm seeing.
The site is HTTPS, yes, but the stream isn't.
Due to new security restrictions, this is no longer valid. If you open your browser's developer tools, you'll see errors about it.
You need to enable HTTPS on your Icecast server, or downgrade your site to HTTP if you want to play from non-secure origins.
I am trying to develop a test taking website for students. In this website, students should be able to answer the questions(displayed in text format) by using webcam in one go. Currently I have implemented this feature using Flash, it captures the frames and simultaneously sends it to the server. The problem with this technique is that the quality(FPS) of my video is restricted and is dependent on the bandwidth of the internet connection. Also I am not in favor of using flash.
I want that as soon as student clicks on the start button, a timer should start to record the video. The video should get saved on the client's machine (without asking the client to mention the path) and on completion of video, it should automatically get uploaded on the server and when uploading gets completed, the video should be automatically deleted from the client's machine.
In short can anyone give me a starting point, so as to I can proceed with the work. Any helo will be highly appreciated.Thanks!
Here is a good example how to get webcam working on html5:
http://blog.teamtreehouse.com/accessing-the-device-camera-with-getusermedia
It doesnt tell how to upload the video to the server.
Currently I have implemented this feature using Flash, it captures the frames and simultaneously sends it to the server. The problem with this technique is that the quality(FPS) of my video is restricted and is dependent on the bandwidth of the internet connection.
That is actually incorrect.
The fps you're getting depends 100% on:
the webcam quality
the light available in the room (the more light the better)
The resolution you're recording at (lower res results in higher fps even with low quality webcams in low light)
The video should get saved on the client's machine (without asking the client to mention the path) and on completion of video, it should automatically get uploaded on the server and when uploading gets completed, the video should be automatically deleted from the client's machine.
Flash records by streaming (through rtmp) the audio/video data to a media server (Red5, AMS, Wowza). After the recording is stopped you could move the file to a web server and trigger a http download.
In what regards HTML the Media Recording API has been implemented by Firefox and Chrome 49 and it allows you to record to local RAM and download the file as .webm (the audio video codecs might differ btwn browsers).
Disclaimer: I work at Pipe which handles video recording.
I'm making an audio player on my website (which is powered through Wordpress) using jPlayer, but I can't get it to work in Chrome. I just found out that if I try to stream an mp3 player from my servers on Chrome, it won't even stream. Does anyone know why this might not work? Is there a way to force it to be able to stream so that I can get my jPlayer to work?
Try an example. Go to this page in both Firefox and in Chrome. It should stream fine on Firefox, and not play in Chrome. http://www.startingtofeelit.com/wp-content/uploads/2013/02/araabMUZIK-The-Prince-Is-Coming.mp3
I thought it might have to do with the MIME types. I'm not too familiar with these, but I opened my .htaccess file in the root folder of my server and added AddType audio/mpeg mp3 to the bottom, but this didn't seem to help either.
Since the stream can be played just fine, and you say you have very large images and when you close the page tab it works, I suspect that you are running into the concurrent connection limit.
Browsers will typically only make 3 or 4 requests to a server at a time. If those connections are used up, it is unlikely the browser will make an additional request for the MP3 stream until those connections are done. Ensure that you are using keep-alive, and optimize your site.
I am currently looking for how to accomplish what I have been told is possible.
I was told that we would be able use vlc to stream a webcam in linux which would allow for the following:
Recording the stream to the local machine for a later upload.
Play the stream as it's recording using Chrome's HTML5 video capabilities.
Send a start and stop command from the web for the vlc recording.
I have been researching this for quite some time and haven't been able to find a viable solution.
I am able to record video using VLC already with the following
vlc v4l2:// :v4l2-dev=/dev/video0 :v4l2-width=640 :v4l2-height=480 --sout "#transcode{vcodec=mpeg4,acodec=mpga,vb=800,ab=128}:standard{access=file,dst=capture_4.avi}"
Is this really even possible?
To answer your question if this is possible... YES it is BUT it's tricky. I can't answer all your points, only the part with streaming in VLC and displaying it in HTML5
You'll need a certain environment setup for this to work (Segmenter and correct MIME Type on server). I assume you are all on linux; which I am not (Mac OS / unix) but the principles behind it stay the same concerning the workflow of getting this to work. I'll try to explain - hope this helps in any way.
The setup I've had success with works the following way:
(1) STREAMING & RECORDING
local vlc streaming instance streaming audio and video -> producing a mpegts stream. Try changing your command to something like
vlc v4l2:// :v4l2-dev=/dev/video0 :v4l2-width=640 :v4l2-height=480 --sout "#transcode{vcodec=mpeg4,acodec=mpga,vb=800,ab=128}:standard{access=udp, mux=ts, sap, name=live-video, dst=224.0.0.1, port=1234}"
or
vlc v4l2:// :v4l2-dev=/dev/video0 :v4l2-width=640 :v4l2-height=480 --sout "#transcode{vcodec=mpeg4,acodec=mpga,vb=800,ab=128}:udp{dst=224.0.0.1,port=1234,mux=ts}"
I'm just giving you ported commands here which work on Mac. I don't know if they work on linux. Now you should be able to play the live stream with VLC by accessing the SAP announcement or directly with
vlc -vvv udp://#224.0.0.1:1234
You could then use another vlc instance to record the stream
vlc udp://#224.0.0.1:1234 --sout "#transcode{vcodec=mpeg4,acodec=mpga,vb=800,ab=128}:standard{access=file,dst=capture_4.avi}"
There is a duplicate command in VLC which I have been playing around with but without success. This way you could stream and record with one instance. Maybe this works on linux.
(2) SEGMENTING
mediastreamsegmenter to segment your mpegts stream into deliverable segments. I'm using Apple Server Software. Apple provides you with a mediastreamsegemnter which can take a live mpegts stream and convert it into segments which are added to a playlist. I don't know of a live segmenter in linux. Maybe someone else does.
(3) DELIVERY
html 5 page linking to the video playlist containing the segments. The mediastreamsegmenter will produce a playlist playlist.m3u8, which then can be accessed with HTML 5
<video width="640" height="480">
<source src="YOUR_PATH/playlist.m3u8" />
</video>
Some helpful tutorials concerning this topic are:
Info on the setup and basic commands
VLC examples in order to stream
I know this is not a complete solution to your problem, but this will maybe give you some nice starting points to look into.