5

I have a Django 2.1 backend that have a video stream endpoint and a Vue-Cli3 as my frontend. The videostream endpoint in my backend is a GET request. To have the streaming working in my client side all i needed was to add:

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

This works fine but now i have to protect my back-end route for authenticated users only. For this i just need to add an authentication token in the request header. The problem is, according to Set custom header for the request made from <img/> tag , an img tag doesn't accept header parameters. So now I'm trying to build a request using axios library and then stream the request result to my HTML img tag. my Vue method code so far:

  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)

    })
  }

All i get is this warning: Warning: The provided value 'stream' is not a valid enum value of type XMLHttpRequestResponseType.

Also my request never ends. Promise will never hit .then() or .catch() because it's streaming. Seems like responseType isn't working properly. am i missing something?

This is my django backend endpoint:

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")
Marcelo Fonseca
  • 1,705
  • 2
  • 19
  • 38
  • Hi @Marcelo Have you found any solution for same.? I am also looking for same. – divyansh ingle Oct 31 '18 at 10:09
  • Hi @divyansh ingle, not yet. I thought about ARJMP solution, but I was wondering if it could let the token expose to any kind of sniffer that could allow someone to get a valid authentication token. I found a question about this security issue in security exchange: https://security.stackexchange.com/questions/158541/sending-access-token-through-get-request – Marcelo Fonseca Oct 31 '18 at 21:09

1 Answers1

0

I would recommend sending some sort of auth token in the video's query params, and to handle this, implementing a custom Token Authentication Class which gets the token from a query param rather than the headers. You'd then have to update the authentication_classes property of your view with your new authentication class.

A. J. Parr
  • 7,731
  • 2
  • 31
  • 46
  • Hi @ARJMP sorry for a late reply. I thought about the solution, but I was wondering if this could let the token expose to any kind of sniffer that could allow someone to get their hands in a valid authentication token. I found a question about this in security exchange here: https://security.stackexchange.com/questions/158541/sending-access-token-through-get-request – Marcelo Fonseca Oct 31 '18 at 21:06