https://win-win.net.br/encerramento_winwin_arquivos/webrtc.js

1$(function() {
2
3    var video = $('#captureVideoModal #video-recorder')[0];
4    
5    var mediaRecorder;
6
7    var mediaConstraints = {
8        audio: false,
9        video: true
10    };
11
12    var __stream = null;
13
14    function captureUserMedia(mediaConstraints, successCallback, errorCallback) {
15        navigator.mediaDevices.getUserMedia(mediaConstraints).then(successCallback).catch(errorCallback);
16    }
17    
18    function onMediaSuccess(stream) {
19        
20        /* $("#video-recorder").show();
21        $("#video-player").hide(); */
22        
23        deleteFile();
24
25        __stream = stream;
26        video.srcObject = stream;
27        video.play();
28
29        mediaRecorder = new MediaStreamRecorder(stream);
30        mediaRecorder.mimeType = 'video/webm';
31        
32        
33
34        mediaRecorder.start(-1);
35
36        $('#captureVideoModal #stop-recording').removeAttr('disabled');
37        $('#captureVideoModal #pause-recording').removeAttr('disabled');
38        $('#captureVideoModal #save-recording').removeAttr('disabled');
39    }
40    
41    function onMediaError(e) {
42        console.error('media error', e);
43    }
44
45    function genUuid() {
46        function s4() {
47            return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
48        }
49        return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();        
50    }
51
52    function uploadFile(blob) {
53        
54        var filename = genUuid() + ".webm";
55        var data = new FormData();
56        
57        data.append('file_name', filename);
58        data.append('file', blob);
59        
60        $.ajax({

61            url :  BASEURL+'capturaVideo/service/upload',
62            type: 'POST',
63            data: data,
64            contentType: false,
65            processData: false,
66            dataType: 'json',
67            beforeSend: function() {
68                $("#captureVideoModal #video-recorder").hide();
69                $('#captureVideoModal #loading-recording').show();
70            },
71            success: function(result) {
72                $('#captureVideoModal #loading-recording').hide();
73                $("#captureVideoModal #video-player").show();
74
75                $('#captureVideoModal #video-player')[0].pause();
76                $('#captureVideoModal #video-player source').attr('src', result.caminho + result.arquivo);
77                $("#captureVideoModal #video-player")[0].load();
78
79                $('#captureVideoModal #video-save').val(result.arquivo);
80                $('#captureVideoModal #save-recording').removeAttr('disabled');
81            },  
82            error: function(err) {
83                console.log(err);
84            }
85        });
86    }
87
88    function deleteFile() {
89        if ( $('#captureVideoModal #video-save').val().trim() != '' ) {
90            $.ajax({

91                url :  BASEURL+'capturaVideo/service/deleteFile',
92                type: 'POST',
93                data: { file: $('#captureVideoModal #video-save').val().trim() },
94                dataType: 'json',
95                success: function(result) {
96                    $("#captureVideoModal #video-recorder").show();
97                    $("#captureVideoModal #video-player").hide();
98    
99                    $('#captureVideoModal #video-save').val('');
100
101                    $('#captureVideoModal #video-player')[0].pause();
102                    $('#captureVideoModal #video-player source').removeAttr('src');
103                    $("#captureVideoModal #video-player")[0].load();
104                },  
105                error: function(err) {
106                    console.log(err);
107                }
108            });
109        }
110
111        $("#captureVideoModal #video-recorder").show();
112        $("#captureVideoModal #video-player").hide();
113    }
114
115    $('#captureVideoModal #start-recording').on('click', function(e) {
116        e.preventDefault();
117        e.stopPropagation();
118
119        $(this).attr('disabled', 'disabled');
120        $('#captureVideoModal #save-recording').attr('disabled', 'disabled');
121        captureUserMedia(mediaConstraints, onMediaSuccess, onMediaError);
122    });
123
124    $('#captureVideoModal #stop-recording').on('click', function(e) {
125        e.preventDefault();
126        //e.stopPropagation();
127
128        $(this).attr('disabled', 'disabled');
129
130        mediaRecorder.ondataavailable = function(blob) {
131            uploadFile(blob);
132        };
133
134        mediaRecorder.stop();
135
136        __stream.getTracks().forEach(function(track) {
137            track.stop();
138        });
139
140        $('#captureVideoModal #pause-recording').attr('disabled', 'disabled');
141        $('#captureVideoModal #start-recording').removeAttr('disabled');
142    });
143
144    $('#captureVideoModal #pause-recording').on('click', function(e) {
145        e.preventDefault();
146        e.stopPropagation();
147
148        $(this).attr('disabled', 'disabled');
149        mediaRecorder.pause();
150
151        $('#captureVideoModal #resume-recording').removeAttr('disabled');
152    });
153
154    $('#resume-recording').on('click', function(e) {
155        e.preventDefault();
156        e.stopPropagation();
157
158        $(this).attr('disabled', 'disabled');
159        mediaRecorder.resume();
160
161        $('#captureVideoModal #pause-recording').removeAttr('disabled');
162    });
163
164    $('#save-recording').on('click', function(e) {
165        e.preventDefault();
166        
167        $("#captureVideoModal #video-recorder").css('display', 'block');
168        $("#captureVideoModal #video-player").css('display', 'none');
169
170        $('#captureVideoModal #stop-recording').attr('disabled', 'disabled');
171        $('#captureVideoModal #pause-recording').attr('disabled', 'disabled');
172        $('#captureVideoModal #save-recording').attr('disabled', 'disabled');
173        $('#captureVideoModal #resume-recording').attr('disabled', 'disabled');
174        $('#captureVideoModal #start-recording').removeAttr('disabled');
175
176        $('#captureVideoModal').modal('hide');
177    });
178
179    $('#captureVideoModal #delete-recording, #captureVideoModal #close-recording').on('click', function(e) {
180        e.preventDefault();
181
182        $("#captureVideoModal #video-recorder").css('display', 'block');
183        $("#captureVideoModal #video-player").css('display', 'none');
184
185        $('#captureVideoModal #stop-recording').attr('disabled', 'disabled');
186        $('#captureVideoModal #pause-recording').attr('disabled', 'disabled');
187        $('#captureVideoModal #save-recording').attr('disabled', 'disabled');
188        $('#captureVideoModal #resume-recording').attr('disabled', 'disabled');
189        $('#captureVideoModal #start-recording').removeAttr('disabled');
190
191        if (typeof mediaRecorder != 'undefined') {
192            mediaRecorder.stop();
193        }
194
195        if ( __stream != null ) {
196            __stream.getVideoTracks()[0].stop();
197        }
198
199        deleteFile();
200    });
201
202});