Live streaming using videojs-record and videojs

Question

I'm trying to make a video chat inside my application, and using videojs-record + videojs to do so. videojs-record to record the webcam (which is already working), and videojs to reproduce the video in the other side. By using the timestamp event, with the timeSlice property, I've managed to split the recorded video by each second.

this.player = videojs('#myVideo', this.options, () => {});

var player = this.player
var that = this

this.player.on('startRecord', () => {
    that.segment = 0
});

player.on('timestamp', function() {
    if (player.recordedData && player.recordedData.length > 0) {
        var binaryData = player.recordedData[player.recordedData.length - 1]
        that.$emit('dataVideoEvent', {video:binaryData, segment_index:that.segment})
        that.segment += 1
    }
});

So I've managed to upload the said segments to Amazon's S3, and have used a Python endpoint to return a HLS file containing the uploaded files:

duration = 1
totalDuration = len(list)
string = ('#EXTM3U\n'
            '#EXT-X-PLAYLIST-TYPE:EVENT\n'
            '#EXT-X-TARGETDURATION:3600\n'
            '#EXT-X-VERSION:3\n'
            '#EXT-X-MEDIA-SEQUENCE:0\n')
ended = False
now = datetime.utcnow().replace(tzinfo=pytz.utc)
for index, obj in enumerate(list):
    url = {retrieving url based in obj}
    string += '#EXTINF:{duration}, no desc\n{url}\n'.format(duration=duration, url=url)
    ended = (obj.created_at.replace(tzinfo=pytz.utc) + timedelta(seconds=10)) < now

if ended:
    string += '#EXT-X-ENDLIST'

Although, that HLS file isn't working. The videojs player shows the proper full time of the video, but never starts to play it, and logs no errors. If I try to reproduce the video using Bitmovin's player demo, it says SOURCE_MANIFEST_INVALID.

I've also tried to create a XML+DASH file instead of a HLS one, but it didn't work as well. And I've also tried to change the videojs-record videoMimeType property to other values, like video/webm;codecs=vp8,opus or video/mp2t;codecs=vp8,opus, but it also didn't change a thing.

Also, the @action that returns the HLS file has a renderer_classes property using that renderer:

class HLSRenderer(BaseRenderer):
    media_type = 'application/x-mpegurl'
    format = 'm3u8'
    level_sep = '.'
    header = None
    labels = None
    writer_opts = None

    def render(self, data, media_type=None, renderer_context={}, writer_opts=None):
        return data

And at last, I've configured CORS in that way in S3, in case that's relevant:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Range</AllowedHeader>
</CORSRule>
</CORSConfiguration>

And by the way, the @action is usually blocked so only the expected user can see it, but at this moment I've changed its permission_classes value to AllowAny, so I can test in websites like Bitmovin.

What exactly am I doing wrong?

VitorMM VitorMM · Accepted Answer · 2020-06-02T05:29:49

I gave up and ended up using Jitsi instead of videojs-record. I had to run it with an iframe within Vue, but it succeed where all the rest failed.

I've spent the last 18 days trying to make a live stream by myself, when I could make Jitsi work with my project in almost one single night. I recommend their Docker, it's pretty easy to set up.

https://github.com/jitsi/docker-jitsi-meet

Live streaming using videojs-record and videojs

1 Answers