We have developed a feature in our Angular application to create a video file using MediaRecorder APIs. This application is intended to work seamlessly across Chrome, Edge, and Safari browsers. Users can create and preview the video file.
When a video file is created in Chrome and Edge, the format of the video file is WebM. The feature functions correctly in Chrome and Edge browsers, allowing users to create video files (including audio) and preview them.
However, when users perform the same action in Safari browser, the created video file format is MP4, which can be previewed in all supported browsers. The issue arises when attempting to preview the video file(WebM) in safari browser which were created using Chrome and Edge browser.
The video files are stored in Azure Blob Storage via a .NET Core API.
Has anyone encountered a similar challenge and can offer assistance in resolving this issue? We require a universal video file format that can be used across all major browsers.
Note: Everything is working as expected. The only issue is that we are unable to preview WebM files in the Safari browser.
As far as I know there is currently no video format which would be supported by the
MediaRecorderimplementations in all modern browsers.However
video/mp4support is currently worked on for Chromium based browsers.https://issues.chromium.org/issues/40127044
In the near future it will hopefully be possible to implement a cross-browser video recorder with Web Codecs. All main browser vendors agreed to implement it.
https://developer.mozilla.org/en-US/blog/interop2023-mdn-doc-updates/