Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add video input change for image only mode #620

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
+184 −0
Open

Add video input change for image only mode #620

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0c8da9e
Add change-image-input.html to demonstrate changing video device for …
MichaelHeydon Nov 2, 2021
ad1e72e
Extend conditional within setVideoInput() to allow switchin video dev…
MichaelHeydon Nov 2, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
181 changes: 181 additions & 0 deletions examples/change-image-input.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,181 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Image Input Example - 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>
body {
font-weight: 300;
}

/* change player background color */
#myVideo {
background-color: #6AE838;
}

select {
margin: 0 0 0.5em 0;
}

.inputSelector {
margin-top: 30px;
display: none;
}
</style>

</head>
<body>

<div>
<video id="myVideo" playsinline class="video-js vjs-default-skin"></video>

<div class="inputSelector">
<label>Select image input: </label>
<select id="selector"></select>
</div>
</div>

<script>
/* eslint-disable */
var devices, deviceId;
var options = {
controls: true,
fluid: false,
bigPlayButton: false,
controlBar: {
volumePanel: false,
fullscreenToggle: false
},
width: 640,
height: 480,
plugins: {
record: {
debug: true,
imageOutputType: 'dataURL',
imageOutputFormat: 'image/png',
imageOutputQuality: 0.92,
image: {
// image media constraints: set resolution of camera
width: { min: 640, ideal: 640, max: 1280 },
height: { min: 480, ideal: 480, max: 920 }
},
// dimensions of captured video frames
frameWidth: 640,
frameHeight: 480
}
}
};
var inputSection = document.getElementsByClassName('inputSelector')[0];

// apply some workarounds for certain browsers
applyVideoWorkaround();

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

// enumerate devices once
player.one('deviceReady', function() {
player.record().enumerateDevices();
});

player.on('enumerateReady', function() {
devices = player.record().devices;

// handle selection changes
var inputSelector = document.getElementById('selector');
inputSelector.addEventListener('change', changeVideoInput);

// populate select options
var deviceInfo, option, i;
for (i = 0; i !== devices.length; ++i) {
deviceInfo = devices[i];
option = document.createElement('option');
option.value = deviceInfo.deviceId;
if (deviceInfo.kind === 'videoinput') {
console.info('Found video input device: ', deviceInfo.label);
option.text = deviceInfo.label || 'input device ' +
(inputSelector.length + 1);
inputSelector.appendChild(option);
}
}

if (inputSelector.length == 0) {
// no output devices found, disable select
option = document.createElement('option');
option.text = 'No video input devices found';
option.value = undefined;
inputSelector.appendChild(option);
inputSelector.disabled = true;
console.warn(option.text);
} else {
console.info('Total video input devices found:', inputSelector.length);
}

// show input selector section
inputSection.style.display = 'block';
});

function changeVideoInput(event) {
var label = event.target.options[event.target.selectedIndex].text;
deviceId = event.target.value;

try {
// change video input device
player.record().setVideoInput(deviceId);

console.log("Changed video input to '" + label + "' (deviceId: " +
deviceId + ")");
} catch (error) {
console.warn(error);

// jump back to first output device in the list as it's the default
event.target.selectedIndex = 0;
}
}

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

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

player.on('error', function(element, error) {
console.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('snapshot ready: ', player.recordedData);
});
</script>

</body>
</html>
3 changes: 3 additions & 0 deletions src/js/videojs.record.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1827,6 +1827,9 @@ class Record extends Plugin {
this.recordVideo = {
deviceId: {exact: deviceId}
};
} else if (this.recordImage === Object(this.recordImage)) {
// already using image constraints
this.recordImage.deviceId = {exact: deviceId};
}

// release existing device
Expand Down