-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathvideo.html
125 lines (108 loc) · 4.25 KB
/
video.html
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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>qVideo - Audio Video capture in Qualtrics</title>
<meta name="description" content="Audio Video capture in Qualtrics">
<meta name="author" content="Gabe Mansur">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://cdn.WebRTC-Experiment.com/RecordRTC.js"></script>
<script src="https://www.WebRTC-Experiment.com/RecordRTC.js"></script>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/qVideoStyle.css"></link>
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3 video-container">
<div class="alert alert-success" id="msg" role="alert"></div>
<div class="alert alert-danger" id="err" role="alert"></div>
<h4 class="text-center text-primary" id="review-msg">
You can review your video. If you are happy with it,
click "Upload". Otherwise, click "Record" to record another one.
</h4>
<video id="recorder" poster="img/poster.png" autoplay></video>
<video id="playback" controls></video>
<br>
<div class="text-center buttons">
<button class="btn btn-lg btn-danger" id="record">RECORD</button>
<button class="btn btn-lg btn-secondary" id="stop">STOP</button>
<button class="btn btn-lg btn-success" id="upload">UPLOAD</button>
</div>
</div>
</div>
</div>
<script>
const params={};location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi,function(s,k,v){params[k]=v})
const u_id = params.id; // This will be pulled from Qualrtics (or possibly some other source)
const review = params.review;
const audio = params.audio;
$(document).ready(function(){
$("#err").hide();
$("#msg").hide();
$("#review-msg").hide();
$("#stop").hide();
$("#upload").hide();
$("#playback").hide();
const allowReview = (review == 'true') ? true : false;
const captureAudio = (audio == 'true') ? true : false;
if(!allowReview) $("#upload").hide();
qVideo = new QVideo(document.querySelectorAll('video')[0], document.querySelectorAll('video')[1], u_id, null, allowReview, captureAudio);
if(!qVideo.hasGetUserMedia()) {
$("#msg").html('VIDEO RECORDING IS NOT SUPPORTED');
}
$("#record").on('click', function(event) {
$("#review-msg").hide();
$("#recorder").show();
$("#record").hide();
$("#upload").hide();
$("#stop").show();
$("#playback").hide();
qVideo.startRecording();
});
$("#stop").on('click', function(event) {
$("#recorder").hide();
$("#stop").hide();
if(allowReview) {
$("#playback").show();
$("#review-msg").show();
$("#record").show();
$("#upload").show();
}
else {
$("#recorder").hide();
$("#playback").hide();
$(".buttons").hide();
$("#msg").html('Your video has been uploaded.');
$("#msg").show();
}
qVideo.stopRecording();
});
$("#upload").on('click', function(event) {
qVideo.uploadMedia();
$("#recorder").hide();
$("#playback").hide();
$(".buttons").hide();
$("#msg").html('Your video has been uploaded.');
$("#msg").show();
});
});
</script>
<script src="js/qVideo.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
crossorigin="anonymous"></script>
</body>
</html>