videojs-record/examples/multi.html at master · collab-project/videojs-record · 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
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Multiple recorders and player on page - Record Plugin for Video.js</title>

  <link href="../node_modules/video.js/dist/video-js.min.css" rel="stylesheet">
  <link href="../dist/css/videojs.record.css" rel="stylesheet">
  <link href="assets/css/examples.css" rel="stylesheet">

  <script src="../node_modules/video.js/dist/video.min.js"></script>
  <script src="../node_modules/recordrtc/RecordRTC.js"></script>
  <script src="../node_modules/webrtc-adapter/out/adapter.js"></script>

  <script src="../dist/videojs.record.js"></script>

  <script src="browser-workarounds.js"></script>

  <style>
  /* change player background color */
  #myRecorder1 {
      background-color: #6df7ab;
  }
  #myRecorder2 {
      background-color: #f5e042;
  }
  #myPlayer {
      margin-top: 40px;
  }
  </style>
</head>
<body>

<!-- Primary videojs-record instance (video-only) -->
<video id="myRecorder1" playsinline class="video-js vjs-default-skin"></video>

<!-- Secondary videojs-record instance (audio + video) -->
<video id="myRecorder2" playsinline class="video-js vjs-default-skin"></video>

<!-- Secondary video.js player with MP4 video and no plugins enabled -->
<video id="myPlayer" class="video-js vjs-default-skin"
       data-setup='{"controls": true, "autoplay": false, "preload": "auto"}'>
  <source src="https://collab-project.github.io/videojs-wavesurfer/demo/media/example.mp4" type="video/mp4">
</video>

<script>
/* eslint-disable */
var options = {
    controls: true,
    width: 320,
    height: 240,
    fluid: false,
    bigPlayButton: false,
    controlBar: {
        volumePanel: false
    },
    plugins: {
        record: {
            audio: false,
            video: true,
            maxLength: 10,
            displayMilliseconds: false,
            debug: true
        }
    }
};

// apply some workarounds for opera browser
applyVideoWorkaround();

// ==============================================
// Primary videojs-record instance
// ==============================================
var player1 = videojs('myRecorder1', options, function() {
    // print version information at startup
    var msg = 'myRecorder1: Using video.js ' + videojs.VERSION +
        ' with videojs-record ' + videojs.getPluginVersion('record') +
        ' and recordrtc ' + RecordRTC.version;
    videojs.log(msg);
});

// error handling
player1.on('deviceError', function() {
    console.warn('device error:', player1.deviceErrorCode);
});

player1.on('error', function(element, error) {
    console.error(error);
});

// user clicked the record button and started recording
player1.on('startRecord', function() {
    console.log('myRecorder1: started recording!');
});

// user completed recording and stream is available
player1.on('finishRecord', function() {
    // the blob object contains the recorded data that
    // can be downloaded by the user, stored on server etc.
    console.log('myRecorder1: finished recording: ', player1.recordedData);
});

// ==============================================
// Secondary videojs-record instance
// ==============================================

// use audio + video
options.plugins.record.audio = true;

var player2 = videojs('myRecorder2', options, function() {
    // print version information at startup
    var msg = 'myRecorder2: Using video.js ' + videojs.VERSION +
        ' with videojs-record ' + videojs.getPluginVersion('record') +
        ' and recordrtc ' + RecordRTC.version;
    videojs.log(msg);
});

// error handling
player2.on('deviceError', function() {
    console.warn('device error:', player2.deviceErrorCode);
});

player2.on('error', function(element, error) {
    console.error(error);
});

// user clicked the record button and started recording
player2.on('startRecord', function() {
    console.log('myRecorder2: started recording!');
});

// user completed recording and stream is available
player2.on('finishRecord', function() {
    // the blob object contains the recorded data that
    // can be downloaded by the user, stored on server etc.
    console.log('myRecorder2: finished recording: ', player2.recordedData);
});
</script>

</body>
</html>