How to stream mp4 videos from Django 3 to Vue.js - django

Question

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:

Answer 1

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>