使用 videojs-record 和 videojs 进行直播

Posted 2023-03-07

【中文标题】使用 videojs-record 和 videojs 进行直播

【英文标题】：Live streaming using videojs-record and videojs

【发布时间】：2020-05-15 04:52:31

【问题描述】：

我正在尝试在我的应用程序中进行视频聊天，并使用 videojs-record + videojs 来实现。 videojs-record 录制网络摄像头（已经在工作），videojs 在另一侧重现视频。通过使用时间戳事件和timeSlice 属性，我设法将录制的视频按每秒分割。

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
    
);

所以我设法将上述片段上传到亚马逊的 S3，并使用 Python 端点返回包含上传文件的 HLS 文件：

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\nurl\n'.format(duration=duration, url=url)
    ended = (obj.created_at.replace(tzinfo=pytz.utc) + timedelta(seconds=10)) < now

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

虽然，该 HLS 文件不起作用。 videojs 播放器显示视频的正确完整时间，但从不开始播放，并且不记录任何错误。如果我尝试使用Bitmovin's player demo 重现视频，它会显示 SOURCE_MANIFEST_INVALID。

我也尝试过创建 XML+DASH 文件而不是 HLS 文件，但效果不佳。而且我还尝试将 videojs-record videoMimeType 属性更改为其他值，例如 video/webm;codecs=vp8,opus 或 video/mp2t;codecs=vp8,opus，但它也没有改变任何东西。

此外，返回 HLS 文件的 @action 具有使用该渲染器的 renderer_classes 属性：

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

最后，我在 S3 中以这种方式配置了 CORS，以防万一：

<?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>

顺便说一句，@action 通常会被阻止，因此只有预期的用户才能看到它，但此时我已将其 permission_classes 值更改为 AllowAny，因此我可以在 Bitmovin 等网站上进行测试。

我到底做错了什么？

【参考方案1】：

我放弃了，最终使用 Jitsi 而不是 videojs-record。我不得不在 Vue 中使用 iframe 运行它，但它成功了，而其他所有的都失败了。

在过去的 18 天里，我一直在尝试自己制作一个直播，那时我几乎可以在一个晚上让 Jitsi 与我的项目一起工作。我推荐他们的 Docker，它很容易设置。

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