Реализовать элементы управления камерой и просмотр изображения с нее

[SKolloN]

Здравствуйте уважаемые пользователи.
Дали мне задание Сделать в html формате элементы управления камерой и просмотр изображения с нее. Есть ip и 2 файла типа vspn с js элементами. Соответственно камера локальная и через интернет к ней не подключиться.
Прошу помощи с чего начать изучение, чтобы это реализовать или возможно вы сами мне сможете помочь. Я как верстальщик сайтов, в этом понимаю крайне плохо и честно говоря в тупике, т.к. в интернете информации по этому поводу я не нашел.
Если будут необходимы какие-либо данные постараюсь выложить, что смогу.
Заранее благодарю всех откликнувшихся за терпение и помощь в этом вопросе.

[ADSoft]

как верстальщик - верстаешь окно отображение камеры и необходимые элементы для управления ей, кнопочки нужные ...итд

потом просто на нажатие кнопочек нужно будет привязать необходимые действия по выполнению js и все

[SKolloN]

В этом и проблема, какие действия необходимо привязать? Сверстать это одно, но как мне реализовать управление самой камеры, просто взять код из имеющихся vspn файлов?

[ADSoft]

1. разобраться самому и сделать
2. нанять того кто-может
3. если хотите получить адекватные ответы на форуме - адекватно сформулировать вопросы, дав максимальные пояснения. Вот все твердите vspn, vspn а мы что -Ванга? догадаться что это за файлы и что там находится?

[SKolloN]

Хорошо, прошу прощение за вызванные неудобства

[uberchel]

Для вывода можете использовать стандартный video элемент, для захвата используйте navigator.mediaDevices и MediaSource, как работать с ними можете найти через любой поисковик

[Арафат32]

В процессе гуглёжа попадаются запутанные примеры. Следующий код позволяет не только просматривать, но и записывать видео с вебкамеры и звук с микрофона и потом скачать результат:

<center>
<button id="startButton">запись</button>
<button id="stopButton">стоп</button><br /><br />
<video id="preview" width="320" height="240" style="border-style: solid" autoplay muted></video>
<video id="recording" width="320" height="240" controls hidden></video><br /><br />
<a id="downloadButton" hidden>скачать</a>
</center>
<script>
function startRecording(stream, lengthInMS) {
	let recorder = new MediaRecorder(stream);
	let data = [];
	recorder.ondataavailable = event => data.push(event.data);
	recorder.start();
	let stopped = new Promise((resolve, reject) => {
		recorder.onstop = resolve;
		recorder.onerror = event => reject(event.name);
	});
	return Promise.all([stopped, new Promise(resolve => setTimeout(resolve, lengthInMS)).then(() => recorder.state == "съёмка" && recorder.stop())]).then(() => data);
}
startButton.addEventListener("click", function() {
	navigator.mediaDevices.getUserMedia({
		video: true,
		audio: true
	}).then(stream => {
		preview.srcObject = stream;
		preview.captureStream = preview.captureStream;
		return new Promise(resolve => preview.onplaying = resolve);
	}).then(() => startRecording(preview.captureStream(), 5000)).then (recordedChunks => {
		recording.hidden = false;
		preview.hidden = true;
		recording.src = downloadButton.href = URL.createObjectURL(new Blob(recordedChunks, { type: "video/webm" }));
		recording.play();
		downloadButton.hidden = false;
		downloadButton.download = "RecordedVideo.webm";
	});
}, false);
stopButton.addEventListener("click", function() {preview.srcObject.getTracks().forEach(track => track.stop())}, false);
recording.onended = () => recording.currentTime = 0;
</script>