componentDidMount() { navigator.mediaDevices .getUserMedia({ video: true}) .then(stream => { this.handleSuccess(this.videoTag.current.srcObject = stream) }) .catch(console.log); } handleSuccess(stream) { console.log('st',stream) media_recorder = new MediaRecorder(stream); media_recorder.start(10000); media_recorder.addEventListener('dataavailable', function (e) { console.log('e.data', e.data) var reader = new FileReader(); var base64data reader.readAsDataURL(e.data); reader.onload = function () { base64data = reader.result; const base64EncodedData = base64data.split(',')[1]; const body = JSON.stringify({ data: base64EncodedData }); fetch('http://localhost:3090/api/recording', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' }, body }).then(res => { return res.json() }).then(json => console.log(json)); } }); }desde la cámara web, estoy generando blob continuamente a intervalos regulares, luego estoy codificando en base64 y decodificando a nivel de servidor, lo que me ayuda a generar archivos mp4 en el almacenamiento local, pero el problema fue cuando comencé a reproducir esos archivos generados, solo se está reproduciendo el archivo inicial, desde el segundo archivo en adelante, no se está reproduciendo. ¿Alguien puede ayudar a resolver este problema?
Desafortunadamente, así es como funciona MediaRecorder . Los fragmentos emitidos por los dataavailable de datos disponibles no son necesariamente autónomos. Solo se garantiza que tengan sentido cuando se combinen nuevamente.
Creo que en tu caso se está reproduciendo la parte inicial ya que parece un archivo completo para el decodificador. Todas las partes consecutivas probablemente pierdan cualquier encabezado (ya que están destinadas a agregarse a la primera parte) y, por lo tanto, el decodificador no las reconoce.
Tal vez tenga la oportunidad de decodificar la grabación completa en fragmentos nuevamente en lugar de decodificar las partes individuales.