Skip to content

Commit

Permalink
add safari audio workarounds in examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@thijstriemstra
thijstriemstra committed Jan 13, 2019
1 parent 0972cae commit 0e7d376
Show file tree
Hide file tree
Showing 10 changed files with 506 additions and 313 deletions.
161 changes: 93 additions & 68 deletions examples/enumerate-devices.html
View file
Expand Up @@ -24,6 +24,10 @@
#myAudio {
background-color: #8EDBE6;
}

#enumBtn {
display: none;
}
</style>

</head>
Expand All @@ -37,6 +41,7 @@
</div>

<script>
var player;
var options = {
controls: true,
width: 600,
Expand Down Expand Up @@ -64,77 +69,97 @@
// apply some workarounds for certain browsers
applyAudioWorkaround();

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

// user requested to enumerate devices
document.getElementById('enumBtn').onclick = function(ev) {
player.record().enumerateDevices();
};
if (isSafari) {
// add start button for safari
addStartButton();
} else {
// other browsers
createPlayer();
}

function createPlayer(event) {
document.getElementById('enumBtn').style.display = 'block';

if (isSafari) {
if (event) {
// hide start button on safari
event.target.style.display = 'none';
}
updateContext(options);
}

player.on('enumerateReady', function() {
var devices = player.record().devices;
var list = document.getElementById('devices');
var node, textnode;
player = videojs('myAudio', options, function() {
// print version information at startup
var msg = 'Using video.js ' + videojs.VERSION +
' with videojs-record ' + videojs.getPluginVersion('record') +
', videojs-wavesurfer ' + videojs.getPluginVersion('wavesurfer') +
', wavesurfer.js ' + WaveSurfer.VERSION + ' and recordrtc ' +
RecordRTC.version;
videojs.log(msg);
});

// remove existing list items
while (list.firstChild) {
list.removeChild(list.firstChild);
}
console.log('total devices:', devices.length);

// The user must have already granted permission to the page
// to use the media devices in order to get the device label
// populated. When served over HTTPS, the browser will remember
// permission granted on subsequent loads, so the permission
// will have been granted before requesting media. When using
// HTTP, not HTTPS, the getUserMedia request must be made and
// accepted before enumerateDevices will populate labels.
devices.forEach(function(device) {
description = device.kind + ' - label: ' +
(device.label || 'unknown') +
' (id: ' + device.deviceId + ')';
console.log(description);

// add device to list
node = document.createElement('li');
textnode = document.createTextNode(description);
node.appendChild(textnode);
list.appendChild(node);
// user requested to enumerate devices
document.getElementById('enumBtn').onclick = function(ev) {
player.record().enumerateDevices();
};

player.on('enumerateReady', function() {
var devices = player.record().devices;
var list = document.getElementById('devices');
var node, textnode;

// remove existing list items
while (list.firstChild) {
list.removeChild(list.firstChild);
}
console.log('total devices:', devices.length);

// The user must have already granted permission to the page
// to use the media devices in order to get the device label
// populated. When served over HTTPS, the browser will remember
// permission granted on subsequent loads, so the permission
// will have been granted before requesting media. When using
// HTTP, not HTTPS, the getUserMedia request must be made and
// accepted before enumerateDevices will populate labels.
devices.forEach(function(device) {
description = device.kind + ' - label: ' +
(device.label || 'unknown') +
' (id: ' + device.deviceId + ')';
console.log(description);

// add device to list
node = document.createElement('li');
textnode = document.createTextNode(description);
node.appendChild(textnode);
list.appendChild(node);
});
});

// error handling
player.on('enumerateError', function() {
console.log('enumerate error:', player.enumerateErrorCode);
});

player.on('deviceError', function() {
console.log('device error:', player.deviceErrorCode);
});

player.on('error', function(error) {
console.log('error:', error);
});

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

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

// error handling
player.on('enumerateError', function() {
console.log('enumerate error:', player.enumerateErrorCode);
});

player.on('deviceError', function() {
console.log('device error:', player.deviceErrorCode);
});

player.on('error', function(error) {
console.log('error:', error);
});

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

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

</body>
Expand Down
71 changes: 46 additions & 25 deletions examples/plugins/audio-only-lamejs.html
View file
Expand Up @@ -17,6 +17,8 @@
<script src="../../dist/videojs.record.js"></script>
<script src="../../dist/plugins/videojs.record.lamejs.js"></script>

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

<style>
/* change player background color */
#myAudio {
Expand All @@ -29,6 +31,7 @@
<audio id="myAudio" class="video-js vjs-default-skin"></audio>

<script>
var player;
var options = {
controls: true,
width: 600,
Expand Down Expand Up @@ -57,35 +60,53 @@
}
};

var player = videojs('myAudio', options, function() {
// print version information at startup
var msg = 'Using video.js ' + videojs.VERSION +
' with videojs-record ' + videojs.getPluginVersion('record') +
', videojs-wavesurfer ' + videojs.getPluginVersion('wavesurfer') +
' and wavesurfer.js ' + WaveSurfer.VERSION;
videojs.log(msg);
});
if (isSafari) {
// add start button for safari
addStartButton();
} else {
// other browsers
createPlayer();
}

function createPlayer(event) {
if (isSafari) {
if (event) {
// hide start button on safari
event.target.style.display = 'none';
}
updateContext(options);
}

player = videojs('myAudio', options, function() {
// print version information at startup
var msg = 'Using video.js ' + videojs.VERSION +
' with videojs-record ' + videojs.getPluginVersion('record') +
', videojs-wavesurfer ' + videojs.getPluginVersion('wavesurfer') +
' and wavesurfer.js ' + WaveSurfer.VERSION;
videojs.log(msg);
});

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

player.on('error', function(error) {
console.log('error:', error);
});
player.on('error', function(error) {
console.log('error:', error);
});

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

// user completed recording and stream is available
player.on('finishRecord', function() {
// the blob object contains the recorded data that
// can be downloaded by the user, stored on server etc.
console.log('finished recording: ', player.recordedData);
});
// user completed recording and stream is available
player.on('finishRecord', function() {
// the blob object contains the recorded data that
// can be downloaded by the user, stored on server etc.
console.log('finished recording: ', player.recordedData);
});
}
</script>
</body>
</html>
69 changes: 45 additions & 24 deletions examples/plugins/audio-only-mp3.html
View file
Expand Up @@ -17,6 +17,8 @@
<script src="../../dist/videojs.record.js"></script>
<script src="../../dist/plugins/videojs.record.vmsg.js"></script>

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

<style>
/* change player background color */
#myAudio {
Expand All @@ -29,6 +31,7 @@
<audio id="myAudio" class="video-js vjs-default-skin"></audio>

<script>
var player;
var options = {
controls: true,
width: 600,
Expand All @@ -55,34 +58,52 @@
}
};

var player = videojs('myAudio', options, function() {
// print version information at startup
var msg = 'Using video.js ' + videojs.VERSION +
' with videojs-record ' + videojs.getPluginVersion('record') +
' and videojs-wavesurfer ' + videojs.getPluginVersion('wavesurfer');
videojs.log(msg);
});
if (isSafari) {
// add start button for safari
addStartButton();
} else {
// other browsers
createPlayer();
}

function createPlayer(event) {
if (isSafari) {
if (event) {
// hide start button on safari
event.target.style.display = 'none';
}
updateContext(options);
}

player = videojs('myAudio', options, function() {
// print version information at startup
var msg = 'Using video.js ' + videojs.VERSION +
' with videojs-record ' + videojs.getPluginVersion('record') +
' and videojs-wavesurfer ' + videojs.getPluginVersion('wavesurfer');
videojs.log(msg);
});

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

player.on('error', function(error) {
console.log('error:', error);
});
player.on('error', function(error) {
console.log('error:', error);
});

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

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

0 comments on commit 0e7d376

Please sign in to comment.