68 заметок с тегом

opera

Позднее Ctrl + ↑

Поддержка MJPEG в «Опере»

Как я уже писал, «Опера» иначе показывает MJPEG, не как остальные браузеры. Если открыть какую-нибудь веб-камеру, использующую этот формат, в десятой версии, то «Опера» сначала задумается, потом покажет какой-то кадр, 11 и 12 версии показывают ещё хуже — подобие потоковой передачи уже есть, но кадры лепятся один на другой и ничего разглядеть невозможно.

А мне хочется смотреть в веб-камеру на микрорайон, где у нас с женой квартира в Москве, через любимый браузер.

Вдохновившись библиотекой добавляющей нативную поддержку APNG в браузер, я подумал, что я ничем не хуже и смогу добавить поддержку MJPEG в «Оперу». Получился небольшой userjs, который я, естественно, выложил на «Гитхаб».

Идея такая — находим картинку во всех тегах IMG, у которой расширение «mjpg». Через XHR получаем с сервера видеопоток, копим кадр, подменяем найденную картинку и так далее.

Работает начиная с 12 версии браузера, которая ещё не вышла (кстати, в позавчерашней сборке сломали userjs напрочь) — в предыдущих версиях XHR слабоват по возможностям для этого.

Больше всего я бился с декодированием бинарных данных. Последняя версия «Оперы» поддерживает тип ответа arraybuffer (а вот blob не поддерживается), но если его выбрать, то данные в цикле почему-то перестают накапливаться, вероятно какой-то баг браузера. Я долго мучался, прежде чем придумал следующий хак — если сделать overrideMimeType(’image/jpeg’), то данные приходят в двухбайтовой кодировке UCS-2, которую несложно декодировать.

Кстати, быстрее всего у меня получилось декодировать не циклом, а регулярными выражениями, дальше тормозит уже не мой код, а способ получения отдельного кадра — каждый раз я соединяюсь с сервером заново. Можно бы накапливать кадры пачкой и потом их сбрасывать, но у меня нет задачи смотреть трансляции футбола, у меня дом, который не бегает и полученной скорости мне вполне хватает (где-то 2-3 кадра в секунду).

В общем, получился довольно небольшой код — 94 строки.

// ==UserScript==
// @name        MJPEG+Opera - Add to Opera MJPEG support
// @author      Evgeny Stepanischev aka Bolk
// @version     1.00
// @namespace   /files/opera-mjpeg.js
// @modified    2011-10-09
// @include     *
// ==/UserScript==

opera.addEventListener('BeforeEvent.DOMContentLoaded', function() {
    if (opera.version() < 12) return;

    var BolkMJpeg = function (url, img) {
        var req = new XMLHttpRequest(); 
        img.src = 'about:blank'; // Сброс картинки, чтобы прекратить передачу

        // Асинхронно забираем кадр при помощи XHR, нам придёт видеопоток
        var start = function (url) {
            req.open("GET", url, true);
             // Свежепридуманный хитрый хак, позволяет получить данные в UCS-2
            req.overrideMimeType('image/jpeg');
            req.send(null);
        }

        // Хитрыми путями восстанавливаем порядок байт в reponse, там сейчас UCS-2,
        // получаем просто последовательность байт
        var reqbytes = function (n, l) {
            return escape(req.response.substr(n, l)).
                replace(/([^%]|%[^u].|%u....)/g, '<$1>').
                replace(/<%u(..)(..)>/g, '%$2%$1').
                replace(/<%(..)>/g, '%$1%00').
                replace(/<(.)>/g, '$1%00');
        }

        // заменяем картинку на бинарные данные
        var draw = function (bin) {
            img.src = 'data:image/jpeg,' + bin;
        }

        // На изменение состояние входных данных собираем по частям JPEG
        req.onreadystatechange = function () {
            // состояние «3» — данные пошли, но ещё не кончились
            if (req.readyState === 3) {
                var hnd = setInterval(function () {
                    // по заголовку получаем размер данных
                    var header = unescape(reqbytes(0, 300)).toLowerCase();

                    var idx = header.indexOf('content-length:');

                    if (idx > -1) {
                        // 15 — длина заголовка
                        var len = parseInt(header.substr(idx + 15), 10);
                        var headend = header.indexOf("\r\n\r\n");

                        // дожидаемся конца заголовка
                        if (headend > -1) {
                            var resp = reqbytes(0, len);
                            // умножаем всё на три, так как reqbytes даёт esc-последовательность
                            // вида %XX%XX…
                            len *= 3;
                            headend = (headend + 4) * 3;

                            // если собрали весь JPEG, обрываем соединение
                            // и начинаем новый цикл. Мы могли бы собирать кадры и дальше, но
                            // это съест всю память со временем
                            if (resp.length >= len + headend) {
                                req.abort();
                                resp = resp.substr(headend, len);

                                draw(resp);
                                clearInterval(hnd);

                                start(url);
                            }
                        }
                    }
                }, 100);
            }
        }

        start(url);
    };

    // ищем картинку, у которой расширение mjpg
    var imgs = document.getElementsByTagName('IMG');
    for (var i = 0, len = imgs.length; i<len; i++) {
        if (/\.mjpg$/.test(imgs[i].src)) {
            BolkMJpeg(imgs[i].src, imgs[i]);
            break;
        }
    }
}, true);

Если вы не в курсе как устанавливаются скрипты userjs, то это очень просто. В интернете есть много инструкций на эту тему. Только напоминаю, что «Опера» нужна двенадцатая, причём в сборке за седьмое октября userjs сломаны.

У клиента дохлый канал?

В 1997 году, когда я впервые увидел веб через графический браузер (до этого у меня был опыт выхода в интернет через терминал на базе i80286 через текстовый браузер Lynx), у меня была выделенка, дело было в Казанском Государственном Университете и ещё очень долго я не знал что такое диалап и оплата за трафик.

Сейчас выделенки у большинства, но нередко встречается и такое, что клиент приходит на сайт через «дохлый канал» или с оплатой по трафику (например, через сотовый телефон).

Хорошо было бы об этом как-то узнать и не грузить клиенту лишние подробности в этом случае. Браузеры такое API не предоставляют (ещё бы, они и сами ничего не знают про канал), такую обобщённую информацию получить неоткуда. Но можно попытаться об этом догадаться. Эта запись — сборник моих сырых мыслей на эту тему.

Я вижу несколько путей.

  • можно замерить время за которое страницу удалось отдать клиенту целиком. У меня пока нет оформившихся мыслей о том как это делать и есть недостаток — когда мы узнали о том, что у клиента плохой канал, содержимое уже выдали, ничего поменять нельзя. Можно выдавать chunked-контент, как предлагал Сергей Чикуёнок, но первый кусок должен быть значительным
  • после загрузки страницы «пропинговать» хост. То есть обратиться через XHR на свой же сайт и замерить время ответа. Опять же, что делать с этими данными? Есть возможность в следующий раз показать более бедное содержимое, но следующий запрос может идти через другой канал. Возможное решение — сохранять IP-адрес запроса
  • смотреть с какого браузера клиент приходит, если это «Опера Мини», вероятнее всего, канал плохой или с оплатой
  • опять же «Опера», если включена функция «Опера Турбо» (определяется по IP-адресу клиента), клиент экономит трафик, значит канал с оплатой
  • проверить грузятся ли картинки, способов много, но данные получаем постфактум, после загрузки страницы. Логика та же — выключил картинки, экономит. Загрузку Flash контролировать смысла не имеет — многие выключают, чтобы не видеть рекламы
  • проверять не пришёл ли человек через канал сотового оператора (по IP-адресу). Безлимиток, которые бы не деградировали по скорости после какого-то лимита пока исчезающе мало, так что имеет смысл отдавать в этом случае «обеднённый» контент. Мобильные браузеры определять смысла не имеет — клиент может прийти через WiFi
  • в комментариях подсказали, что в «Андроидах» 2.2 и выше есть специальное
    API, чтобы определять способ подключения
  • ещё вариант из комментариев — определять модель телефона/планшета и по базе смотреть есть ли у него GSM/3G или WiFi
    Кто-нибудь ещё какие-то пути видит?

Плагины по запросу в «Опере»

Плагины по запросу (27.46КиБ)

Хочу похвалить «Оперу» за галочку в настройках, которая недавно появилась. С ней стало удобнее. Теперь можно выключить плагины (Flash, Java, Silverlight и остальное, в куче) для всех сайтов разом, а потом включить их для определённых сайтов (YouTube, RuTube, video.yandex.ru и так далее) в отдельных «Настройках для сайта» (открывается по клику правой на странице).

На местах, где должны показываться плагины, если установлена галочка «включать плагины только по запросу», показывается большая серая треугольная кнопка проигрывания, которая запускает Flash-ролик (или другое подобное содержимое), если на неё нажать.

Очень удобно. Спасибо, ребята!

 16 комментариев    6   2011   opera

33000 и анимированный GIF

По всей видимости, «Опера» немного неправильно обрабатывает анимированные «гифы».

Анимированный GIF устроен очень просто — поверх первого кадра через заданное время лепится следующий. Задержка задаётся в сотых долях секунды и, согласно спецификации, поля для её хранения имеет размер беззнаковое слово (2 байт), то есть максимальное значение — 655,35 секунд или почти 11 минут.

Распространённая ошибка в Си и похожих языках — использовать вместо беззнакового число со знаком. Тогда максимальное значение по модулю сокращается в два раза.

Вот я и проверил — не содержат ли кодеки популярных браузеров эту ошибку. На картике — число «1», если оно через пять-шесть минут сменится на «2», значит ошибки нет. Я выставил задержку между кадрами в 33000 (330 секунд или 5,5 минут). Кодек с ошибкой будет трактовать это число как -233 (отрицательное), поэтому кадр не сменится.

У меня на ноуте на FF 5, Safari 5.0.5, Chrome 12.0.742.122 цифра меняется, а на «Опере» 11.50 — нет. Сейчас попробую найти ноут с Windows 7 и попробую там. Попробуйте тоже на своих браузерах.

Добавлено: меняются ещё цифры на Андроиде 2.3.4, на FF 4.0.1 (Windows), а так же под Internet Explorer 9.0 и 10PP2 (Windows 7).

Добавлено ещё позднее: всё в порядке у «Оперы», разъяснил один из читателей — «Опера» начинает анимацию заново, если GIF не было видно. Дожидаясь, я переключал табы, поэтому анимация стартовала всегда сначала и «2» не появлялась. Так что ложная тревога, но любопытный факт.

Размер табуляции в CSS

В CSS3 есть хорошее свойство tab-size, оно контролирует размер, в пробелах, отображаемой табуляции. Оно пока в стадии черновика; например, неизвестно будет ли введена новая единица измерения (скажем «sp») и можно ли будет указать размер в процентах, пикселях и т. п.

Тем временем, свойство уже реализовано в некоторых браузерах, с собственным префиксом. Свойство первым поддержала «Опера» (с версии 10.60, именно от этой компании и было выдвинуто предложение добавить это свойство в CSS3), затем оно было реализовано в четвёртой версии FireFox. Остальные браузеры пока не подтянулись.

Вот как выглядит CSS-код:

body {
    -o-tab-size: 4; /* размер табуляции — 4 (для Оперы 10.60+) */
    -moz-tab-size: 4; /* размер табуляции — 4 (для FireFox 4+) */
    -webkit-tab-size: 4; /* для будущих версий Safari и Chrome */
     tab-size: 4; /* размер табуляции — 4, на будущее */
}

Значение по-умолчанию для этого свойства — 8 (пробелов), так же можно указать специальное значение «inherit», в этом случае значение будет унаследовано от родительского элемента.

Добавлено позднее: для WebKit уже есть патч для поддержки свойства «-webkit-tab-size».

Изменения в speeddial новой альфы «Оперы»

Ребята из «Оперы» экспериментируют с возможностями SpeedDial в своём браузере. Помните, я писал о специальных версиях некоторых сервисов «Яндекса» для SpeedDial?

К сожалению, «Опера» их разломала в свежей альфе, зато добавила новую возможность, которой очень нехватало: специальным заголовком или мета-тегом можно указать время обновления страницы в speeddial.

Preview-refresh: 10

или

<meta http-equiv="preview-refresh" content="10" />

Время указывается в секундах. Кстати, теперь можно надёжно узнать через media queries, что «Опера» показывает страницу в SpeedDial: достаточно проверить, что «view-mode» в значении «minimized»; помимо этого есть возможность указать произвольное изображения для миниатюры (об этом лучше почитать подробнее в блоге «Оперы»).

«Опера» 9.50 и выше показывает не все JPEG

«Опера», не покажи этот JPEG! (11.92КиБ)

Случайно выяснилось, что «Опера» с какой-то версии не умеет показывать некоторые JPEG (и считает, что в них 0 бит на пиксель). Попытаюсь выяснить с какой версии это началось.

Добавлено: «Опера» 9.00, 9.27, 9.63, 10.00, 11.00, 11.01а и Opera Mini 5.1 не показывает. «Опера» 8.54 — показывает. Значит сломали в девятой версии.

Расширение для «Оперы»: сайт только у меня не видно?

Артемий Трегубенко написал расширение для «Оперы» «У всех работает».

У всех работает? (44.87КиБ)

Смысл в том, что если ваша «Опера» показывает экран с ошибкой «Невозможно найти удалённый сервер», это расширение при помощи сервиса «Down for everyone or just me» проверяет доступность того же сайта для других пользователей.

Полезно, можно узнать проблема с сайтом или у вашего провайдера.

А картинка, которая в этом посте, только в моей «Опере» не показывается или в вашей тоже?

Добавлено: картинка не открывается под любой платформой в последней «Опере», сейчас потестирую в других.

Чуть позже: «Опера» 8.54 показывает, 9.63 — уже нет. Я заменил картинку на такую, которую «Опера» понимает.

Невидимая страница

Как-то, много лет назад, партнёр по бизнесу показал исходник первой страницы сайта студии Лебедева. Он был очень озадачен остроумной шуткой — исходник представлял из себя одну строку HTML-комментария и, на первый взгляд, больше ничего. Я быстро догадался, что надо было всего лишь прокрутить текст вниз — за переводами строки прятался остальной код.

Если бы мне сегодня показали исходник страницы (будет видно только в «Опере» и «FireFox»), который я встретил сейчас на «Хабре», я был бы озадачен куда больше.

Кода у этой страницы просто нет. Ларчик открывается (в «Опере» и FF) просто: есть такой RFC 5988, озаглавленный «Web Linking», где описан способ подключать в документ различные ресурсы прямо через HTTP-заголовок.

Идея проста: подключаем через заголовок CSS для пустой страницы и внутри CSS уже формируем то, что нужно (текст можно писать через свойство «content»). HTTP-заголовок может выглядеть, например, так:

Link: </pathto/magic.css>;rel=stylesheet

Вышла альфа «Оперы» 11 с расширениями

Это очень хорошая новость — вышла 11-я «Опера» с поддержкой расширений. Например, уже появилось расширение «Opera to Phone», к которому я привык на «Хроме».

Оно позволяет одним нажатием кнопки открыть в телефоне (на «Андроиде») ту же страницу, что сейчас открыта в браузере на компьютере, чтобы, например, продолжить её чтение уже с мобильника.

Из других хороших новостей — появилась поддержка WebSockets.

Добавлено: а ещё можно добавить сервисы «Яндекса» — пробки, погоду и отзывы о текущей странице.

Ранее Ctrl + ↓