Использование getUserMedia() в HTML5

@Tilesto · Регистрация: 14.05.2015

Студворк — интернет-сервис помощи студентам

Всем доброго времени суток.
Битый час ломаю голову над проблемой.
есть код:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
    <head>
        <script language="javascript">
            window.URL=window.URL || window.webkitURL;
                navigator.getUserMedia=navigator.getUserMedia||
                        navigator.webkitGetUserMedia||
                        navigator.mozGetUserMedia||
                        msGetUserMedia;
            if (navigator.getUserMedia){
                navigator.getUserMedia({video:true, audio:true}, function(stream){
                    document.getElementById("webcam").src=window.URL.createObjectURL(stream);
                    document.getElementById("webcam").play();
                }, function(error){
                    alert(error);
                });
            }
        </script>
    </head>
    <body>
        <video id="webcam" src="" width="580" height="480"></video>
    </body>
</html>

Его смысл в том (как уже наверное догадались), чтобы вывести изображение с веб-камеры. Но не работает. Перепробовал кучу разных примеров этого кода. Ничего не работает. Но есть одно но. На телефоне (android 5.0.1 стандартный браузер) это все работает, спрашивает разрешение на камеру и выводит изображение. Также это работает в Mozill-е. А в опере, ие, хроме это не работает (даже разрешение не спрашивает).
В опере выдает ошибку [object NavigatorUserMediaError].
Вопрос на миллион долларов - почему так? Что я сделал не так? Префиксы вроде верные. Кучу всякой инфы прошерстил, все бестолку.

Добавлено через 13 часов 18 минут
99 просмотров темы и ни одного ответа.
Неужели никто не знает в чем суть проблемы?

@iVKO · 12.02.2016, 12:24

Запустил в Google Chrome, все работает. Нюанс только был в том, что по умолчанию хром блокирует доступ к микрофону и камере. Если используете последнюю версию хрома, то в строке адреса, справа появится значок сообщения, нажмите на него и разрешите действие, после скорее всего потребуется перезагрузить страницу.

@Tilesto · 12.02.2016, 13:09 **[ТС]**

iVKO, в хроме значка нет. По умолчанию все работает. На других сайтах, с примерами кода, все работает. Код, а ниже демо - работает. Вставляю этот же код - не работает

Добавлено через 26 минут
Код проходит условие в 10 строке, вызывает метод navigator.getUserMedia, но только третий параметр, т.е. error callback (function(error)). Почему?((

Добавлено через 11 минут
Код рабочий, но не работает. Парадокс. Может для того чтобы пользоваться navigator.getUserMedia нужно что-то сделать? Например в htaccess что-то прописать, или на хосте какую-то услугу подключить, или еще где.

@iVKO · 12.02.2016, 13:12

Если это вас смущает, можно попробовать не присваивать в 6 строке navigator.getUserMedia, а сделать проверку всех значений в if:

JavaScript
1
2
3
4
if (navigator.getUserMedia||
     navigator.webkitGetUserMedia||
     navigator.mozGetUserMedia||
     msGetUserMedia ){

@Tilesto · 12.02.2016, 13:27 **[ТС]**

iVKO, пробовал так. И по-другому тоже. Не работает. Поэтому и думаю что проблема либо в предварительных настройках для включения getUserMedia, либо в настройке сервера/хоста, либо нужно кроме проверок значений еще что-то(
Так же пробовал вызывать как navigator.webkitGetUserMedia. Результат один и тот же

Добавлено через 5 минут
Консоль в хроме выдала:
getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See for more details.
Истина где-то рядом

@iVKO · 12.02.2016, 13:32

Сообщение от Tilesto

Код рабочий, но не работает. Парадокс. Может для того чтобы пользоваться navigator.getUserMedia нужно что-то сделать? Например в htaccess что-то прописать, или на хосте какую-то услугу подключить, или еще где.

Всетаки похоже, что где-то что-то блокирует, я то на локальном пробовал и все прошло

@Tilesto · 12.02.2016, 13:36 **[ТС]**

iVKO, вот я и думаю. Опера и хром сматерились на незащищенное подключение http и сказали что нужно использовать https. Для этого мне на хосте придется приобрести выделенный ip и купить ssl. Но вот смущает только то, что в мозиле и на андроиде то все работает

@iVKO · 12.02.2016, 13:39

Tilesto, Google уже давно обещал лучше относиться к сайтам на https, может это один из их каверзных шагов в своем браузере

@Tilesto · 12.02.2016, 13:42 **[ТС]**

iVKO, вот даже не знаю. Подключение выделенного ip в принципе стоит относительно недорого, но будет обидно если я переведу домен на https, а ошибка не исчезнет)
В мозиле в консоли ничего не выдало. Магия)

@Bachinskiy · 15.08.2016, 00:36

Tilesto, удалось ли решить проблему ? У меня такая же ситуация. Причем если scr = "видео с диска", то все работает, а с камеры опера и хром никак.

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Киев стоит - украинская песня zorxor 28.01.2026 wfWdiRqdTxc О Господи, Вечный, Ты . . . Я помоги, Бесконечный. . . Я прошу Ты. . . Я погибаю, спаси. . . Я прошу Тебя Вечный. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .

@iVKO 24 / 24 / 13 Регистрация: 04.02.2015 Сообщений: 96
	12.02.2016, 12:24
	Запустил в Google Chrome, все работает. Нюанс только был в том, что по умолчанию хром блокирует доступ к микрофону и камере. Если используете последнюю версию хрома, то в строке адреса, справа появится значок сообщения, нажмите на него и разрешите действие, после скорее всего потребуется перезагрузить страницу. 0

@Tilesto 7 / 7 / 0 Регистрация: 14.05.2015 Сообщений: 145
	12.02.2016, 13:09 [ТС]
	iVKO, в хроме значка нет. По умолчанию все работает. На других сайтах, с примерами кода, все работает. Код, а ниже демо - работает. Вставляю этот же код - не работает Добавлено через 26 минут Код проходит условие в 10 строке, вызывает метод navigator.getUserMedia, но только третий параметр, т.е. error callback (function(error)). Почему?(( Добавлено через 11 минут Код рабочий, но не работает. Парадокс. Может для того чтобы пользоваться navigator.getUserMedia нужно что-то сделать? Например в htaccess что-то прописать, или на хосте какую-то услугу подключить, или еще где. 0

@Tilesto 7 / 7 / 0 Регистрация: 14.05.2015 Сообщений: 145
	12.02.2016, 13:27 [ТС]
	iVKO, пробовал так. И по-другому тоже. Не работает. Поэтому и думаю что проблема либо в предварительных настройках для включения getUserMedia, либо в настройке сервера/хоста, либо нужно кроме проверок значений еще что-то( Так же пробовал вызывать как navigator.webkitGetUserMedia. Результат один и тот же Добавлено через 5 минут Консоль в хроме выдала: getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See for more details. Истина где-то рядом 0

@Tilesto 7 / 7 / 0 Регистрация: 14.05.2015 Сообщений: 145
	12.02.2016, 13:36 [ТС]
	iVKO, вот я и думаю. Опера и хром сматерились на незащищенное подключение http и сказали что нужно использовать https. Для этого мне на хосте придется приобрести выделенный ip и купить ssl. Но вот смущает только то, что в мозиле и на андроиде то все работает 0

@iVKO 24 / 24 / 13 Регистрация: 04.02.2015 Сообщений: 96
	12.02.2016, 13:39
	Tilesto, Google уже давно обещал лучше относиться к сайтам на https, может это один из их каверзных шагов в своем браузере 1

@Tilesto 7 / 7 / 0 Регистрация: 14.05.2015 Сообщений: 145
	12.02.2016, 13:42 [ТС]
	iVKO, вот даже не знаю. Подключение выделенного ip в принципе стоит относительно недорого, но будет обидно если я переведу домен на https, а ошибка не исчезнет) В мозиле в консоли ничего не выдало. Магия) 0

@Bachinskiy 0 / 0 / 0 Регистрация: 15.08.2016 Сообщений: 1
	15.08.2016, 00:36
	Tilesto, удалось ли решить проблему ? У меня такая же ситуация. Причем если scr = "видео с диска", то все работает, а с камеры опера и хром никак. 0