Questions tagged [capturestream]

For questions about the captureStream() method for HTML canvas elements and HTML video and audio elements

21 questions
5
votes
2 answers

Property 'captureStream' does not exist on type 'HTMLVideoElement'

I'm making a simple project that uses WebRTC in React with typescript. I was following MDN HTMLMediaElement.captureStream(). const vid: HTMLVideoElement | null = document.querySelector("video"); if (vid) { vid.captureStream(); } . . .
Nithin Sai
  • 840
  • 1
  • 10
  • 23
4
votes
3 answers

Recording video on the browser on iPhones/iOS (MediaRecorder)

I'm attempting to access the user's webcam/phone camera to record a video and mix audio in (imagine TikTok). So the user would press record, the audio would play (for the user to time their dance or whatever) and then when the audio ends, the…
Dois
  • 594
  • 1
  • 10
  • 25
3
votes
1 answer

Chrome Extension captureStream

I'm developing chrome extension which makes the following: get access to the stream obtained from chrome.tabCapture.capture (when capturing video, let's ignore for now audio capture since it's not relevant to the issue I'm facing) pass this…
2
votes
0 answers

(Audio) captureStream is not a function in Safari

I'm trying to get the CaptureStream of an HTML audio element. const sUsrAg = navigator.userAgent; var playBackStream = null if (sUsrAg.indexOf("Firefox") > -1) { console.log("Firefox"); playBackStream =…
dan
  • 1,292
  • 2
  • 10
  • 16
2
votes
1 answer

First frame from captureStream() not sending

We're working on a project where people can be in a chat room with their webcams, and they can grab a snapshot of someone's cam at that moment, do some annotations on top of it, and then share that modified picture as if it was their own webcam…
2
votes
0 answers

Is it possible to feed MediaStream frames at lower framerate?

I would like to use MediaStream.captureStream() method, but it is either rendered useless due to specification and bugs or I am using it totally wrong. I know that captureStream gets maximal framerate as the parameter, not constant and it does not…
Evil
  • 460
  • 1
  • 11
  • 25
2
votes
1 answer

captureStream() on dynamically created video element

I am trying to capture stream from dynamically created video element. when I get the video element and try to videoElement.captureStream() Firefox returns videoElement.captureStream is not a function but the same code works on Chrome. Problem seems…
mentes
  • 120
  • 3
  • 14
1
vote
0 answers

Webrtc screencapture or capturestream

Is there a way to capture on a specific part of the screen.. getting only the element or tag of HTML... I just want to share the video that is playing. I tried to find a solution. I tried the capturestream but the problem is there is no Output on my…
1
vote
1 answer

Uncaught TypeError: canvas.captureStream is not a function

new to react, here i am getting live rtsp stream to canvas, i want to captureStream from it and change it to video tag, but for some reason when consoling captureStream i'm getting error: Uncaught TypeError: canvas.captureStream is not a function. I…
walee
  • 575
  • 4
  • 16
1
vote
0 answers

High CPU Usage from Canvas CaptureStream

Context I've been working on building a virtual-backgrounds feature for web environments, and as part of that I'm taking in a webcam feed (MediaStreamTrack), doing some image-processing in WebGL and outputting the processed video frames to a…
Sam
  • 995
  • 9
  • 16
1
vote
0 answers

ReactJS Canvas has no captureStream

Is there a way to use captureStream() method in ReactJS canvas? It says no function called captureStream. I am using canvas with the reference to it. canvasRef.captureStream() is not a function obviously. Canvas is created by; const canvasRef =…
1
vote
0 answers

Canvas captureStream - needs always on top html

I'm developing an extension which is using CanvasEl.captureStream() which as I reported here stops working whenever the code calling it is backgrounded (either user blurred the tab or if captureStream was used in the background page). So I've…
msobczak
  • 123
  • 1
  • 7
1
vote
0 answers

When using canvas capturestream and mediastreamRecorder, if I switch tabs and go back, browser crashes

I am recording canvas using captureStream method and mixing it with an audio using mediastream.addTrack. But when i switch tabs and comeback the browser tab crashes. If i donot change the tab, it working. What will be the issue? Please share…
0
votes
0 answers

I am using captureStream with a frame rate of 0 to capture frames from a webgl canvas. How to trick requestFrame into thinking the canvas has changed?

My understanding is requestFrame will not add frames to the stream unless it believes the canvas has changed. I want to have some periods in my video where the same frame appears multiple times in a row. How can I trick requestFrame into believing…
Keith Carter
  • 422
  • 1
  • 6
  • 18
0
votes
0 answers

How to export fabricjs canvas to high quality video using captureStream and MediaRecorder

I am exporting a video from fabricjs canvas using the following code. everything is working except the quality is very poor and sometimes pixelated specially when it contains images. but when i run the animation on browser everything is smooth and…
1
2