如何将 Django 3 中的 mp4 视频流式传输到 Vue.js [英] How to stream mp4 videos from Django 3 to Vue.js
问题描述
我正在尝试将 mp4 视频流从 Django 加载到 Vue.js.我按照解决方案
当我使用 Buffer 转换为 base 64 时的另一个图像:
如果您对视频使用相同的组件，将视频流式传输到 Vue.js 所需的最终解决方案是设置 src使用 v-html 标记，以便您可以动态设置 src.创建组件后，直接执行 src="http://localhost:8000/v/video.mp4" 将不起作用.所以除了Kevin的代码，在视频组件中做如下操作即可:
<div><video v-html="src" autoplay="" controls="" loop="" muted="" frameborder="0">您的浏览器不支持 HTML 视频.</视频><脚本>导出默认{数据() {返回 {源代码:''}},道具:['数据']，手表: {数据: {深:真实，立即:真实，处理程序(当前，上一个){this.src = '<source src="http://localhost:8000/v/"'+curr+' type="video/mp4">'}}}}<样式范围></风格>
I'm trying to load a mp4 video stream from Django to Vue.js. I followed the solution here and got a byte string via my axios API which I concatenated to data:video/mp4;base64,, and then binded it to the video tag's :src property, but the video is not displaying. Is this the correct way to stream videos from Django 3 to Vue.js? What am I doing wrong?
Api.js code snippet:
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 component code snippet:
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;
});
}
}
}
As suggested in the comments of that answer, I also set src to the Django api endpoint e.g. src="/video/test.mp4, but I can see in my terminal that it's not reaching that Django route. How do I get the linked solution to work with Vue.js?
Picture of the raw string I get back from Kevin's Django view:
Another image when I convert to base 64 using Buffer:
The final solution needed to stream videos to Vue.js if you're using the same component for videos is to set the src tag using v-html so that you can set src dynamically. Directly doing src="http://localhost:8000/v/video.mp4" won't work once the component is created. So in addition to Kevin's code, just do the following in the video component:
<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>
这篇关于如何将 Django 3 中的 mp4 视频流式传输到 Vue.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
