Как сделать видеопоток http GET запросом на img html tag с помощью axios? - PullRequest
Новая
       42

Как сделать видеопоток http GET запросом на img html tag с помощью axios?

0 голосов
/ 24 октября 2018

У меня есть бэкэнд Django 2.1 с конечной точкой видеопотока и Vue-Cli3 в качестве внешнего интерфейса.Конечная точка видеопотока в моем бэкэнде - это запрос GET.Чтобы потоковая передача работала на моей клиентской стороне, все, что мне было нужно, это добавить: 

<img :src="$store.state.domain + 'cameras/video/' + camera.properties.name + '/'" width="240" alt="Camera live Stream">

Это работает нормально, но теперь я должен защищать свой внутренний маршрут только для аутентифицированных пользователей.Для этого мне просто нужно добавить токен аутентификации в заголовке запроса.Проблема, согласно Установить пользовательский заголовок для запроса, сделанного изтег , тег 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)

    })
  }

Все, что я получаю, это предупреждение: Предупреждение: предоставленное значение 'stream' не является допустимым значением перечисления типа XMLHttpRequestResponseType.

Также мой запрос никогда не заканчивается.Обещание никогда не ударит .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")

1 Ответ

0 голосов
/ 25 октября 2018

Я бы порекомендовал посылать какой-либо токен авторизации в параметрах запроса видео, и для этого реализовал собственный класс Token Authentication Class , который получает токен из параметра запроса, а не из заголовков.Затем вам нужно обновить свойство authentication_classes вашего представления новым классом аутентификации.

...