MediaSource JavaScript API extends the HTMLMediaElement to allow JavaScript to generate media streams for playback.
Questions tagged [media-source]
325 questions
5
votes
3 answers
HTML5 MediaSource works with some mp4 files and not with others (same codecs)
I was playing around with MediaSource API. The code is taken directly from Mozilla's example page: https://developer.mozilla.org/en-US/docs/Web/API/MediaSource/endOfStream
…
Xander
- 1,114
- 2
- 9
- 18
5
votes
0 answers
SourceBuffer buffered not updating length
In the following code, console.log(sb.buffered) is giving me a TimeRanges object of length 0. Why is this? I checked what xhr.response is, and it is an ArrayBuffer of approximately 58000 byteLength.
var ms;
var sb;
var mimeCodec = 'video/mp4;…
Lucas Cheon
- 51
- 1
5
votes
5 answers
Delete a TextTrack from a video
Is there a good way to delete a single TextTrack added via JavaScript to a HTML5
frapontillo
- 10,499
- 11
- 43
- 54
5
votes
0 answers
MediaSource SourceBuffer closes after 2 appendBuffer calls
I'm trying to stream a webm video file to the client.
The first chunk (which is about 4466 bytes long) "works" (using appendBuffer), as I can see the
Jelle De Loecker
- 20,999
- 27
- 100
- 142
5
votes
0 answers
Bases stream-video concepts (from NodeJS to MediaSource)
I'm searching for a solution in streaming viedo from NodeJS server to client, and then merge them with MediaStream API.
The point is that I don't know how streaming really works.
How I have to send the video chunks throughout HTTP protocol? I see…
RikyTres
- 676
- 9
- 31
4
votes
1 answer
MediaSource API - Safari pauses video on buffer underflow
I am trying to stream low latency video to the browser using the MediaSource API. For context, I am receiving live H.264 video over a WebRTC data channel (with custom reliable delivery protocol), muxing into a fragmented MP4 container in the browser…
Will
- 135
- 2
- 9
4
votes
0 answers
How to play and seek fragmented MP4 audio using MSE SourceBuffer?
Note:
If you end up here, you might want to take a look at shaka-player and the accompanying shaka-streamer. Use it. Don't implement this yourself unless you really have to.
I am trying for quite some time now to be able to play an audio track on…
Stefan Falk
- 23,898
- 50
- 191
- 378
4
votes
1 answer
How to pass a h264 encoded MediaRecorder stream to a MediaSource in Chrome?
Our screen recording chrome extension allows user to record their screen using the getDisplayMedia API, which returns a stream that is fed into the MediaRecorder API.
Normally, we'd record this stream using the webm video container with the newer…
Tom
- 8,536
- 31
- 133
- 232
4
votes
0 answers
Stream video from MinIO bucket on Node.js server using HTML5 video tag
I need to stream videos stored through MinIO using HTML5 MSE. I am using the minio node client on a sapper server to serve the video stream, with an endpoint like this:
import Minio from 'minio'
const minioClient = new Minio.Client({
endPoint:…
Youssef Moawad
- 2,846
- 5
- 28
- 50
4
votes
2 answers
Using MediaSource to stream a video file in a React component
I'm trying to stream a video file using Javascript's MediaSource API in a React component.
Here's my component:
const RawPlayer: React.FC= () => {
const videoRef = useRef(null);
useEffect(() => {
const mimeCodec =…
Anatole Lucet
- 1,603
- 3
- 24
- 43
4
votes
1 answer
Javascript MediaSource API and H264 video
I have a problem playing a H264 video using javascript MediaSource Extension API.
I'll describe the scenario with details below.
I've already successfully achieved the result playing audio and video source
of vp8, vp9, opus and vorbis codec, also…
Sergio Rinaudo
- 2,303
- 15
- 20
4
votes
1 answer
HTML5 DVR not working -- SourceBuffer removed from parent element
Goal
I'm attempting to create a rudimentary "DVR" for an HTML5 video element by utilizing MediaRecorder, MediaSource, and SourceBuffer. At the moment this is just a proof of concept. However since many projects like HLS.js take advantage of the…
stevendesu
- 15,753
- 22
- 105
- 182
4
votes
0 answers
drawImage from MediaSource video to canvas not showing image in Safari
drawImage from MediaSource video to canvas not showing image in Safari 11.1 (Example: video and canvas). When using url to video instead of MediaSource (set video.src) then image drawn on canvas (Example).
There is no problem in other browsers. In…
Andrey Starostin
- 113
- 5
4
votes
0 answers
hls.js control segment load order if maxBufferLength is large for low speed connections
Each ts file is 5 seconds long, with a size of 2 mb each. A 512kb/s connection should be able manage and stream it without any hickups.
If one has a maxBufferLength say of 30 seconds, and one starts the player at say minus 30 seconds "livetime",…
mjs
- 21,431
- 31
- 118
- 200
4
votes
0 answers
Simultaneous Audio/Video Segmented Streams in MSE
What I'm trying to do is load an MPD file with two AdaptationSets, a video listing and an audio listing (both belonging to the same, original mp4 and stripped with MP4Box) – ultimately to play them both simultaneously in an attempt to obtain the…
Chris Calo
- 346
- 4
- 14