es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Enviar rango a través de fetch para transmisión

23 Jul, 2023 Programación

Estoy desarrollando un algoritmo de transmisión, como necesitaba enviar un encabezado de autorización, no puedo usar la fuente de la etiqueta de video, así que estoy usando un fetch para eso, pero eso me impide enviar el encabezado del rango. ¿Cómo podría hacer esto? He investigado mucho pero no puedo encontrar nada.

const result = await fetch('http://' + oca.data.ocaURL + "/range/" + content.data.streamID, {
     headers: {
         "Authorization": getCookie("session"),
         "Range": "bytes=0-"
     }
  });
  const blob = await result.blob();
  if (blob) {
    setContentURL(URL.createObjectURL(blob));
  } else {
    console.warn("No se puede cargar");
  }
  ...
  <videocontainer controls="" poster="{posterURL}">
      <videosource src="{contentURL}"></videosource>
  </videocontainer>
Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Como mencionaste, el método fetch no te permite enviar la cabecera “Range”. Una posible solución podría ser utilizar el objeto XMLHttpRequest en lugar de fetch. Este objeto sí te permite establecer cabeceras personalizadas, incluyendo la cabecera “Range”.

    Aquí tienes un ejemplo de código con los cambios necesarios:

    const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://' + oca.data.ocaURL + "/range/" + content.data.streamID);
xhr.setRequestHeader('Authorization', getCookie("session"));
xhr.setRequestHeader('Range', 'bytes=0-');
xhr.responseType = 'blob';
xhr.onload = () => {
  if (xhr.status === 200) {
    const blob = xhr.response;
    setContentURL(URL.createObjectURL(blob));
  } else {
    console.warn("No se puede cargar");
  }
};
xhr.send();
...
<videocontainer controls="" poster="{posterURL}">
  <videosource src="{contentURL}"></videosource>
</videocontainer>

    En este código, creamos una nueva instancia de XMLHttpRequest y establecemos la URL y el método de la solicitud. Luego, establecemos las cabeceras Authorization y Range utilizando el método setRequestHeader. También configuramos el tipo de respuesta esperado como blob. Por último, definimos una función de devolución de llamada para el evento onload, donde comprobamos el estado de la respuesta y establecemos la URL del contenido utilizando el método createObjectURL.

    Espero que esta solución te ayude con tu algoritmo de transmisión.

Comments are closed.