Знаете, что сложнее, чем создать альтернативную реальность с помощью Javascript? Рисование ‹div›.
Если вы не знаете, что такое DOM-to-Canvas, я бы порекомендовал просмотреть классику Роберта О'Каллахана и, возможно, ту, в которой он говорит о безопасности схемы. .
Но вот мой TL; DR:
Браузеры - средство, предназначенное для рисования веб-страниц, - не позволяют разработчикам рисовать веб-страницы. По причинам.
Вы будете правы, если заподозрите, что это одна из наиболее востребованных функций браузера. Особенно в мире, где предсказания Роба о 3D-объектах, нарисованных с помощью HTML, сбываются с WebXR в целом.
Тем не менее, прошло 7 лет, и в том, что основные поставщики сделали с DOM на холсте, мало что изменилось. По причинам, этого до сих пор не происходит.
Конечно, причиной отказа браузеров от реализации такой функции является безопасность. Браузер использует состояние, такое как файлы cookie, при рендеринге веб-страницы, которая отображается, когда вы ее рисуете.
То же самое с политиками разных источников, проблемами iframe и CORS. Вы можете узнать это как еще один список запрещенных веб-разработчиков.
Сказать, что мы не можем перейти от DOM к холсту из-за файлов cookie, - все равно что сказать, что мы не можем сесть на машину из-за слона.
Я просто хочу браузер в моем браузере
Толчком к этой публикации послужило то, что я хотел запустить Браузер в приложении A-Frame Шейна Харриса в WebXR.
И все, что я мог думать, было:
- Круто, я помню, как делал это раньше!
- Я хочу этим воспользоваться!
- Интересно, какой взлом и какое предостережение требуется для работы…
Вот почему я решил написать этот пост, чтобы обобщить методы, которые я использовал и видел.
27 способов как бы сортировать DOM-to-canvas
Поскольку браузеры не реализовали эту столь востребованную функцию, разработчики с разной степенью успеха взяли ее в свои руки. Вот несколько хитростей, которые вы увидите в дикой природе:
Mozilla ‹svg›
Этот метод включает упаковку вашей модели DOM в XMLSerializer, чтобы получить представление XML, которое можно обернуть в ‹foreignObject›, который вы поместите в SVG. , который вы загружаете в HTMLImageElement, ждете его загрузки и, наконец, рисуете в ‹canvas›.
Кроме того, если вы используете изображения или определенные стили, вам придется скомпилировать их в URL-адреса данных и, возможно, вставить задержку, чтобы убедиться, что они загружены, прежде чем вы попытаетесь нарисовать свой SVG.
Это API, рекомендованный ведущим сторонником Интернета.
Вкладка захвата
Https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/captureTab
Авторы расширений бы отказались, если бы не смогли захватить содержимое браузера, поэтому поставщики браузеров согласились с этим.
Вы можете сделать снимок экрана вкладки, если вы являетесь расширением. Предположительно, как расширение, вы заслуживаете большего доверия, чем сайт, поэтому они наделены этой привилегией.
Идея состоит в том, что вы вызываете внутренний API браузера и получаете обратно URL-адрес данных для png или jpeg, который затем тратите время на декодирование и рисование на холсте. Вы также получите двузначный FPS!
Загвоздка в том, что вам нужно быть расширением или написать его.
Неудивительно, что я видел сайты в дикой природе, которые требовали от вас установки расширения, чтобы разблокировать эту функцию на сайте с помощью взлома.
Толстый товарищ
Это метод, используемый shaneharris / aframe-in-app-browser.
Идея состоит в том, что вы где-нибудь запустите дополнительный браузер. И этот браузер рисует за вас и отправляет вам результаты.
Обычно этот браузер будет работать на каком-то сервере, поэтому его полезность ограничивается случаями, когда вы запускаете локальное приложение или не возражаете против счетов за сервер / пропускную способность для вашего приложения.
Опять же, это было использовано в производстве.
Webkit.js
Http://trevorlinton.github.io/
Этот гениальный. Особенно для своего времени в мире, предшествующем WebAssembly.
Идея состоит в том, что вы буквально берете WebKit (движок рендеринга для Safari и ранее Chrome) и компилируете его в Javascript с помощью emscripten. А затем вы запускаете его в браузере, чтобы, наконец, можно было свободно рисовать.
Самое шокирующее, что это работает, если вы не против 0,1 FPS.
Капсула времени
Как мы здесь оказались?
Как мы дошли до того, что вместо того, чтобы решить проблему, которую хотят решить многие разработчики, поставщики браузеров, конечные разработчики изобретают новые режимы начальных вычислений для компенсации?
В жемчужине Пола Айриша 2011 года мы получаем временную капсулу того, о чем веб-разработчики думали во времена, предшествующие ES5.
Вот некоторые из лучших.
Появляется наш друг DOM to canvas. Как и переосмысление DOM, производительности и прямое отбрасывание браузера.
Шаг назад
Я могу с пониманием относиться к безопасности браузера и не рекомендую нарушать ее. По большому счету, производители браузеров достигли невозможного с помощью работающей платформы для выполнения произвольного кода (tm).
Но браузер также вырыл себе огромную дыру: он должен поддерживать столько API-интерфейсов, парадигм и взаимодействий, что иногда вещи просто принципиально не взаимосвязаны. Вот почему мы не можем быстро преобразовать DOM в холст. Потому что причины.
И как разработчик WebXR я попал посередине. Мне просто нужен движок браузера, который предоставляет мне API и не мешает. Может, я бегу в контейнере. Может быть, я отправляю в магазин приложений. Может быть, все модели DOM, которые я рисую, являются локальными файлами. Но браузер этого не знает.
Вот почему у нас открытый исходный код.
Я хотел аварийный люк, поэтому сделал его
Я добавил Electron API, который эффективно передает различия в пиксельном буфере со скоростью 200 кадров в секунду. (ПР №326)
Я был занят исправлением ошибок днем, поэтому сделал это за ночь. Но, как говорится, на мгновенный успех нужно 7 лет.
Особенно, если вы браузер.
Посетите Exokit: https://exokit.org
Подпишитесь на нашу рассылку для получения обновлений: http://eepurl.com/dFiLMz
Домашняя страница: https://exokit.org
GitHub: https://github.com/exokitXR/exokit
Twitter: https://twitter.com/exokitXR спер
Instagram: «https://instagram.com/exokitXR
Discord: https://discord.gg/cf5tfTV
Slack: https://exokit.slack.com/join/ shared_invite / enQtNDI3NjcxNzYwMDIxLWU2NmFmOTEzMzk4NWNiYjRhMjVkYzcyNjg5YjUyMzZkYWM1ZGI4M2IwYWZiMjNlMTJjMexwm2U.ua
