Если вы хотите открыть поток с веб-камеры в веб-браузере, какую технологию вы выберете? Наверное, многие разработчики ответят на HTML5. Да, с помощью JavaScript API getUserMedia будет довольно легко открыть веб-камеру в веб-браузерах. Однако API не поддерживается некоторыми старыми веб-браузерами, такими как Internet Explorer 6, 7 и 8. Кроме того, интерфейс HTML5 не может полностью настроить параметры камеры, такие как выдержка, фокус и т. Д. Следовательно, если вы хотите создать профессиональную камеру решение для веб-проекта, HTML5 - не лучший выбор. Вот почему Dynamsoft выбрала решение. Dynamsoft Camera SDK - это SDK для веб-камеры на JavaScript для Windows с DirectShow под капотом. Он позволяет разработчикам быстро создавать интерактивную программу просмотра веб-камер с помощью нескольких строк кода HTML и JavaScript, а также полностью контролировать и настраивать параметры камеры в веб-браузерах.
Как работает Dynamsoft Webcam SDK
SDK включает два основных модуля: библиотеку JavaScript и службу веб-камеры:
- Библиотека JavaScript работает в веб-браузере. Он связывается со службой Windows веб-камеры через HTTP. Он принимает и отправляет операционные запросы пользователей службе веб-камеры и обрабатывает результаты службы.
- Служба веб-камеры прослушивает 127.0.0.1 и обрабатывает интерфейс с камерами (через DirectShow) и передает ответ на уровень JavaScript.
Ваша первая программа просмотра потокового видео с веб-камеры в формате HTML
Получить Dynamsoft Webcam SDK
"Скачать"
Начало работы: Hello World
Захват изображений с помощью средства просмотра веб-камеры в веб-браузерах
Создайте в проекте папку index.html.
Включите Dynamsoft.camera.min.js:
<script type="text/javascript" src="http://www.dynamsoft.com/library/dcs/dynamsoft.camera.min.js"> </script>
Создайте программу просмотра видео и программу просмотра изображений для инициализации объекта Dynamsoft Webcam:
<div id="video-container"> </div>
<div id="image-container"> </div>
<script type="text/javascript">
var dcsObject, imageViewer;
var width = 480, height = 320;
function onInitSuccess(videoViewerId, imageViewerId) {
dcsObject = dynamsoft.dcsEnv.getObject(videoViewerId); // Get the Dynamsoft Webcam object
dcsObject.videoviewer.setWidth(width);
dcsObject.videoviewer.setHeight(height);
imageViewer = dcsObject.getImageViewer(imageViewerId); // Get a specific image viewer
imageViewer.ui.setWidth(width);
imageViewer.ui.setHeight(height);
}
function onInitFailure(errorCode, errorString) {
alert('Init failed: ' + errorString);
};
dynamsoft.dcsEnv.init('video-container', 'image-container', onInitSuccess, onInitFailure);
<script>
После получения dcsObject и imageViewer вы можете указать ширину и высоту.
Перечислите источники камеры в элементе ‹select› и воспроизведите выбранный источник. Индекс источника по умолчанию равен 0:
<select size="1" id="source" width="220px" onchange="onSourceChanged()"></select>
<script type="text/javascript">
var cameraList = dcsObject.camera.getCameraList(); // Get a list of available cameras
for (var i = 0; i < cameraList.length; i++) {
document.getElementById("source").options.add(new Option(cameraList[i], i));
}
if (cameraList.length > 0) {
// Call this method to take the ownership,
// in case the listed camera is occupied by another Dynamsoft Webcam process.
dcsObject.camera.takeCameraOwnership(cameraList[0]);
dcsObject.camera.playVideo();
} else {
alert('No camera is connected.');
}
<script>
Измените источник камеры и воспроизведите видеопоток:
<script type="text/javascript">
function onSourceChanged() {
if (!dcsObject) return;
var source = document.getElementById("source");
var camera = source.options[source.selectedIndex].text;
dcsObject.camera.takeCameraOwnership(camera);
dcsObject.camera.playVideo();
};
<script>
Создайте кнопку для захвата изображений:
<input type="button" value="Capture" onclick="onCapture();" />
<script type="text/javascript">
function onCapture() {
if (!dcsObject) return;
dcsObject.camera.captureImage('image-container');
if (dcsObject.getErrorCode() !== EnumDCS_ErrorCode.OK) {
alert('Capture error: ' + dcsObject.getErrorString());
}
};
<script>
Уничтожьте объект Dynamsoft Webcam до закрытия веб-страницы:
<script type="text/javascript">
window.onbeforeunload = function() {
if (dcsObject) dcsObject.destroy();
};
<script>
Сохранить файлы изображений на локальный диск
Обычно, если вы хотите сохранить изображение на локальный диск из веб-браузера, вы можете щелкнуть изображение правой кнопкой мыши и выбрать «Сохранить изображение как». Dynamsoft Webcam SDK отключил щелчок правой кнопкой мыши, так как же сохранить изображение?
Используя DCS JavaScript API, мы можем преобразовать выбранное изображение в Base64:
var data = imageViewer.io.convertToBase64([imageViewer.image.getIndex()], imageViewer.io.EnumImageType.PNG);
Первый параметр в convertToBase64 () - это массив. Вам нужно преобразовать индекс изображения с помощью []. Почему массив? Средство просмотра изображений позволяет пользователям выбирать несколько изображений, нажимая Ctrl или Shift, чтобы экспортировать PDF и TIFF файлы:
var data = imageViewer.io.convertToBase64(imageViewer.image. getSelectedIndices(), imageViewer.io.EnumImageType.PDF);
Будьте осторожны со вторым параметром - типом изображения. Если вы используете множественный выбор для PNG, возвращается значение null.
Создайте новый элемент ‹a› и укажите имя файла и URL-адрес. Код работает только в Chrome:
var link = document.createElement('a');
link.download = "tmp.png";
link.href = "data:image/png;base64," + data;
link.click();
Еще один хитрый способ - открыть консоль разработчика и найти элемент изображения:
<img class="ds-dcs-img-obj" onmousedown="return false;" unselectable="on" draggable="false" src="http://127.0.0.1:18620/img?session=session_1480636765866833_45&object=dcsObject_845825688&imageviewer=imageViewer_964125688&index=0&ts=1480661108599" style="position: absolute; top: 0px; left: 27px; width: 424px; height: 318px;">
Скопируйте и откройте URL-адрес в новой вкладке. Теперь вы можете сохранить изображение, щелкнув правой кнопкой мыши.
