5

我有一个 Django 2.1 后端，它有一个视频流端点和一个 Vue-Cli3 作为我的前端。我后端的视频流端点是一个 GET 请求。为了让流媒体在我的客户端工作，我只需要添加：

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

这工作正常，但现在我必须只为经过身份验证的用户保护我的后端路由。为此，我只需要在请求标头中添加一个身份验证令牌。问题是，根据Set custom header for the request made from <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")
4

1 回答 1

0

我建议在视频的查询参数中发送某种身份验证令牌，并处理这个问题，实现一个自定义令牌身份验证类，该类从查询参数而不是标题中获取令牌。authentication_classes然后，您必须使用新的身份验证类更新视图的属性。

于 2018-10-25T07:44:29.950 回答