CODEWITHSUNDEEP
javascriptgstreamerh.264media-source
gregoiregentil
gregoiregentil

Reputation: 1899

Decode h264 video in MediaSource sourcebuffer from Gstreamer

I generate a h264 baseline profile level 2 video via the gstreamer pipeline:

... ! videoenc ! queue ! h264parse ! appsink caps=video/x-h264,alignment=(string)au

I receive the stream in an html page where I do:

this.mediaSource = new MediaSource();
console.log(MediaSource.isTypeSupported('video/mp4; codecs="avc1.424014"'));//True
const vv = document.getElementById("mytryplayer") as HTMLVideoElement;
vv.src = URL.createObjectURL(this.mediaSource);
this.mediaSource.addEventListener('sourceopen', (_) => {
        this.sourceBuffer = this.mediaSource.addSourceBuffer('video/mp4; codecs="avc1.424014"');
        this.sourceBuffer.addEventListener('updatestart', function(e) { console.log('updatestart: ' + e); });
        this.sourceBuffer.addEventListener('error', function(e) { console.log('error: ' + e); });
});

and I feed with:

this.sourceBuffer.appendBuffer(received_stream_from_app_sink);

The Gstreamer app_sink sends data and it's properly received in 'received_stream_from_app_sink' in the HTML page. I can decode the same stream in Android so I know that both the transmission and the original video stream are correct.

After the second packet, I receive the error callback and the source buffer is being closed.

Any idea what I'm doing wrong?

Upvotes: 2

Views: 481

Answers (0)

Related Questions