Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Сделал видео API Flash+WebRTC покритикуйте пожалуйста

Основные возможности: захват камеры, live трансляция, сохранение видео в файл...
Сайт:
Примеры:
Ответ:
В хроме webrtc звук работает, не работает отображение уровня звука.
флеш лет 10 умирает ни как не умрет :), в ближ. годы будет еще актуален для работы с камерой,
а так да хотелось бы иметь один нормально работающий API камеры во всех браузерах.
спасибо, буду дорабатывать
Вопрос: WebRTC учебник

Доброе время суток Уважаемые друзья! Кто нибудь сможет дать мне полный мануал по webrtc, где все разложено по полочкам или же объяснить мне по полочкам как все там работает ? Заранее говорю, что в гугле я не смог найти того что ищу ((( Всем спасибо за помощь
Ответ: - здесь норм, но эта технология постоянно меняется, adapter.js - всегда разный нужно писать/качать. В последних версиях браузеров (firefox, chrome) возможно использование только по https.
Вопрос: WebRTC отправка методом POST

Добрый вечер.

Есть домашний Web сервер с парой информационных страниц (Температура в квартире, Температура за окном, Положение жалюзи, Положения выключателей света и т.д.)

Хочу реализовать на сайте голосовое управление некоторыми сценариями, для этих целей выбрал сервис от Yandex "SpeechKit Cloud" - цель которого - аудио диктовку конвертировать в текстовый формат.

С SpeechKit Cloud API - все просто (Скормил wav файл - получил текст)
Ловить голос с микрофона предполагаю при помощи WebRTC и Google Chrome.
Запин (извиняюсь за жаргон) случился на этапе формирования Wav и JS в целом.

Задача - в случае превышения порога громкости микрофона начинать запись, при наступлении тишины более чем на 1 сек - отправлять записанное аудио php скрипту (В любом виде. Дальнейшие пляски с аудио и SpeechKit будут происходить через PHP сценарии).

Я 100%(-ный) PHP(-шник) и JS боюсь очень сильно.

На данный момент имею следующее:
<video></video>
<script>
var getUserMedia;
var browserUserMedia =	navigator.getUserMedia;

getUserMedia = browserUserMedia.bind( navigator );

getUserMedia(

	{
		audio: true,
		video: true //{ width: 800, height: 600 }
	},
	
	function(stream){
		var video = document.querySelector('video');
		video.src = URL.createObjectURL(stream);
		video.onloadedmetadata = function(e){
			video.play();
		};
		console.log(stream);
	},
	
	function(err){
		console.log("Произошла следующая ошибка: " + err.name);
	}
);
</script>



Если найдется человек - готовый помочь, буду очень признателен.
Ответ:
Сообщение от nerv_
Могу сказать, что вы движетесь в правильном направлении

Тем не менее, есть способ проще -- использовать голосовое распознование в браузере

Спасибо большое, то что нужно. Этот вариант в разы лучше.
Вопрос: WebRTC показывает черный фон вместо видео (камера на смартфоне)

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

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

Я использовал точно такой пример как здесь:
Можно также как здесь:

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

Добавлено через 35 минут
Еще один хороший туториал:

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

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



- еще тут можно посмотреть
Вопрос: Видеоконференция - Peer-to-peer (PeerJS, WebRTC)

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

Задача:
-Хочу (и надо) сделать видеочат на сайте. На HTML5 (никак не флэш). Количество человек в чате 2+ (от 2 до 10, если просто аудио без видео, то до 20).

Вопросы:
-Насколько сложно, да и вообще возможно ли такое реализовать?
-На чем и с помощью чего это делать? На php, js с webrtc или же надо будет что-то потяжелее типа asp.net с xSockets или еще чего?
-Как сильно это все будет "лагать"? И возможно ли это все сделать за домашним компьютером и сайте с хостингом, или же для таких задач нужны выделенные сервера, оборудование и т.д.?

Мои знания и умения:
-Не так уж много и знаю. Конечно html,css, совсем немного js, jquery, php, mysql и ajax. Для наглядности - с нулевым знанием последних трех (даже четырех), за 3 суток с нуля написал чат (на аяксе конечно))). Желание огромное, времени вагон, поэтому что-то выучить не проблема абсолютно (при условии что будут уроки "по полочкам")

Собственно говоря вот такие дела. Создал тему, чтобы узнать стоит ли браться за это или это в априори невозможно без чего-либо. Просто сейчас я бегу за двумя-тремя зайцами. Не знаю с чего начать, на чем делать, что учить (asp.net, node js/peerjs, webrtc и т.д.). В итоге не получается ничего.
Поэтому, пожалуйста, напишите в каком направлении мне копать, что учить, какие книги читать и т.д.
Заранее благодарен (хотя бы за то, что до сюда дочитали)))

Добавлено через 16 часов 43 минуты
Ни у кого даже предположений нет?(
Ответ: IgorSPb, вот уже конкретней) Спасибо за ответ и сайт, учту на будущее)
Вопрос: WebRTC видеосвязь

Не получается создать видеосвязь, ссылку получает, но не отображает:

HTML5
1
2
<video id="localVideo" width="360" height="240" autoplay="true"></video>
<video id="remoteVideo" width="360" height="240" autoplay="true"></video>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
var peerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection || window.msRTCPeerConnection;
var sessionDescription = window.RTCSessionDescription || window.mozRTCSessionDescription || window.webkitRTCSessionDescription || window.msRTCSessionDescription;
navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia || navigator.msGetUserMedia;
 
var onePeer = new peerConnection();
var twoPeer = new peerConnection();
 
onePeer.onaddstream = function(obj) {
    document.getElementById("localVideo").src = window.URL.createObjectURL(obj.stream);
}
 
function error(err) {
    //Error
}
 
function initialize() {
    navigator.getUserMedia(
        {video:true}, 
        function(stream){
            onePeer.onaddstream({stream: stream});
            onePeer.addStream(stream);
 
            onePeer.createOffer(function(offer) {
                    onePeer.setLocalDescription(new sessionDescription(offer), function() {
                                        // Пытаюсь принять:
                    remote(offer);
                    }, error);
            }, error);
        }, 
        function(error){console.log("Failed to get access to local media. Error code was " + error.code);}
    );
}
 
//Получает ссылку - но не отображает, почему?
twoPeer.onaddstream = function(obj) {document.getElementById("remoteVideo").src = window.URL.createObjectURL(obj.stream);};
 
function remote(obj) {
    twoPeer.setRemoteDescription(new sessionDescription(obj), function() {
            twoPeer.createAnswer(function(answer) {
                twoPeer.setLocalDescription(new sessionDescription(answer), function() {
                    // ANSWER
                }, error);
            }, error);
    }, error);
}
 
setTimeout(initialize, 1);
Консоль выдает ошибку: "ICE failed, see about:webrtc for more details".
Ответ: Jason, а да, забыл. В мозиле и в эдже) Ну так и так если делать то https)
Вопрос: Многопользовательский WebRTC

Доброго времени суток. Изучал webrtc с помощью этого сайта , но запнулся на 6 пункте. В 6 пункте реализовано подключение one-to-one, а реализовать добавление трех и более пользователей предлагается изучающему. Уже несколько дней пытаюсь и не могу понять, как это сделать. Буду благодарен за помощь.
Ответ: С заполнением комнаты нет проблем, я исправил, то на что вы указываете. В клиентской части взгляните пожалуйста на

var pc;

Эта переменная содержит объект, который содержит localDescription и RemoteDescription. Так 2 юзера знают друг об друге. Но при подключении третьего юзера RemoteDescription перезаписывается и первые два пользователя теряют связь друг с другом, да еще и с 3 юзером связь не устанавливается. Думаю, вся проблема крутится вокруг этого, только не знаю решения.

Немного подправленный мною код на гитхабе . В консоли можно просмотреть переменную "pc" и при подключении 3 пользователя заметить, что remoteDescription изменяется.
Вопрос: Отобразить видео поток с веб камеры на странице html5

Всем добрый вечер.
В html5 не силен, поэтому просьба сильно не пинать.
Есть камера внутри домашней сети, в браузере набираю и смотрю видео.
Кроме камеры в сети есть https веб-сервер, на нем страница html5, пытался сделать как-то так:
<iframe src="http://192.168.1.2:80" width="91%" height="323" frameborder="1"> </iframe>

но не сработало. Как можно такое видео вывести на html страницу, поделитесь ссылкой или советом.
Спасибо.
Ответ:
<iframe src="http://192.168.1.3:80" width="91%" height="323" frameborder="1"> </iframe>

Так работает камера подключенная по интерфейсу CSI к Raspberry pi с пакетом
<img src="http://192.168.1.2:80/" alt="http://192.168.1.2:80/" class="shrinkToFit" width="380" height="285">

Так работает камера подключенная по интерфейсу CSI к Orange pi с пакетом
HTML5 страница может отображаться только в телеграм боте, либо внутри сети в браузере. Хочу сделать отображение страницы ботом не только внутри сети без проброса портов, если это возможно.
Вопрос: Масштабирование изображения с ip камеры

Суть проблемы необходимо организовать масштабирование видео с ip камеры,
проблема в том, что код начинает работать только после открытия прямой ссылки на камеру в строке браузера
().
Камера Dlink DCS-933L. О великие эксперты помогите.

<html>
<head>
<title>
</title>
<script>
function sizePic() {
size = document.getElementById("size").value;
img = document.getElementById("pic");
img.width = 60 + 20*size;}
</script>
<style>
img.zoom {
-moz-user-select: none; user-select: none;}
img.zoom:hover {
display: block;
position: fixed;
z-index: 10;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: auto;
height: 100%;
max-width: 99%;
max-height: 99%;
border: solid rgba(210,210,210,.4);
border-width: 100vh 100vw;
cursor: zoom-out;}
:not(:active) > img.zoom:not(:hover), img.zoom:active {
pointer-events: none;}
</style>
</head>
<body>
<p>Размер изображения <input type="range" min="1" max="100" id="size"
oninput="sizePic()" value="3"></p>
<img src="http://логин:пароль@айпишниккамер ы:80/video/mjpg.cgi" alt="" id="pic" class="zoom">
</html>
Ответ: Проблема решилась предварительной загрузкой в скрытом
iframe, но загрузка изображения теперь занимает много времени.
При клике по изображению оно масштабируется, а в фрейм загружается пустая страница.
Возможно ли загружать "http://admin:admin@айпишник/video.cgi"
в плохом качестве, или есть другое решение?


<html>
<head>
<title>
</title>
<script>
function sizePic() {
size = document.getElementById("size").value;
img = document.getElementById("pic");
img.width = 60 + 20*size;
}
</script>

<style>
img.zoom {
-moz-user-select: none; user-select: none;
}
img.zoom:hover {
display: block;
position: fixed;
z-index: 10;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: auto;
height: 100%;
max-width: 99%;
max-height: 99%;
border: solid rgba(210,210,210,.4);
border-width: 100vh 100vw;
cursor: zoom-out;
}
:not(:active) > img.zoom:not(:hover), img.zoom:active {
pointer-events: none;
}
</style>

<style>
.link {
width: 300px;
height: 200px;
background: white;
}
.link a {
display: block;
text-align: center;
height: 100%;
color: white;
}
</style>

</head>
<body>
<iframe src="http://admin:admin@айпишник/video.cgi" width="1" height="1" align="left" name="iframe_a" style="display:none"></iframe>



<p>Размер изображения <input type="range" min="1" max="100" id="size"
oninput="sizePic()" value="3"></p>

<div class="link">
<a href="" target="iframe_a""><img src="http://admin:admin@айпишник/video.cgi" alt="" id="pic" class="zoom"></a>
</div>

</html>
Вопрос: Подгрузка изображения от ip камеры

Добрый день. Вот тут возникла проблема.
есть Ip камера которая постоянно отправляем (заменяет) файл на фтп сервере. На сайте это изображение выводится, сделано автообновление изображения через setInterval и добавления +Math.random(0,100) в конец названия файла с изображением. но если файл еще не полностью загружен камерой и в этот момент происходит его вывод на сайте то выводиться только его фрагмент, пол изображения, четверть или вообще ничего.
Можно ли как нибудь сделать предзагрузку его перед выводом, пробовал var image = new Image(); но без изменений. все так же...
может есть у кого какие идеи?
Ответ: да идея с прозрачностью последнего пикселя мне понравилась =), и реально работает. Собственно решил вопрос так. В настройках камеры сделал так что бы она делал три снимка по очереди (раз в секунду) с разными названиями. Обновление снимков в браузере происходит по очереди. Как следствие трех секунд вполне хватает.
Java(TM) 2 Platform Standard Edition 5.0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<div style="width:640px; height:480px; background:#CCCCCC; position:relative; " id="imgdiv"></div>
<script>
var crug=0;
var con = "";
con+='<div id="sloy1" style="width:640px; height:480px; background: url([url]http://.../img/DCS-933L.jpg);[/url] position: absolute; visibility:hidden">';
con+='</div>';
con+='<div id="sloy2" style="width:640px; height:480px; background: #900; position: absolute; visibility:hidden; ">';
con+='</div>';
con+='<div id="sloy3" style="width:640px; height:480px; background: #0F0 ; position: absolute; visibility:hidden; ">';
con+='</div>';
document.getElementById('imgdiv').innerHTML = con;
 
var imga = '<img src="http://.....ru/mg/DCS-933L.jpg?img' +Math.random(0,10000)+ '" />';
$("#sloy1").css({visibility:"visible"});
 
setInterval(
    function(){
    
        reloaded();
    }
    ,1000);
    
function reloaded()
{   
    if(crug==0)
        {
            
            $("#sloy1").css("background", "url("+imga+")");
            $("#sloy1").css({visibility:"visible"});
            $("#sloy2").css({visibility:"hidden"});
            $("#sloy3").css({visibility:"hidden"});
            
            crug=1;
        }
    else if(crug==1)
        {
            
            $("#sloy2").css("background", "url("+imga+")");
            $("#sloy1").css("visibility", "hidden");
            $("#sloy2").css("visibility", "visible");
            $("#sloy3").css("visibility", "hidden");
            crug=2;
        }
    else if(crug==2)
        {
            
            $("#sloy3").css("background", "url("+imga+")");
            $("#sloy1").css("visibility", "hidden");
            $("#sloy2").css("visibility", "hidden");
            $("#sloy3").css("visibility", "visible");
            crug=0;
        }
imga = 'http://.....ru/img/DCS-933L'+(crug+1)+'.jpg?img' +Math.random(0,10000);
var image = new Image();
image.src = imga;   
}
</script>