Open Bug 1707958 Opened 3 years ago Updated 3 years ago

[Bug] MediaRecorder cannot record a stream source of html video element

Categories

(Core :: Audio/Video: Recording, defect, P3)

Product:
Core
Component:
Audio/Video: Recording
Platform:
Unspecified
Android
Type:
defect

Tracking

()

People

(Reporter: kbrosnan, Unassigned)

References

Details

Attachments

(1 file)

test.webm
4.51 KB, video/webm
Details

From github: https://github.com/mozilla-mobile/fenix/issues/19233.

Steps to reproduce

Make below index.html file and put it in "htdocs" folder of localhost (apache server, port: 8080) or any way to create localhost on Android phone. In my case, I use Termux app and install apache server (pkg install apache2), put index.html file to "~/../usr/share/apache2/default-site/htdocs/", then run server (apachectl)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <video id="video" width="1280" height="720" controls src="chrome.mp4"></video>
    <script>
      var video = document.getElementById("video");
      var isInitiated = false;
      video.onplay = function(){
        video.captureStream = video.captureStream || video.mozCaptureStream;
        var stream = video.captureStream();
        
        var recordedChunks = [];

        console.log("THIS IS STREAM: "+ stream);
        console.log(stream);

        // var options = { mimeType: "video/webm; codecs=vp9" };
        // mediaRecorder = new MediaRecorder(stream, options);
        mediaRecorder = new MediaRecorder(stream)

        mediaRecorder.ondataavailable = handleDataAvailable;
        mediaRecorder.start();
        
        function handleDataAvailable(event) {
          console.log("data-available");
          if (event.data.size > 0) {
            recordedChunks.push(event.data);
            console.log(recordedChunks);
            download();
          } else {
            console.log("Size = 0")
          }
        }
        function download() {
          var blob = new Blob(recordedChunks, {
            type: "video/webm"
          });
          var url = URL.createObjectURL(blob);
          var a = document.createElement("a");
          document.body.appendChild(a);
          a.style = "display: none";
          a.href = url;
          a.download = "test.webm";
          a.click();
          window.URL.revokeObjectURL(url);

          recordedChunks = [];
          // mediaRecorder = new MediaRecorder(stream)
          // mediaRecorder.ondataavailable = handleDataAvailable;
          mediaRecorder.start();
        }
        if (isInitiated == false){
          setInterval(event => {
            console.log("stopping");
            mediaRecorder.stop();
          }, 10000);
          isInitiated = true;
        }
      }
    </script>
  </body>
</html>

Replace "chrome.mp4" in video tag of index.html with any mp4 video on your Android phone and put the video file on "htdocs" folder as well
Access "http://localhost:8080" on Firefox for Android/Chrome on Android.

Expected behavior

Media on the video player is recorded and download a video file every 10 seconds.

Actual behavior

Media on the video player could not be recorded and one file is downloaded but could not be played
I think the issue in which MediaRecorder could not record a stream source of html video element (source: local mp4 video or url).
My test case: I tried to record and download video from the html video element by using video.mozCaptureStream() as my index.html file. It worked correctly on Firefox/Chrome on PC and Chrome on Android devices..., but could not work in Firefox for Android. I think that issue is inside the MediaRecorder which cannot not recognized the stream from video.mozCaptureStream(). So that video was not recorded and downloaded. Please help take a look to this issue. Thanks.

Device information

  • Device vendor / model and Android version:
    Samsung S6 Edge Plus (Android 7)
    Redmi Note 8 (Android 10)
  • Firefox for Android version: ? (go to Settings -> About Firefox)
    87.0.0-rc.1

Change performed by the Move to Bugzilla add-on.

Component: Audio/Video → Audio/Video: Recording
  • Firefox for Android version: ? (go to Settings -> About Firefox)
    87.0.0-rc.1

Firefox 87 was affected by bug 1696794.
Does the behavior change in Firefox 88?

Flags: needinfo?(huynhtanloc2612)

(In reply to Karl Tomlinson (back Apr 27 :karlt) from comment #1)

  • Firefox for Android version: ? (go to Settings -> About Firefox)
    87.0.0-rc.1

Firefox 87 was affected by bug 1696794.
Does the behavior change in Firefox 88?

Hi @Karl, I have tested on new release version of Firefox for Android (88.1.2). The behavior is same. Issue was not fixed in latest version

Flags: needinfo?(huynhtanloc2612)

I used the mp4 file from https://searchfox.org/mozilla-central/source/testing/web-platform/tests/media/movie_300.mp4 on a server separate from the Android device.

(In reply to comment #0)

one file is downloaded

With Firefox for Android 88.1.2, multiple files were provided for download.
(Watch out that the download UI is modal, so the browser is more-or-less locked up for 5 minutes. A shorter video may be better.)

Is the one-file behavior specific to when the server is running on the Android device?

However, I am seeing "dataavailable" events much more frequently than every 10 seconds and the files are very small (2.78kB). Desktop Firefox produces larger files (2.2MB) every 10 seconds.

Flags: needinfo?(huynhtanloc2612)

(In reply to Karl Tomlinson (back Apr 27 :karlt) from comment #3)

I used the mp4 file from https://searchfox.org/mozilla-central/source/testing/web-platform/tests/media/movie_300.mp4 on a server separate from the Android device.

(In reply to comment #0)

one file is downloaded

With Firefox for Android 88.1.2, multiple files were provided for download.
(Watch out that the download UI is modal, so the browser is more-or-less locked up for 5 minutes. A shorter video may be better.)

Is the one-file behavior specific to when the server is running on the Android device?

However, I am seeing "dataavailable" events much more frequently than every 10 seconds and the files are very small (2.78kB). Desktop Firefox produces larger files (2.2MB) every 10 seconds.

Hi @Karl,

Is the one-file behavior specific to when the server is running on the Android device?
One-file behavior happened at older version of Firefox for Android (87.0.0-rc.1). The downloaded file size is very small and could not be played. When I used version of 88.1.2, multiple of such very small size files were downloaded in very short time (exactly same as what you experienced). So I think it does not depend on the server running on Android device or on other places.

Flags: needinfo?(huynhtanloc2612)
Attached video test.webm —

This is the first file produced by Firefox for Android 88.1.2 from comment 3.

mozregression doesn't have support for Firefox for Android, and GeckoView Example doesn't support the download on click, but adding the following lines to the testcase allows watching the "dataavailable" frequency.

<div id="log"></div>
<script>
  const logdiv = document.getElementById("log");
  const console = { log: msg => logdiv.innerHTML += msg + "<br>" };
</script>

The dataavailable events started between GeckoView builds 2021-02-10 23:54:04.507000 revision 569826c0
and 2021-02-11 23:30:49.934000 revision 8afd66ac, which makes bug 1464268 a likely reason for the change.

Prior to that there were no dataavailable events, even after successfully stopping the MediaRecorder. That was the case as far back as 2020-05-03 22:03:45.209000 revision d95c6123, which is the oldest build that mozregression could find.

See Also: → 1464268

It seems that there is no support for recording video on Android.
Mochitests are skipped for bug 1232305 and wpt are also failing since at least January 2020.

Perhaps the missing piece is the same as indicated in bug 1669551 comment 13.

The testcase behaves as expected when recording an audio element.

Severity: -- → S3
Priority: -- → P3
See Also: → 1669551
You need to log in before you can comment on or make changes to this bug.