I'm trying to read from a media stream source, make some webgl calls and then update a texture with the modified media stream. How can I connect a media stream to a canvas so that I can read/manipulate the image data? Repeatedly drawing from a video onto a canvas using drawImage is unacceptably slow on mobile.
Using chrome 56 I can captureStream() a video element, but I'm not sure how to route that to a canvas for manipulation. Any hints appreciated.
Related
I am working on a conferencing app using webrtc.
To reduce bandwidth I draw the webcam streams on canvas and resize the canvas based on the number of the active webcams in the room. So far so good and it was (is) working until chrome updated to version 104 on android devices ...
The stream from canvas plays fine on the source device but when send to other peers over webrtc the stream gets stuck in loading status ...
This only happens in some devices and not all of them ...
after some debugging and testing I figured it out that its because of the canvas size !
Since I am resizing the canvas, it does not have a standard video size and I think that where it fails ...
I tried setting the canvas size multiples of 32 and 64, some sizes works with 32 and some with 64 but not all ...
This is only happening in Android Chrome version 104+, I tried looking at the changelogs for this release to see what has changed, but could not find anything. So anyone knows what change could have cause this and how to fix it ?
I have also enabled simulcast for the streams a,d when its disabled most of the sizes works but still not all of them !
Is it possible to create an HTML5 video element compatible MediaStream from a series of images (jpegs). Assume I have the jpeg urls, the FPS and frametime.
My use case is that I have some resources where 90% of them are encoded as mp4's (and thus I use HTML5 video player to play them). But 10% are legacy and very old, and are a series of jpegs that I blit to the canvas using request animation frame. If I could use the html5 video element, that would be ideal.
I'm currently streaming my microphone from c++ with an standard socket. Now i want to listen to this stream from the web.
I have tried accessing the stream from the audio tag directly, but this didn't work.
I also tried to set the Content Type to audio/wav, but this also didn't work.
I have tried to write to an file and access it directly from the audio element, but it wasnt adding the new written parts to the audio element. Also it started from the beginning of the audio and i read that it had a high delay.
Is there a way to stream audio with very low latency?
I have thought on making a get request every 50ms and adding the new data to the audio or recording 50ms of audio and changing the src of the audio at the end of the last clip.
Streaming audio buffers through a WebSocket and then trying to play it with an <audio> element is not the way to go.
The way to stream audio to your browser with low latency is to use WebRTC.
WebRTC is built in the browser to enable peer-to-peer real-time communications.
That said, you can use some WebRTC implementation in C++ like libwebrtc or Gstreamer to stream your mic input, and then use the native JavaScript API on your browser to receive the audio stream and place it in the srcObject property of an <audio> element to listen in the browser.
I am using flash to publish webcam stream using H264 , but some times viewer side flash shows black screen even though stream connects to FMS is there a way to know if stream has started capture frame if not black then continue else reconnect . A way to find its black screen or not .
you should use events from NetConnection and NetStream to see if connections is persistent
but! if you have black screen, usualy it happens because of device, if device is streaming without problem and connection is lost on viewer's side then you should see latest frame. And, you are using stage 3d video ? if yes, then you should know, sometimes there are troubles with it.
I created a video stream recording application that works fine except the recorded FLVs are corrupt a little bit. :) If I open an FLV in VLC player everything is green but getting "clean" when changes occur. And especially at the beginning of the video is breaking up. (I use Red5 1.0)
For pre-recorded streams, the keyframes are already encoded into the file and they cannot be changed. If you're serving a live stream, the keyframes need to be set in the application that is encoding the live stream (for example, Flash Media Live Encoder).