Greasy Fork镜像

The record word appears but it didn't work in Firefox, it shows this error:
Recording failed: TypeError: video.captureStream is not a function

According to Google AI:
The error "TypeError: video.captureStream is not a function" in Firefox, when attempting to record video, indicates that the captureStream() method is not recognized or available on the HTMLMediaElement (the video element) in the current context. This issue is particularly relevant in older versions of Firefox or when dealing with dynamically created video elements.
Possible Causes and Solutions:

Firefox Prefixing:
Cause: In older Firefox versions, the captureStream() method was prefixed with moz, meaning it was mozCaptureStream().
Solution: Try using video.mozCaptureStream() instead of video.captureStream(). You can include a check for the browser to apply the correct method:

JavaScript

let stream;
if (navigator.userAgent.indexOf('Firefox') > -1) {
stream = video.mozCaptureStream();
} else {
stream = video.captureStream();
}

Dynamically Created Video Elements:

Cause: When a video element is created dynamically, ensure it's properly attached to the DOM and has a valid source before attempting to call captureStream().

Solution: Verify that the video element is appended to the document and has a MediaStream assigned as its srcObject or a valid src URL.

Insecure Context (HTTP vs. HTTPS):

Cause: The captureStream() method and other media-related APIs might be restricted in insecure browsing contexts (pages loaded over HTTP).

Solution: Ensure your application is served over HTTPS.

Browser Version Compatibility:

Cause: Very old Firefox versions might not fully support the captureStream() API as expected.

Solution: Update Firefox to the latest stable version to ensure full compatibility with modern Web APIs.

By addressing these potential issues, the "TypeError: video.captureStream is not a function" error in Firefox should be resolved, allowing for successful video recording.

Thx for your feedback! It helped me get it working with Firefox!!

Thanks a lot, is working on Firefox ^^
Can I ask if there is a way to change bitrate from the output file?
The final webm looks a little square.

I tried changing the bitrate like this:

const options = {
mimeType: 'video/webm;codecs=vp9',
videoBitsPerSecond: 6000000 // 6Mbps
};
recorder = new MediaRecorder(recorderStream, options);

But it didn't make much difference, so I think that's the maximum quality available right now.

I tried changing the bitrate like this:

const options = {
mimeType: 'video/webm;codecs=vp9',
videoBitsPerSecond: 6000000 // 6Mbps
};
recorder = new MediaRecorder(recorderStream, options);

But it didn't make much difference, so I think that's the maximum quality available right now.

Thank you for responding. I would like to take this opportunity to mention that when recording a live stream on Twitch and an advertisement suddenly appears, the recording continues, but when you end the recording to save it, the Firefox tab crashes and the entire recording is lost.

Add this script (adblocker for Twitch): https://github.com/pixeltris/TwitchAdSolutions
That might solve it.

Add this script (adblocker for Twitch): https://github.com/pixeltris/TwitchAdSolutions
That might solve it.

I am familiar with and also use this tool, so I tested your script with TwitchAdSolutions turned on and off. Your script works well, the only issue is when the Twitch player switches to the AD player or the reduced version (TwitchAdSolutions).

It was impossible to implement due to limitations in Firefox, such as createMediaElementSource only being usable once.