class-ified/recordercheck.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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MediaCapture and Streams API</title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="main.css">

</head>
<body>
    <header>
        <h1>MediaCapture, MediaRecorder and Streams API</h1>
    </header>
    <main>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit molestiae itaque facere totam saepe tempore esse temporibus, quae reprehenderit aliquid iusto ea laborum, iure eligendi odio exercitationem sapiente illum quos.</p>

        <p><button id="btnStart">START RECORDING</button><br/>
        <button id="btnStop">STOP RECORDING</button></p>

        <video controls></video>

        <video id="vid2" controls></video>

        <!-- could save to canvas and do image manipulation and saving too -->
    </main>


    <script src="https://www.webrtc-experiment.com/MultiStreamsMixer.js"></script>


    <script>

        let constraintObj = {

            video: {
                cursor: 'always',
            }
        };
        // width: 1280, height: 720  -- preference only
        // facingMode: {exact: "user"}
        // facingMode: "environment"

        //handle older browsers that might implement getUserMedia in some way
        if (navigator.mediaDevices === undefined) {
            navigator.mediaDevices = {};
            navigator.mediaDevices.getDisplayMedia = function(constraintObj) {
                let getDisplayMedia = navigator.webkitGetDisplayMedia || navigator.mozGetDisplayMedia;
                if (!getDisplayMedia) {
                    return Promise.reject(new Error('getDisplayMedia is not implemented in this browser'));
                }
                return new Promise(function(resolve, reject) {
                    getDisplayMedia.call(navigator, constraintObj, resolve, reject);
                });
            }
        }else{
            navigator.mediaDevices.enumerateDevices()
            .then(devices => {
                devices.forEach(device=>{
                    console.log(device.kind.toUpperCase(), device.label);
                    //, device.deviceId
                })
            })
            .catch(err=>{
                console.log(err.name, err.message);
            })
        }

        navigator.mediaDevices.getDisplayMedia(constraintObj)
        .then(function(displayStream) {
            //connect the media stream to the first video element
            let video = document.querySelector('video');

            /*if ("srcObject" in video) {
                video.srcObject = mediaStreamObj;
            } else {
                //old version
                video.src = window.URL.createObjectURL(mediaStreamObj);
            }*/


            let videoTrack = displayStream.getVideoTracks();

            navigator.mediaDevices.getUserMedia({
                        audio: true
                    }).then((audioStream) => {
                        let audioTrack = audioStream.getAudioTracks();
                        console.log("hai");
              });


            const MultiStreamsMixer = require('multistreamsmixer');
            //import MultiStreamsMixer from 'multistreamsmixer';

            const mixer = new MultiStreamsMixer([audioTrack, videoTrack]);

            //let stream = new MediaRecorder([videoTrack, audioTrack]);
            const stream = new MediaRecorder(mixer.getMixedStream());


            let mediaStreamObj = stream;
            video.srcObject = mediaStreamObj;
            video.onloadedmetadata = function(ev) {
                //show in the video element what is being captured by the webcam
                //video.play();
            };

            //add listeners for saving video/audio
            let start = document.getElementById('btnStart');
            let stop = document.getElementById('btnStop');
            let vidSave = document.getElementById('vid2');
            let mediaRecorder = new MediaRecorder(mediaStreamObj);
            let chunks = [];

            /*start.addEventListener('click', (ev)=>{
                mediaRecorder.start();
                console.log(mediaRecorder.state);
            })*/

            mediaRecorder.start();

            stop.addEventListener('click', (ev)=>{
                mediaRecorder.stop();
                console.log(mediaRecorder.state);
            });
            mediaRecorder.ondataavailable = function(ev) {
                chunks.push(ev.data);
            }
            mediaRecorder.onstop = (ev)=>{
                let blob = new Blob(chunks, { 'type' : 'video/mp4;' });
                chunks = [];
                let videoURL = window.URL.createObjectURL(blob);
                vidSave.src = videoURL;
            }
        })
        .catch(function(err) {
            console.log(err.name, err.message);
        });

        /*********************************
        getUserMedia returns a Promise
        resolve - returns a MediaStream Object
        reject returns one of the following errors
        AbortError - generic unknown cause
        NotAllowedError (SecurityError) - user rejected permissions
        NotFoundError - missing media track
        NotReadableError - user permissions given but hardware/OS error
        OverconstrainedError - constraint video settings preventing
        TypeError - audio: false, video: false
        *********************************/
    </script>


</body>
</html>