I have an IP CAM which provides access to the audio/video using RTSP protocol. I can see the video using VLC player but I would like to be able to embed this video in a HTML5 page.
I know most browsers cant handle RTSP with HTML5. So I was wondering: is there any PHP code that I can use to parse RTSP video and output a compatible Chrome video format that I can play using <video> tag? Is there someway PHP output some stream of data so I can send it to the browser parse it into HTML5 video container?
You could use ffmpeg to trascode from RTSP and HLS and then display that in a browser which supports it:
Something like this will give you a starting point, though you may need to tune it. If you're going off your own local network though you may need to use a 3rd party streaming solution like Azure Media Services or Wowza
ffmpeg -i rtsp:<stream> -fflags flush_packets -max_delay 1 -an -flags -global_header -hls_time 1 -hls_list_size 3 -hls_wrap 3 -vcodec copy -y <file>.m3u8
Related
Chrome/Electron don't normally support H.265 videos. I want the user to be able to play .mov files recorded by Apple devices in my app. How can I do this?
Possible approaches:
Use ffmpeg to transcode to H.264 in real-time, which will be resource intensive (not ideal)
Use WebAssembly to render the video in a <canvas> tag (not ideal)
Fork and manually add H.265 codec support to Chrome/Electron like https://github.com/AAAhs/electron-hevc (overkill)
Use a native module that renders the video in a <canvas> or BrowserView
We ran into a similar problem on our project where users from the iOS app were sending video messages to browser users. In the end, the easiest solution to the problem was to record the video manually in the h264 codec. An example from the documentation:
https://developer.apple.com/documentation/avfoundation/cameras_and_media_capture/capturing_video_in_alternative_formats
I want to stream a real-time video flux that come from udp into a HTML video tag.
I made some research but I got a lot of informations and I struggle to have a clear overview of what I can do and what I can't.
The video flux use H.264 and AAC codecs, MP4 container and has a 3840x2160 (4K) resolution. I'd like to play it on Chrome (latest version).
As I understand from now, HTML video tag can natively read H.264/AAC videos. I made it work with the video direclty on my server (I'm using Meteor JS + React).
I learnt to use FFmpeg to stream an udp flux read by VLC player, and then I used FFserver (I know it's deprecated) to create an HTTP flux also read by VLC but not by the HTML video tag.
So... my question is : is HTML video can natively read video stream from HTTP ?
I've seen a lot of discussions about HLS and DASH, but I didn't understand if (and why) they're mandatory.
I read a post about someone creating a HLS m3u8 using only FFmpeg, is it a viable solution ?
FFserver configuration
HTTPPort 8090
HTTPBindAddress 0.0.0.0
MaxHTTPConnections 20
MaxClients 10
MaxBandwidth 100000
<Feed feed.ffm>
File /tmp/feed.ffm
FileMaxSize 1g
ACL allow 127.0.0.1
</Feed>
<Stream stream.mpeg>
Feed feed.ffm
Format mpeg
AudioCodec aac
AudioBitRate 256
AudioChannels 1
VideoCodec libx264
VideoBitRate 10000 // Total random here
VideoBitRateRange 5000-15000 // And here...
VideoFrameRate 30
VideoQMin 1
VideoQMax 50
VideoSize 3840x2160
VideoBufferSize 20000 // Not sure either
AVOptionVideo flags +global_header
</Stream>
I had to specify QMin and QMax to avoid error message but I don't really understand what is it.
FFmpeg command line
ffmpeg -re -i bbb_sunflower_2160p_30fps_normal.mp4 -strict -2 -r 30 -vcodec libx264 http://localhost:8090/feed.ffm
This work with VLC. I'm working with a file on my computer before moving to an udp stream.
Media support on browsers is a constantly changing landscape so it is worth having some places to look for the latest view.
The table at this link is generally up to date in my experience:
https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats
You'll notice that the table includes the codec and the container - e.g. h.264 in mp4. This is important to understand as a codec may be supported by your browser but not in the container you want.
For the containers and codecs supported, the HTML5 tag will support HTTP streams or more accurately HTTP downloads. Most severs and browsers will support downloading the video file in chunks so that you can start viewing before the video is fully downloaded.
For better performance across different device types and different network conditions, video is often delivered via an Adjustable Bit Rate (ABR) protocol such as HLS or DASH. ABR also allows the client device or player download the video in chunks, e.g 10 second chunks, but the server provides each chunk in multiple different bit rate versions. The player can select the next chunk from the bit rate most appropriate to the current network conditions. See some more info in this answer also:
https://stackoverflow.com/a/42365034/334402
I need to embed a live video with url rtsp. I'm using webrtc, but I'm able to get just local camera live video. I'm streaming with vlc server several files, and I need to receive this video with rtsp live protocol due to network latency. How can I put it into html5 page using webrtc api?
I think webRTC is not the technology you are looking for.
What you need is just to use a HTML5 video element to receive the streaming. Take a look at https://github.com/Streamedian/html5_rtsp_player/wiki/HTML5-RTSP-Player
I have webcam C920 that can output h264 （constrained baseline）.
I want to stream this C920s h264 video to browser.
I use h264_live_player for streaming video.
h264_live_player is javascript library for h264 streaming to browser, but it can only decode baseline profile.
so I want to know how to change C920s output h264 profile.
if i can't change C920s output profile, please tell me how to streaming to browser from C920 no reencoding.
Try using motion. Look at this tutorial. If you do not need to stream to a web browser then VLC will also work and VLC is also cross platform. Look at this thread for instructions to use VLC.
I want to show a stream of an IP camera in html website.IP camera send data with RTSP protocol. I used some codes like html5 RTSP && Google WebRTC. But I feeled these codes can't receive and show RTSP streams and not worked for me. I tested some methods that uses VLC but I wan't to show stream without using VLC and I want to implement this program as client side program.
There is no simple and good way to play RTSP directly in browser. It is possible to do it on old Android devices, on some STB or with VLC plugin which is not a good way to go.
You will have to install media server that will convert your RTSP to something for browser.
It is possible to take ffmpeg that will convert your rtsp to hls and have a live video translation from camera, but if you want more feature like stream management or recording you can look at commercial options like Flussonic (I'm working on it) or Wowza.
You can also google something like "streaming server" and look for RTSP and HLS/RTMP protocols in specification.
There has media source extensions(MSE) can support live h264 with very low latency(Chrome Firefox Safari below 1s). but there need a gateway to convert RTSP to fragmented MP4.