Webrtc–getusermedia-filter

Example Description: Grab a frame of mediastream data and use CSS filter effects on the frame data.

Steps:

1. Obtain an available MediaStream by the Getusermedia method

2. Canvas method DrawImage Grab a frame of mediastream data

3. CSS style for using filter effects on canvas elements based on user click action

In the WebKit kernel, CSS filters are blur, grayscale, invert, sepia, etc.

See Sample Demo

Steps:

Define the filter, below is the corresponding CSS code (the following filter is provided by the WebKit kernel)

<style>  . blur {    -webkit-filter:blur (3px);  }  . Grayscale {    -webkit-filter:grayscale (1);  }  . Invert {    -webkit-filter:invert (1);  }  . Sepia {    -webkit-filter:sepia (1);  }  button {    width:8.1em;  }  button#snapshot {    margin:0 1em 1em 0;  } </style>

Page code

<video autoplay></video>  <button id= "snapshot" ></button>  <button id= "Filter" > Using Filters </button>  <canvas></canvas>

JS Code

Snapshotbutton = Document.queryselector ("Button#snapshot");//Button Filterbutton = Document.queryselector ("button# Filter "); Filter Ammonium Button video = Document.queryselector ("video"); Video Tag canvas = Document.queryselector ("Canvas"); Canvas Canvas//viewportcanvas.width = 480;canvas.height = 360;//Filter array var filters = [' blur ', ' grayscale ', ' invert ', ' sepia ']; Snapshotbutton.onclick = function Snap () {Canvas.getcontext ("2d"). DrawImage (video, 0, 0, Canvas.width, canvas.height );}  Apply Filter (Recycle) Filterbutton.onclick = function () {var newindex = (Filters.indexof (canvas.classname) + 1)% Filters.length; Canvas.classname = Filters[newindex];} Navigator.getusermedia = Navigator.getusermedia | | Navigator.webkitgetusermedia | | navigator.mozgetusermedia;//WebRTC Constraintsvar constraints = {audio:false, video:true};var video = Document.queryse Lector ("video");//MediaStream as Video input function Successcallback (stream) {window.stream = stream;//Stream available to console if (window. URL) {video.src = window. URl.createobjecturl (stream);  } else {video.src = stream; }}function Errorcallback (Error) {Console.log ("Navigator.getusermedia Error:", error);} Navigator.getusermedia (Constraints, Successcallback, errorcallback);

Webrtc–getusermedia-filter