如何将 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?