MediaCapture is used for capturing media ( live stream ) that enable website to integrate its media capturing without any chrome extension and you can do more it.
- Take Screenshots
- Edit Screenshot like - Freehand Sketcha, Text Adding, Crop Image , Filter (Invert) color & Brightness
- Display Record
- Audio Record
- Both Audio & Video record with System Sound
- $ clone git https://github.com/amitabh-anandcl/mediacapture.git
- First extract the folder.
- and check js folder that conatin
main.jsfile - just set it in
<script src="/*/main.js"></script>to end of all script - now done.
MediaCaptureconstructor- extends this into your constructor
- For record Audio & Video
- Just call
GetAllWithMicrophoneStream()no params - Then select your Screen like - Entire Screen, Chrome Tabs, Windows etc. and Click on
Sharebutton - for stop call
StopRecording()no params
- Just call
- Obtain Blob data of Recorded stream call
Convertblob()it will return Blob Data - if Record Display only no Audio call
RecordDisplayOnly()no params - if Record Audio only no Video call
RecordMicrophone()no params - if you want pause/resume recording call
PauseResume()np params, during Recrding,Truefor Pause State ,Falsefor resume State GetVideoStream()return VideoStreamGetAudioStreamreturn Audio StreamGetCombineStreamreturn Both Audio and Video Stream
- Screenshot to call
ScreenShot()ScreenShot()create Base64 data, get this byimageDatas64SaveScreenShot()will convert your base64 toblobUrldata
- CropImage to call
CropImage(x1 , y1 , x2 , y2)get cropped Imagex1- start pointy1- start pointx2- end pointy2- end point
- Undo the image in previous state to call
UndoFilterImage()no params - Filter Image to call
FilterImage(color , bright = 1)get invertedcolorto convert into colorthis is experimental not suggest to usebright = 1for brightness0 - 1
- hand Drawing on image to call
DrawFreeOnImage( color )colorlike -green,red,blue,green,yellowin string
- Add text in Image just
Double Clickimage to add text on image- you have to set
setTextOnImage = 'your text'then double click
- you have to set
- then download image call
SaveScreenShot()
<body>
<canvas id = 'can'></canvas>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type = "text/javascript" src="./main.js"></script>
<script type="text/javascript">
let MediaCapture = new MediaCapture()
MediaCapture.windowFullheight = window.innerHeight
MediaCapture.windowFullWidth = window.innerWidth
MediaCapture.setTextOnImage = 'Hello Media Capture'
let canElem = document.querySelector('#can')
MediaCapture.CanvasElem = canElem
// Recording Video and Audio
MediaCapture.GetAllWithMicrphoneStream()
// to stop
MediaCapture.StopRecording()
// after stop recordBLob is objec { 'mimeType' : 'video/webm , 'blob' : blob} like that
let recordBlob = MediaCapture.ConvertBlob()
// to Screen shot
MediaCapture.ScreenShot()
let blobImage = MediaCapture.SaveScreenShot()
</script>
</body>