WebRTC показывает черный фон вместо видео (камера на смартфоне)

@William Blake · Регистрация: 09.08.2010

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

Нужно использовать функцию getUserMedia() для простого picture capture. При запуске сайта в браузере на компьютере веб камера распознается, скрипты работают правильно, при нажатии на соответствующую кнопку происходит захват (фото) того, что видит веб камера.

При запуске сайта в браузере (firefox, chrome, operamini и в любых других, как я подозреваю) происходит запрос на использование камеры, я разрешаю использование камеры, но вместо того, чтобы показывать видео с камеры, в элементе <video autoplay id="video"></video> показывается черный фон и ничего больше. Перерыл кучу статей, никакого решения так и не нашел. Не работает эта функция и на других устройствах.

Я использовал точно такой пример как здесь: https://webrtc.github.io/sampl... ia/canvas/
Можно также как здесь: https://davidwalsh.name/demo/camera.php

Оба варианта чудесно работают на компьютерах, но не работают в браузерах на телефонах, все равно, каких моделей и все равно, какие браузеры. Как заставить getUserMedia() работать и на телефонах?

Добавлено через 35 минут
Еще один хороший туториал: https://www.html5rocks.com/en/... dia/intro/

Но опять же, работает только на лэптопе/обычном пк, на смартфоне черный фон вместо видео везде.

Добавлено через 46 минут
Я вообще готов рассмотреть любые наиболее рабочие варианты, необязательно WebRTC. У некоторых устройств работают какие-то одни варианты записи/фотографирования с камеры, у некоторых - другие. Но на моем основном смартфоне не работал пока ни один. Есть ли, может, наиболее универсальная стабильная библиотека какая-то, которая работает, например, в 70% случаев?

@alsobol · 31.10.2018, 15:29

Надо понимать что эта технология работает исключительно с https. Пример не будет работать на другом устройстве без этого протокола. А так даже это не работает?

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<video autoplay></video>
 
<script>
navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia;
navigator.getUserMedia({ audio: true, video: true }, gotStream, streamError);
 
function gotStream(stream) {
   document.querySelector('video').src = URL.createObjectURL(stream);
}
 
function streamError(error) {
   console.log(error);
}
</script>

@William Blake · 01.11.2018, 00:40 **[ТС]**

Я, к сожалению, не могу уже проверить - то место, где я свое приложение развертывал, я закрыл и пока не могу открыть. Развертывать иными способами мне будет несколько накладно. Но насколько я помню, я пробовал и метод, предложенный выше. В том, что доступ был по https - нет сомнения. Развертывал приложение я на Microsoft Azure Platform или как она там правильно называется. Там можно эксплицитным образом задать, что доступ осуществляется только по https, что я и сделал.

Думаю, проблема с getUserMedia в принципе достаточно глобальна. Не просто же так существует очень мало приложений в сети, который 1) работают с камерой смартфона 2) работают во всех браузерах на смартфонах. Обычно для таких вещей пишут все же статичное приложение.

Если кого интересуюет, как я эту проблему решил - никак. Это было что-то вроде "вступительного" задания при поиске работы. Я сделал кроссбраузерность на столько хорошо, на сколько смог, отдал работодателю и позже при беседе рассказал о этих проблемах с getUserMedia. Его все устроило, он лишь добавил, что кроссбраузерность + видео/аудио + различные модели смартфонов с различными ос — непростоя штука. Но если кто-то решение все же найдет: мне по-прежнему интересно, пишите.

@Evgen1337 · 01.11.2018, 14:14

есть такой shim называется он adapter.js
https://github.com/webrtchacks/adapter
https://github.com/Temasys/AdapterJS

https://github.com/webrtc - еще тут можно посмотреть

Новые блоги и статьи Все статьи Все блоги /
Автоматическое создание документа при проведении другого документа Maks 29.03.2026 Реализация из решения ниже выполнена на нетиповых документах, разработанных в конфигурации КА2. Есть нетиповой документ "ЗаявкаНаРемонтСпецтехники" и нетиповой документ "ПланированиеСпецтехники". В. . .	Настройка движения справочника по регистру сведений Maks 29.03.2026 Решение ниже реализовано на примере нетипового справочника "ТарифыМобильнойСвязи" разработанного в конфигурации КА2, с целью учета корпоративной мобильной связи в коммерческом предприятии. . . .	Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .	Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .
Автозаполнение реквизитов при создании документа Maks 26.03.2026 Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .	Команды формы и диалоговое окно Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .	Кому нужен AOT? DevAlt 26.03.2026 Решил сделать простой ланчер Написал заготовку: dotnet new console --aot -o UrlHandler var items = args. Split(":"); var tag = items; var id = items; var executable = args;. . .	Отправка уведомления на почту при создании или изменении элементов справочника Maks 24.03.2026 Программная отправка письма электронной почты на примере типового справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной записи электронной. . .

@William Blake 10 / 10 / 2 Регистрация: 09.08.2010 Сообщений: 321

	WebRTC показывает черный фон вместо видео (камера на смартфоне) 27.05.2018, 22:16. Показов 4388. Ответов 3 Метки нет (Все метки) Нужно использовать функцию getUserMedia() для простого picture capture. При запуске сайта в браузере на компьютере веб камера распознается, скрипты работают правильно, при нажатии на соответствующую кнопку происходит захват (фото) того, что видит веб камера. При запуске сайта в браузере (firefox, chrome, operamini и в любых других, как я подозреваю) происходит запрос на использование камеры, я разрешаю использование камеры, но вместо того, чтобы показывать видео с камеры, в элементе <video autoplay id="video"></video> показывается черный фон и ничего больше. Перерыл кучу статей, никакого решения так и не нашел. Не работает эта функция и на других устройствах. Я использовал точно такой пример как здесь: https://webrtc.github.io/sampl... ia/canvas/ Можно также как здесь: https://davidwalsh.name/demo/camera.php Оба варианта чудесно работают на компьютерах, но не работают в браузерах на телефонах, все равно, каких моделей и все равно, какие браузеры. Как заставить getUserMedia() работать и на телефонах? Добавлено через 35 минут Еще один хороший туториал: https://www.html5rocks.com/en/... dia/intro/ Но опять же, работает только на лэптопе/обычном пк, на смартфоне черный фон вместо видео везде. Добавлено через 46 минут Я вообще готов рассмотреть любые наиболее рабочие варианты, необязательно WebRTC. У некоторых устройств работают какие-то одни варианты записи/фотографирования с камеры, у некоторых - другие. Но на моем основном смартфоне не работал пока ни один. Есть ли, может, наиболее универсальная стабильная библиотека какая-то, которая работает, например, в 70% случаев? 0

@William Blake 10 / 10 / 2 Регистрация: 09.08.2010 Сообщений: 321
	01.11.2018, 00:40 [ТС]
	Я, к сожалению, не могу уже проверить - то место, где я свое приложение развертывал, я закрыл и пока не могу открыть. Развертывать иными способами мне будет несколько накладно. Но насколько я помню, я пробовал и метод, предложенный выше. В том, что доступ был по https - нет сомнения. Развертывал приложение я на Microsoft Azure Platform или как она там правильно называется. Там можно эксплицитным образом задать, что доступ осуществляется только по https, что я и сделал. Думаю, проблема с getUserMedia в принципе достаточно глобальна. Не просто же так существует очень мало приложений в сети, который 1) работают с камерой смартфона 2) работают во всех браузерах на смартфонах. Обычно для таких вещей пишут все же статичное приложение. Если кого интересуюет, как я эту проблему решил - никак. Это было что-то вроде "вступительного" задания при поиске работы. Я сделал кроссбраузерность на столько хорошо, на сколько смог, отдал работодателю и позже при беседе рассказал о этих проблемах с getUserMedia. Его все устроило, он лишь добавил, что кроссбраузерность + видео/аудио + различные модели смартфонов с различными ос — непростоя штука. Но если кто-то решение все же найдет: мне по-прежнему интересно, пишите. 0

@Evgen1337 249 / 162 / 68 Регистрация: 10.12.2017 Сообщений: 558
	01.11.2018, 14:14
	есть такой shim называется он adapter.js https://github.com/webrtchacks/adapter https://github.com/Temasys/AdapterJS https://github.com/webrtc - еще тут можно посмотреть 0