Skip to content

Example video stream manipulation using some WebRTC and html5 technologies

License

Notifications You must be signed in to change notification settings

tlehman/manipulate-mediastream

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Manipulating MediaStreams in HTML5

This is a working example of manipulating a video stream using HTML5 <video> elements, the getUserMedia method which returns a Promise<MediaStream> object.

screenshot

The MediaStream object wraps the video stream from your webcam. Then, it attachs the stream to the input <canvas> element. This will allow us to pull the array of pixel data from the canvas.

Finally, the output <canvas> element is where we draw the manipulated pixel data.

How to use

open index.html, click "Allow" to let your browser use your camera. Then click "Manipulate", that will stream the video into the canvases.

Credits

This example was based on this awesome tutorial from deepstream.io. Head over to DeepStream.io and check out their sweet website.

About

Example video stream manipulation using some WebRTC and html5 technologies

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published