如何使用axios向img html标签发出视频流http GET请求？

Posted 2023-03-04

【中文标题】如何使用axios向img html标签发出视频流http GET请求？

【英文标题】：How to make a video stream http GET request to img html tag with axios?

【发布时间】：2019-03-29 06:42:58

【问题描述】：

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

<img :src="$store.state.domain + 'cameras/video/' + camera.properties.name + '/'"  >

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

    )
  

我得到的只是这个警告： Warning: The provided value 'stream' is not a valid enum value of type 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")

【问题讨论】：

嗨@Marcelo你有没有找到任何解决方案。？我也在找一样的。

嗨@divyansh ingle，还没有。我考虑过 ARJMP 解决方案，但我想知道它是否可以让令牌暴露给任何可以允许某人获得有效身份验证令牌的嗅探器。我在安全交换中发现了一个关于这个安全问题的问题：security.stackexchange.com/questions/158541/…

【参考方案1】：

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

【讨论】：

嗨@ARJMP 抱歉回复晚了。我考虑了解决方案，但我想知道这是否可以让令牌暴露给任何类型的嗅探器，从而允许某人获得有效的身份验证令牌。我在此处的安全交换中发现了一个关于此的问题：security.stackexchange.com/questions/158541/…