如何将 Django 3 中的 mp4 视频流式传输到 Vue.js

Posted

技术标签:

【中文标题】如何将 Django 3 中的 mp4 视频流式传输到 Vue.js【英文标题】:How to stream mp4 videos from Django 3 to Vue.js 【发布时间】:2020-09-29 04:17:17 【问题描述】:

我正在尝试将 mp4 视频流从 Django 加载到 Vue.js。我遵循解决方案here 并通过我的axios API 获得了一个字节字符串,我将其连接到data:video/mp4;base64,,然后将其绑定到视频标签的:src 属性,但视频没有显示。这是将视频从 Django 3 流式传输到 Vue.js 的正确方法吗?我做错了什么?

Api.js 代码 sn-p:

import axios from 'axios'

export default () => 
    return axios.create(
        baseURL: `http://127.0.0.1:8000/`,
        headers: 
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        
    )

Video.vue组件代码sn-p:

    methods: 
        async stream() 
            return await VideoService.stream(this.video)
            .then(function(data) 
                return data.data;
            );
        
    ,
    props: ['data'],
    watch: 
        data: 
            deep: true,
            immediate: true,
            handler(curr, prev) 
                this.video = curr;
                this.stream().then(data => 
                    data = Buffer.from(data, 'binary').toString('base64');
                    this.video = 'data:video/mp4;base64,'+data;
                );
            
        
    

正如该答案的 cmets 中所建议的,我还将 src 设置为 Django api 端点,例如src="/video/test.mp4,但我可以在终端中看到它没有到达 Django 路由。如何让链接的解决方案与 Vue.js 一起使用?

我从 Kevin 的 Django 视图中得到的原始字符串的图片:

当我使用 Buffer 转换为 base 64 时的另一个图像:

【问题讨论】:

尝试确保您的 html 是正确的。见jsfiddle.net/45y3wtj0。您能否在代码中重新创建该视频?然后将 src 属性替换为您服务器的端点 url。 @KevinLee 是的。该视频链接适用于我的 vue 代码。 现在检查您的端点是否正确。使用 curl 或 Postman 之类的工具,您能否成功访问 Django 端点? @KevinLee 是的,与邮递员合作。在邮递员 ui 中显示我的视频。 好的,那你的错误一定在别处 【参考方案1】:

如果您对视频使用相同的组件,则将视频流式传输到 Vue.js 所需的最终解决方案是使用 v-html 设置 src 标签,以便您可以动态设置 src。创建组件后,直接执行src="http://localhost:8000/v/video.mp4" 将不起作用。所以除了Kevin的代码,只需在视频组件中进行如下操作即可:

<template>
    <div>
        <video v-html="src" autoplay="" controls="" loop="" muted="" frameborder="0">
            Your browser does not support HTML videos.
        </video>
    </div>
</template>

<script>
export default 
    data() 
        return 
            src: ''
        
    ,
    props: ['data'],
    watch: 
        data: 
            deep: true,
            immediate: true,
            handler(curr, prev) 
                this.src = '<source src="http://localhost:8000/v/"'+curr+' type="video/mp4">'
            
        
    

</script>

<style scoped>
</style>

【讨论】:

如果您使用单独的 nginx 服务器作为我的其他帖子 (***.com/a/63788052/3158028) 中的 api,您需要在 api 地址之前添加 http://,例如http://api.example.com 让它命中适当的 Nginx 配置以路由到 Gunicorn,然后路由到您的 Django api。

以上是关于如何将 Django 3 中的 mp4 视频流式传输到 Vue.js的主要内容,如果未能解决你的问题,请参考以下文章

如何将 .MP4 文件等本地文件流式传输到 Chrome Cast?

伪流式传输 MP4 文件

如何使用 Servlet 流式传输 MP3、MP4、AVI 等音频/视频文件

将 mp4 文件流式传输到其他网站

HTML5 - 如何流式传输大型 .mp4 文件?

使用FFmpeg将RTP的数据包保存为mp4文件