class-ified/recorderscreen.php at main · sreecharan-m/class-ified · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html>
<head>
	<title>Screen recorder</title>
</head>

<style type="text/css">

#vid {

	 width: 96%;
	 max-width: 860px;
	 border: 2px solid black;
	 margin-top: 20px;
}

button {

	padding: 10px;
	margin: 10px;
	border: 2px solid #ffa500;

}

#fullcontent {

	display: flex;
	flex-direction: column;
	width: 100vw;
	height: 100vh;

}

</style>

<body>

 <div id="fullcontent">

 	 <div>

 	 <div style="display: flex; margin-top: 0px; justify-content: center;">
 	 <div>
 	 <button id="start">Start Capture</button>
     <button id="stop">Stop Capture</button>
     </div>
     </div>

     <div style="display: flex; justify-content: center;">
     <video id="vid" autoplay></video>
     </div>

     </div>

 </div>


<script type="text/javascript">


    let a =document.getElementById('vid');

    let b =document.getElementById('start');

    let c =document.getElementById('stop');

    var options = {


       video: {
       	   cursor : 'always'
       },
       audio: true

    }

    b.addEventListener("click", function(e){

    	startcapture();
    },false);


    c.addEventListener("click", function(e){

    	stopcapture();
    },false);

    async function startcapture() {

    	  try {

    	  	a.srcObject = await navigator.mediaDevices.getDisplayMedia(options);

    	  }
    	  catch(err) {

    	  	console.error("Error" + err)
    	  }
    }

    function stopcapture() {

    	  let tracks = videoElement.srcObject.getTracks();
    	  tracks.forEach(track => track.stop())

    	  a.srcObject=null;
    }


</script>


</body>

</html>