Has anyone worked with sending videos to the Back-End and the WebCam? I have a small question.
The Back-End accepts MP4 video (works perfect) but when I record with the WebCam and download that video (which according to the properties is also MP4) and I try to upload that video, the Back-End tells me that it does not accept that format.
Do you have any idea more or less what could be happening?
“The back end refers to parts of a computer application or a program’s code that allow it to operate and that cannot be accessed by a user. Most data and operating syntax are stored and accessed in the back end of a computer system. Typically the code is comprised of one or more programming languages.”
No, I can’t not share the code. I’m asking more like… mental exercise.
probably a format not digested by the backend service, maybe you are not authenticated, wrong mime tipe, server timeout, limit on size content length. Could be a lot of reasons behind the failure.
Do you have a meaningful error message?
1 Like
Yes, “Video format must one of MP4, MOV, or AVI”. Thanks a lot. Let me read about “mime tipe” I don’t know what is that.
No, I don’t know how to write Backend code, I’m a FrontEnd. But, I’m asking here trying to figure out how to solve this problem, to read some Ideas.
mp4 is just a container (so is .mov and .avi). It doesn’t tell you anything about the codec being used. If the backend only supports (for whatever reason) certain types of video encoding the format might just be unsupported. What codec is the webcam using for the encoding?
What is the backend doing? Is it just storing the file, does it need to re-encode it, does it serve the files for streaming or just downloading?
1 Like
I’m encoding the Webcam video in MP4 (I can see it in “properties” when I download the video) but the server does NOT accept the video when is recorded from the Webcam but accepts any other MP4.
const TIME_LIMIT = 3 * 60000
const SIZE_LIMIT = 150
export default class MediaRecorderService {
blobType = 'video.mp4'
timeStop = null
static getAudioAndVideoDevices() {
// eslint-disable-next-line
return new Promise(async(resolve, reject) => {
try {
// eslint-disable-next-line
const deviceInfos = await navigator.mediaDevices.enumerateDevices()
const audioSourceOptions = []
const videoSourceOptions = []
for (const deviceInfo of deviceInfos) {
if (deviceInfo.kind === 'audioinput') {
audioSourceOptions.push({
label: deviceInfo.label || `Microphone ${deviceInfo.deviceId}`,
value: deviceInfo.deviceId,
})
} else if (deviceInfo.kind === 'videoinput') {
videoSourceOptions.push({
label: deviceInfo.label || `Camera ${deviceInfo.deviceId}`,
value: deviceInfo.deviceId,
})
}
}
resolve([audioSourceOptions, videoSourceOptions])
} catch (exc) {
reject(exc)
}
})
}
async initialize({ videoHTMLTag, videoSource = '', audioSource = '', onStop }) {
if (this.stream) {
return
}
this.chunks = []
// eslint-disable-next-line
this.blobType = 'video\/mp4'
this.audioSource = audioSource
this.videoSource = videoSource
this.videoHTMLTag = videoHTMLTag
this.onStop = onStop
this.stream = await navigator.mediaDevices.getUserMedia(this.userMediaOptions)
this.videoHTMLTag.srcObject = this.stream
}
async startRecording() {
if (!this.stream) {
this.stream = await navigator.mediaDevices.getUserMedia(this.userMediaOptions)
this.videoHTMLTag.srcObject = this.stream
}
this.chunks = []
this.streamRecorder = new MediaRecorder(this.stream)
this.streamRecorder.start(1000)
this.streamRecorder.ondataavailable = (event) => {
this.chunks.push(event.data)
const bytes = this.chunks.reduce((acc, current) => {
return acc + current.size
}, 0)
if (bytes >= SIZE_LIMIT * 1024 * 1024) {
if (this.streamRecorder.state === 'recording') {
this.stopRecording()
}
}
}
this.timeStop = setTimeout(() => {
if (this.streamRecorder.state === 'recording') {
this.stopRecording()
}
}, TIME_LIMIT)
}
stopRecording() {
clearTimeout(this.timeStop)
if (!this.streamRecorder || this.chunks.length === 0 || this.streamRecorder.state !== 'recording') { return }
this.streamRecorder.stop()
const blob = new Blob(this.chunks, {
type: this.blobType,
})
this.storedChunks = this.chunks
this.onStop?.()
this.stream.getTracks().forEach(function (track) {
track.stop()
})
this.stream = null
return URL.createObjectURL(blob)
}
get userMediaOptions() {
return {
audio: {
deviceId: this.audioSource !== '' ? { exact: this.audioSource } : undefined,
},
video: {
deviceId: this.videoSource !== '' ? { exact: this.videoSource } : undefined,
},
}
}
get recordedVideo() {
return new Blob(this.storedChunks, {
type: this.blobType,
})
}
get isRecording() {
return !!this.chunks.length
}
}
Again, mp4 is not a format, it is a container. The broad general term MP4 also doesn’t tell you anything about the actual codec used, nor does the MIME type.
Just because the video gets put into an mp4 container doesn’t mean you know which format it is encoded in. Get MediaInfo and check the actual encoding of the file.
There can be other constraints for the backend as well we do not know about, such as the resolution, bit rate, AVC profiles, etc.
What is the actual error message and what exactly is giving you the error, “the backend” is just too vague. Where/what is it you are uploading the file to that is giving you the error?
Thanks a lot!
and check the actual encoding of the file.
Encoding is the CodecID?
There can be other constraints for the backend as well we do not know about, such as the resolution, bit rate, AVC profiles, etc.
I don’t think there are more problems than the formatting or “content-type” (now that I read this code, I think they are very different things). And I think the mimeType is missing in my code…
What is the actual error message and what exactly is giving you the error, “the backend” is just too vague. Where/what is it you are uploading the file to that is giving you the error?
I can’t give give you more info because I’m just a Front-end developer, but server sends me a “Video format must one of MP4, MOV, or AVI” message, when I try to upload the Video recorded via Webcam.
Thanks a lot for your help, again.
VP8 is not AVC (H.264 or MPEG-4).
Setting the MIME type in the options to MediaRecorder might be enough to get an AVC encoding but I think it might be WebM file. So you may have to re-mux (lossless copy to a new container) it into an mp4 container. Not sure what the best option for automating that is but you can do it using FFMPEG manually.
const mediaRecorder = new MediaRecorder(stream, { mimeType : 'video/mp4' });
// or webm with the codecs option set
const mediaRecorder = new MediaRecorder(stream, { mimeType : 'video/webm;codecs=h264' });
1 Like
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.