У меня есть бэкэнд Django 2.1 с конечной точкой видеопотока и Vue-Cli3 в качестве интерфейса. Конечная точка видеопотока в моем бэкэнде - это запрос GET. Чтобы потоковая передача работала на моей стороне клиента, мне нужно было добавить:
<img :src="$store.state.domain + 'cameras/video/' + camera.properties.name + '/'" width="240" alt="Camera live Stream">
Это работает нормально, но теперь я должен защищать свой внутренний маршрут только для аутентифицированных пользователей. Для этого мне просто нужно добавить токен аутентификации в заголовок запроса. Согласно настраиваемый заголовок для запрос сделан из тега ‹img /›, тег img не принимает параметры заголовка. Итак, теперь я пытаюсь создать запрос, используя библиотеку axios, а затем передать результат запроса в свой HTML-тег img. мой код метода Vue до сих пор:
loadStream(){
const vm = this
let accessToken = vm.$store.getters.getAccessToken
let streamURL = `${vm.$store.state.domain}/cameras/video/${vm.camera.properties.name}/`
axios.get(streamURL, {headers: {"Authorization": `Bearer ${accessToken}`},
responseType: 'stream',
adapter: httpAdapter}
).then( response =>{
console.log(`success:${response.data}`)
let imgTag = document.createElement('img')
imgTag.src = URL.createObjectURL(response)
imgTag.classList.add('video-modal', 'popup-video')
imgTag.alt = `Camera ${camera.properties.name} liveStream`
imgTag.setAttribute("crossorigin", '')
let streamDiv = document.getElementById('livestream-img')
streamDiv.appendChild(imgTag)
}).catch( error => {
console.log(`error:${response.data}`)
let imgTag = document.createElement('img')
imgTag.alt = `Camera ${camera.properties.name} liveStream`
let streamDiv = document.getElementById('livestream-img')
streamDiv.appendChild(imgTag)
})
}
Все, что я получаю, это предупреждение: Предупреждение: предоставленный поток значений не является допустимым значением перечисления введите XMLHttpRequestResponseType.
Также моя просьба никогда не заканчивается. Promise никогда не попадет в .then () или .catch (), потому что он потоковый. Похоже, что responseType не работает должным образом. я что-то упускаю?
Это моя конечная точка бэкэнда django:
class CameraVideoStreamingView(APIView):
def get(self, request, name):
cam = Camera.objects.get(name=name)
return StreamingHttpResponse(cam.serve_web_stream(),
content_type="multipart/x-mixed-replace;boundary=frame")
