Sé algunas cosas sobre la codificación de video y encontré un problema que me bloquea durante algunos días.

Meta:

1. Grabe un video desde la cámara web de mi computadora portátil con una aplicación frontal VueJS.
2. Envíe este video a una aplicación de matraz de Python en el backend dentro de un FormData a través de Axios y Flask.
3. Reciba el video en la aplicación Flask.
4. Simplemente envíe el video a la interfaz con una respuesta de Flask (sin aplicar ningún cambio al video).
5. Guarde y muestre este video en el lado frontal.

Código:

1. Por defecto, el tipo de elemento ev es: "video/x-matroska;codecs=avc1", no lo elijo.

 // Start webcam stream startCameraStream() { const windowConstraints = (window.constraints = { audio: false, video: true }); navigator.mediaDevices .getUserMedia(windowConstraints) .then(stream => { this.$refs.webcamStream.srcObject = stream; }).catch(error => { alert("Browse doesn't support or there is some errors." + error); }); }, // Stop webcam stream stopCameraStream() { let tracks = this.$refs.webcamStream.srcObject.getTracks(); tracks.forEach(track => { track.stop(); }); }, // Start to record webcam and save it into chunks array and create a blob object startRecordCameraStream(stream) { this.mediaRecorder = new MediaRecorder(stream); this.mediaRecorder.ondataavailable = (ev) => { this.chunks.push(ev.data); }; this.mediaRecorder.onstop = () => { this.blob = new Blob(this.chunks, { 'type': "video/x-matroska;codecs=avc1" }); this.chunks = []; }; this.mediaRecorder.start(); }, // Stop to record webcam stopRecordCameraStream() { this.mediaRecorder.stop(); },

El archivo blob es legible y puedo mostrarlo con estas pocas líneas de codificación:

 let videoURL = window.URL.createObjectURL(this.blob); let vidSave = this.$refs.webcamRecord; vidSave.src = videoURL;

2. Envío el blob dentro de un formData con la clave 'webcam' y lo envío en Flask url con axios

 submitVideo(state, blob) { let formData = new FormData(); formData.append('webcam', blob); return new Promise((resolve, reject) => { try { axios.post('http://127.0.0.1:5000/', formData, { headers: { 'Content-Type': 'multipart/form-data', } }).then((response) => { // TOO SEE IN STEP 5 resolve(); }).catch((error) => { console.log(error); }) } catch (error) { reject(error) } }); }

3. En la aplicación del matraz, se envió y recibió formData y podemos guardar y leer el video en el backend que muestra que todo funciona bien.

 from flask import Flask, request from flask_cors import CORS import flask #Instance of Flask class app = Flask(__name__) cors = CORS(app, resources={r"/*": {"origins": "*"}}) #Route function @app.route('/', methods=["POST","GET"]) def model(): if request.method == "POST": video = request.files['webcam'].stream.read() return flask.Response(video, mimetype='video/x-matroska')

Simplemente devuelvo el objeto binario de Python a la interfaz de VueJS:

4. video es un objeto de bytes de Python que se ve así:

 b'\x1aE\xdf\xa3\xa3B\x86\x81\x01B\xf7\x81\x ... '

Simplemente devolvemos este objeto de bytes en una respuesta de matraz:

 return flask.Response(video, mimetype='video/x-matroska')

5. Recibimos la respuesta del matraz y la almacenamos en un archivo blob (parte de respuesta del punto 2)

 }).then((response) => { let data = response.data; let video = new Blob([data],{'type': "video/x-matroska;codecs=avc1;"}) state.modelVideo = video; resolve(); })

Una vez que intentamos mostrar el blob como se explica en el punto 1, no pasa nada:

 let videoURL = window.URL.createObjectURL(this.modelVideo); let vidSave = this.$refs.webcamRecord; vidSave.src = videoURL;

Algo realmente extraño es que los archivos blob iniciales y nuevos no tienen el mismo tamaño y cuando leemos binarios de ambos objetos blob tenemos esto:

Binario de blob inicial desde la interfaz (con una función FileReader y readAsBinaryString):

 "\u001aEߣ£B†\u0001B÷\u0001Bò\u..."

Binario de blob recibido del backend (con una función FileReader y readAsBinaryString):

 "\u001aEߣ�B��\u0001B��\..."

Opinión:

Mi opinión es que al enviar un video desde el backend, hay un malentendido de cifrado entre Python y Javascript. Traté de codificar en base64 en el lado del backend y decodificar en el lado del frontend, pero nada cambia.

La respuesta de datos sin procesar que recibí del backend es:

 { "data": "\u001aEߣ�B��\u0001B��\u0001B��..." "status": 200, "statusText": "OK", "headers": { "content-length": "15661", "content-type": "video/x-matroska" }, "config": { "url": "http://127.0.0.1:5000/", "method": "post", "data": {}, "headers": { "Accept": "application/json, text/plain, */*" }, "transformRequest": [ null ], "transformResponse": [ null ], "timeout": 0, "xsrfCookieName": "XSRF-TOKEN", "xsrfHeaderName": "X-XSRF-TOKEN", "maxContentLength": -1, "maxBodyLength": -1 }, "request": {} }