{"id":83094,"date":"2022-07-28T10:01:42","date_gmt":"2022-07-28T08:01:42","guid":{"rendered":"https:\/\/rmarketingdigital.com\/dev\/realice-operaciones-eficientes-por-fotograma-de-video-en-video-con-requestvideoframecallback\/"},"modified":"2020-09-16T18:21:03","modified_gmt":"2020-09-16T21:21:03","slug":"realice-operaciones-eficientes-por-fotograma-de-video-en-video-con-requestvideoframecallback","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/de\/dev\/realice-operaciones-eficientes-por-fotograma-de-video-en-video-con-requestvideoframecallback\/","title":{"rendered":"F\u00fchren Sie mit requestVideoFrameCallback () effiziente Videooperationen pro Frame f\u00fcr Videos durch"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Inhalt<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Inhaltsverzeichnis umschalten\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Umschalten<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/realice-operaciones-eficientes-por-fotograma-de-video-en-video-con-requestvideoframecallback\/#Diferencia-con-requestAnimationFrame\" >Unterschied zu requestAnimationFrame ()<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/realice-operaciones-eficientes-por-fotograma-de-video-en-video-con-requestvideoframecallback\/#%C2%BFLo-que-hay-en-un-nombre\" >Was ist in einem Namen?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/realice-operaciones-eficientes-por-fotograma-de-video-en-video-con-requestvideoframecallback\/#Soporte-de-navegador-y-deteccion-de-funciones\" >Browserunterst\u00fctzung und Funktionserkennung<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/realice-operaciones-eficientes-por-fotograma-de-video-en-video-con-requestvideoframecallback\/#Usando-el-metodo-requestVideoFrameCallback\" >Verwenden der requestVideoFrameCallback () -Methode<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/realice-operaciones-eficientes-por-fotograma-de-video-en-video-con-requestvideoframecallback\/#Si-las-cosas-parecen-un-cuadro-de-distancia-%E2%80%A6\" >Wenn die Dinge wie eine Kiste entfernt scheinen ...<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/realice-operaciones-eficientes-por-fotograma-de-video-en-video-con-requestvideoframecallback\/#Manifestacion\" >Manifestation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/realice-operaciones-eficientes-por-fotograma-de-video-en-video-con-requestvideoframecallback\/#Conclusiones\" >Schlussfolgerungen<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/realice-operaciones-eficientes-por-fotograma-de-video-en-video-con-requestvideoframecallback\/#Agradecimientos\" >Vielen Dank<\/a><\/li><\/ul><\/nav><\/div>\n<p><\/p>\n<div>\n<header class=\"w-article-header\">\n<p class=\"w-article-header__subhead w-mb--non\">\n<p>          Erfahren Sie, wie Sie das verwenden <code>requestVideoFrameCallback ()<\/code> um effizienter mit Videos im Browser zu arbeiten.<\/p>\n<p>\n          <time>29. Juni 2020<\/time><br \/>\n            Aktualisiert <time>17. August 2020<\/time>\n        <\/p>\n<\/header>\n<p>In dem Block befindet sich eine neue Web-API, die im definiert ist<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/wicg.github.io\/video-rvfc\/\"><code>HTMLVideoElement.requestVideoFrameCallback ()<\/code><\/a><\/p>\n<p>Spezifikation. das <code>requestVideoFrameCallback ()<\/code> Mit dieser Methode k\u00f6nnen Webautoren einen R\u00fcckruf aufzeichnen, der die Rendering-Schritte durchl\u00e4uft, wenn ein neuer Videorahmen an den Komponisten gesendet wird. Dies soll Entwicklern erm\u00f6glichen, effiziente Vorg\u00e4nge pro Bild von Video zu Video auszuf\u00fchren, z. B. Videoverarbeitung und Malen auf einer Leinwand, Videoanalyse oder Synchronisierung mit externen Audioquellen.<\/p>\n<h2 id=\"difference-with-requestanimationframe()\"><span class=\"ez-toc-section\" id=\"Diferencia-con-requestAnimationFrame\"><\/span>Unterschied zu requestAnimationFrame () <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Vorg\u00e4nge wie das Zeichnen eines Videorahmens auf einer Leinwand mit<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/CanvasRenderingContext2D\/drawImage\"><code>drawImage ()<\/code><\/a><\/p>\n<p>\u00dcber diese API erstellte Daten werden nach bestem Wissen und Gewissen mit der Bildrate des auf dem Bildschirm abgespielten Videos synchronisiert. Anders als<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/window\/requestAnimationFrame\"><code>window.requestAnimationFrame ()<\/code><\/a>, die typischerweise etwa 60 Mal pro Sekunde feuert,<br \/>\n<code>requestVideoFrameCallback ()<\/code> ist an die tats\u00e4chliche Videobildrate gebunden, mit einem wichtigen<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/wicg.github.io\/video-rvfc\/#ref-for-update-the-rendering%E2%91%A2:~:text=Note%3A%20The%20effective%20rate%20at%20which,browser%20would%20fire%20callbacks%20at%2060hz.\">Ausnahme<\/a>:<\/p>\n<blockquote>\n<p>Die effektive Rate, mit der R\u00fcckrufe ausgef\u00fchrt werden, ist die niedrigere Rate der Videorate und der Browserrate. Dies bedeutet, dass ein 25-fps-Video, das in einem Browser abgespielt wird, der mit 60 Hz malt, R\u00fcckrufe mit 25 Hz ausl\u00f6st. Ein 120-fps-Video in demselben 60-Hz-Browser w\u00fcrde 60-Hz-R\u00fcckrufe ausl\u00f6sen.<\/p>\n<\/blockquote>\n<h2 id=\"what's-in-a-name\"><span class=\"ez-toc-section\" id=\"%C2%BFLo-que-hay-en-un-nombre\"><\/span>Was ist in einem Namen? <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Aufgrund seiner \u00c4hnlichkeit mit <code>window.requestAnimationFrame ()<\/code>war die Methode zun\u00e4chst <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/discourse.wicg.io\/t\/proposal-video-requestanimationframe\/3691\">vorgeschlagen als <code>video.requestAnimationFrame ()<\/code><\/a>, aber ich bin zufrieden mit dem neuen Namen,<br \/>\n<code>requestVideoFrameCallback ()<\/code>, die nach a vereinbart wurde <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/WICG\/video-rvfc\/issues\/44\">lange Diskussion<\/a>. Hurra, <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/css-tricks.com\/what-is-bikeshedding\/\">Fahrr\u00e4der<\/a> f\u00fcr den Sieg!<\/p>\n<h2 id=\"browser-support-and-feature-detection\"><span class=\"ez-toc-section\" id=\"Soporte-de-navegador-y-deteccion-de-funciones\"><\/span>Browserunterst\u00fctzung und Funktionserkennung <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Die Methode ist<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/chromestatus.com\/feature\/6335927192387584\">in Chrom implementiert<\/a><br \/>\nschon und<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/mozilla.github.io\/standards-positions\/#requestVideoFrameCallback\">Mozilla-Leute m\u00f6gen<\/a>. F\u00fcr das, was es wert ist, habe ich auch eine eingereicht<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/bugs.webkit.org\/show_bug.cgi?id=211945\">WebKit-Fehler<\/a> Danach fragen. Die API-Funktionserkennung funktioniert folgenderma\u00dfen:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">wenn<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token string\">'requestVideoFrameCallback'<\/span> <span class=\"token keyword\">im<\/span> <span class=\"token class-name\">HTMLVideoElement<\/span><span class=\"token punctuation\">.<\/span>prototype<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h2 id=\"using-the-requestvideoframecallback()-method\"><span class=\"ez-toc-section\" id=\"Usando-el-metodo-requestVideoFrameCallback\"><\/span>Verwenden der requestVideoFrameCallback () -Methode <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Wenn Sie jemals die verwendet haben <code>requestAnimationFrame ()<\/code> Methode, werden Sie sich mit der sofort zu Hause f\u00fchlen <code>requestVideoFrameCallback ()<\/code> Methode. Sie registrieren einen ersten R\u00fcckruf einmal und registrieren ihn dann jedes Mal neu, wenn der R\u00fcckruf ausgel\u00f6st wird.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const<\/span> <span class=\"token function-variable function\">doSomethingWithTheFrame<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">jetzt<span class=\"token punctuation\">,<\/span> Metadaten<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><br>console<span class=\"token punctuation\">.<\/span><span class=\"token function\">Log<\/span><span class=\"token punctuation\">(<\/span>jetzt<span class=\"token punctuation\">,<\/span> Metadaten<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br>Video<span class=\"token punctuation\">.<\/span><span class=\"token function\">requestVideoFrameCallback<\/span><span class=\"token punctuation\">(<\/span>doSomethingWithTheFrame<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><br>Video<span class=\"token punctuation\">.<\/span><span class=\"token function\">requestVideoFrameCallback<\/span><span class=\"token punctuation\">(<\/span>doSomethingWithTheFrame<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Im R\u00fcckruf <code>jetzt<\/code> ist ein <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/DOMHighResTimeStamp\"><code>DOMHighResTimeStamp<\/code><\/a><\/p>\n<p>y <code>Metadaten<\/code> ist ein <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/wicg.github.io\/video-rvfc\/#dictdef-videoframemetadata\"><code>VideoFrameMetadata<\/code><\/a><\/p>\n<p>W\u00f6rterbuch mit folgenden Eigenschaften:<\/p>\n<ul>\n<li><code>Pr\u00e4sentationszeit<\/code>vom Typ <code>DOMHighResTimeStamp<\/code>: Die Zeit, zu der der Benutzeragent den Frame zur Komposition gesendet hat.<\/li>\n<li><code>expectedDisplayTime<\/code>vom Typ <code>DOMHighResTimeStamp<\/code>: Die Zeit, zu der der Benutzeragent erwartet, dass der Frame sichtbar ist.<\/li>\n<li><code>Breite<\/code>vom Typ <code>lange nicht signiert<\/code>: Die Breite des Videorahmens in Medienpixeln.<\/li>\n<li><code>H\u00f6he<\/code>vom Typ <code>lange nicht signiert<\/code>: Die H\u00f6he des Videorahmens in Multimedia-Pixeln.<\/li>\n<li><code>mediaTime<\/code>vom Typ <code>doppelt<\/code>: Der Zeitstempel f\u00fcr die Medienanzeige (PTS) in Sekunden des angezeigten Frames (z. B. Ihr Zeitstempel in der <code>video.currentTime<\/code> Zeitleiste).<\/li>\n<li><code>pr\u00e4sentierte Frames<\/code>vom Typ <code>lange nicht signiert<\/code>: Anzahl der Frames, die zur Komposition gesendet wurden. Erm\u00f6glicht Kunden zu bestimmen, ob Frames zwischen Instanzen von verloren gegangen sind <code>VideoFrameRequestCallback<\/code>.<\/li>\n<li><code>VerarbeitungDauer<\/code>vom Typ <code>doppelt<\/code>: Die verstrichene Dauer in Sekunden seit dem Senden des Pakets, das mit demselben Pr\u00e4sentationszeitstempel (PTS) wie dieser Frame codiert wurde (z. B. derselbe wie der <code>mediaTime<\/code>) an den Decoder, bis der decodierte Rahmen zur Pr\u00e4sentation bereit ist.<\/li>\n<\/ul>\n<p>Bei WebRTC-Anwendungen werden m\u00f6glicherweise zus\u00e4tzliche Eigenschaften angezeigt:<\/p>\n<ul>\n<li><code>CaptureTime<\/code>vom Typ <code>DOMHighResTimeStamp<\/code>: Bei Videobildern, die von einer lokalen oder Remote-Quelle stammen, ist dies der Moment, in dem die Kamera das Bild aufgenommen hat. F\u00fcr eine Remote-Quelle wird die Erfassungszeit mithilfe der Synchronisierung und Berichterstellung der RTCP-Senderuhr gesch\u00e4tzt, um RTP-Zeitstempel in Erfassungszeit umzuwandeln.<\/li>\n<li><code>receiveTime<\/code>vom Typ <code>DOMHighResTimeStamp<\/code>: Bei Video-Frames, die von einer Remote-Quelle stammen, ist dies die Zeit, zu der die Plattform den codierten Frame empfangen hat, dh die Zeit, zu der das letzte zu diesem Frame geh\u00f6rende Paket \u00fcber das Netzwerk empfangen wurde.<\/li>\n<li><code>rtpTimestamp<\/code>vom Typ <code>lange nicht signiert<\/code>: Der diesem Videorahmen zugeordnete RTP-Zeitstempel.<\/li>\n<\/ul>\n<div class=\"w-aside w-aside--note\">\n<p>Beachten Sie, dass <code>Breite<\/code> y <code>H\u00f6he<\/code> kann abweichen von <code>videoWidth<\/code> y <code>videoH\u00f6he<\/code> In bestimmten F\u00e4llen (z. B. kann ein anamorphotisches Video rechteckige Pixel aufweisen).<\/p>\n<\/div>\n<p>Von besonderem Interesse in dieser Liste ist <code>mediaTime<\/code>. In der Chromium-Implementierung verwenden wir die Audiouhr als unterst\u00fctzte Zeitquelle <code>video.currentTime<\/code>Inzwischen er <code>mediaTime<\/code> wird direkt von der bev\u00f6lkert <code>Pr\u00e4sentationszeitstempel<\/code> des Rahmens. das <code>mediaTime<\/code> Dies ist zu verwenden, wenn Sie die Frames auf reproduzierbare Weise genau identifizieren m\u00f6chten, auch um genau die Frames zu identifizieren, die verloren gegangen sind.<\/p>\n<div class=\"w-aside w-aside--note\">\n<p>Leider garantiert das Videoelement keine Bildgenauigkeit <em>suchen<\/em>. Dies war eine kontinuierliche <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/w3c\/media-and-entertainment\/issues\/4\">Diskussionsthema<\/a>.<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/WICG\/web-codecs\">WebCodecs<\/a> es wird schlie\u00dflich rahmengenaue Anwendungen erm\u00f6glichen.<\/p>\n<\/div>\n<h3 id=\"if-things-seem-one-frame-off...\"><span class=\"ez-toc-section\" id=\"Si-las-cosas-parecen-un-cuadro-de-distancia-%E2%80%A6\"><\/span>Wenn die Dinge wie eine Kiste entfernt scheinen ... <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Vertikale Synchronisierung (oder einfach vsync) ist eine Grafiktechnologie, die die Bildrate eines Videos und die Bildwiederholfrequenz eines Monitors synchronisiert. Wie <code>requestVideoFrameCallback ()<\/code> Es l\u00e4uft im Haupt-Thread, aber unter der Haube findet Video-Compositing im Composer-Thread statt. Alles von dieser API ist eine Bestleistung und wir bieten keine strengen Garantien. Was m\u00f6glicherweise passiert, ist, dass die API im Vergleich zum Rendern eines Videobilders m\u00f6glicherweise hinter einem vsync zur\u00fcckbleibt. Ein vsync ist erforderlich, damit \u00c4nderungen, die \u00fcber die API an der Webseite vorgenommen werden, auf dem Bildschirm angezeigt werden (wie bei <code>window.requestAnimationFrame ()<\/code>). Also, wenn Sie weiter aktualisieren <code>mediaTime<\/code> oder die Bildnummer auf Ihrer Webseite und vergleichen Sie sie mit den nummerierten Videobildern. Schlie\u00dflich sieht das Video so aus, als ob es ein Bild vor Ihnen liegt.<\/p>\n<p>Was tats\u00e4chlich passiert, ist, dass der Frame in vsync x bereit ist, der R\u00fcckruf ausgel\u00f6st wird und der Frame in vsync x + 1 verarbeitet wird und die am R\u00fcckruf vorgenommenen \u00c4nderungen in vsync x + 2 verarbeitet werden. Sie k\u00f6nnen \u00fcberpr\u00fcfen, ob der R\u00fcckruf erfolgt ist eine sp\u00e4te vsync (und der Frame wird bereits auf dem Bildschirm gerendert), indem \u00fcberpr\u00fcft wird, ob die <code>metadata.expectedDisplayTime<\/code> ist circa <code>jetzt<\/code> oder ein vsync in der Zukunft. Wenn es innerhalb von f\u00fcnf bis zehn Mikrosekunden von ist <code>jetzt<\/code>ist der Rahmen bereits gerendert; Wenn er <code>expectedDisplayTime<\/code> Es ist ungef\u00e4hr 16 Millisekunden in der Zukunft (vorausgesetzt, Ihr Browser \/ Bildschirm wird auf 60 Hz aktualisiert), dann ist es mit dem Frame synchronisiert.<\/p>\n<h2 id=\"demo\"><span class=\"ez-toc-section\" id=\"Manifestacion\"><\/span>Manifestation <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Ich habe eine kleine erstellt<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/requestvideoframecallback.glitch.me\/\">Glitch-Demo<\/a><br \/>\nHier wird gezeigt, wie Frames mit genau der Framerate des Videos auf einer Leinwand gezeichnet werden und wo Frame-Metadaten zu Debugging-Zwecken aufgezeichnet werden. Die Kernlogik besteht nur aus ein paar Zeilen JavaScript.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">Lassen<\/span> paintCount <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">Lassen<\/span> startTime <span class=\"token operator\">=<\/span> <span class=\"token number\">0.0<\/span><span class=\"token punctuation\">;<\/span><p><span class=\"token keyword\">const<\/span> <span class=\"token function-variable function\">updateCanvas<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">jetzt<span class=\"token punctuation\">,<\/span> Metadaten<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">wenn<\/span> <span class=\"token punctuation\">(<\/span>startTime <span class=\"token operator\">===<\/span> <span class=\"token number\">0.0<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br>startTime <span class=\"token operator\">=<\/span> jetzt<span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><\/p><p>ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">drawImage<\/span><span class=\"token punctuation\">(<\/span>Video<span class=\"token punctuation\">,<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span> canvas<span class=\"token punctuation\">.<\/span>Breite<span class=\"token punctuation\">,<\/span> canvas<span class=\"token punctuation\">.<\/span>H\u00f6he<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p><p><span class=\"token keyword\">const<\/span> elapsed <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">(<\/span>jetzt <span class=\"token operator\">-<\/span> startTime<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">\/<\/span> <span class=\"token number\">1000.0<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">const<\/span> fps <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token operator\">++<\/span>paintCount <span class=\"token operator\">\/<\/span> elapsed<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">toFixed<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">3<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br>fpsInfo<span class=\"token punctuation\">.<\/span>innerText <span class=\"token operator\">=<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">video fps: <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>fps<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">;<\/span><br>metadataInfo<span class=\"token punctuation\">.<\/span>innerText <span class=\"token operator\">=<\/span> <span class=\"token constant\">JSON<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">stringify<\/span><span class=\"token punctuation\">(<\/span>Metadaten<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">Null<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p><p>Video<span class=\"token punctuation\">.<\/span><span class=\"token function\">requestVideoFrameCallback<\/span><span class=\"token punctuation\">(<\/span>updateCanvas<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><\/p><p>Video<span class=\"token punctuation\">.<\/span><span class=\"token function\">requestVideoFrameCallback<\/span><span class=\"token punctuation\">(<\/span>updateCanvas<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>\n  <iframe allow=\"camera; clipboard; clipboard-read; clipboard-write; encrypted-media; geolocation; microphone; midi; vr\" loading=\"lazy\" src=\"https:\/\/glitch.com\/embed\/#!\/embed\/requestvideoframecallback?attributionHidden=true&amp;sidebarCollapsed=true&amp;path=script.js&amp;previewSize=100\" style=\"height: 100%; width: 100%; border: 0;\" title=\"requestvideoframecallback auf Glitch\"><\/iframe>\n<\/p>\n<h2 id=\"conclusions\"><span class=\"ez-toc-section\" id=\"Conclusiones\"><\/span>Schlussfolgerungen <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Ich habe lange Zeit eine Verarbeitung auf Frame-Ebene durchgef\u00fchrt und keinen Zugriff auf die eigentlichen Frames gehabt, nur basierend auf <code>video.currentTime<\/code>. Ich habe die Segmentierung von Videoaufnahmen in JavaScript grob implementiert. Sie k\u00f6nnen den Anhang noch lesen<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www2012.universite-lyon.fr\/proceedings\/nocompanion\/DevTrack_028.pdf\">Forschungsarbeit<\/a>. Hatte die <code>requestVideoFrameCallback ()<\/code> existierte damals, mein Leben w\u00e4re viel einfacher gewesen ...<\/p>\n<h2 id=\"acknowledgements\"><span class=\"ez-toc-section\" id=\"Agradecimientos\"><\/span>Vielen Dank <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>das <code>requestVideoFrameCallback<\/code> Die API wurde von spezifiziert und implementiert<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/tguilbert-google\">Thomas Guilbert<\/a>. Dieser Artikel wurde von \u00fcberpr\u00fcft <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/jpmedley\">Joe Medley<\/a><br \/>\ny <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/kaycebasques\">Kayce Basques<\/a>.<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/unsplash.com\/photos\/tV80374iytg\">Heldenbild<\/a> zum<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/unsplash.com\/@dmjdenise\">Denise Jans<\/a> auf Unsplash.<\/p>\n<p>    <web-feedback additional-questions=\"api\"><\/web-feedback>\n  <\/div>","protected":false},"excerpt":{"rendered":"<p>Aprenda a usar el requestVideoFrameCallback() para trabajar de manera m\u00e1s eficiente con videos en el navegador. 29 de junio de 2020 Actualizado 17 de agosto de 2020 Hay una nueva&#8230;<\/p>","protected":false},"author":1,"featured_media":83095,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1356],"tags":[],"class_list":["post-83094","post","type-post","status-publish","format-standard","has-post-thumbnail","category-dev"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Realice operaciones eficientes por fotograma de video en video con requestVideoFrameCallback () - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"Aprenda a usar el requestVideoFrameCallback() para trabajar de manera m\u00e1s eficiente con videos en el navegador. 29 de junio de 2020 Actualizado 17 de\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/realice-operaciones-eficientes-por-fotograma-de-video-en-video-con-requestvideoframecallback\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Realice operaciones eficientes por fotograma de video en video con requestVideoFrameCallback ()\" \/>\n<meta property=\"og:description\" content=\"Aprenda a usar el requestVideoFrameCallback() para trabajar de manera m\u00e1s eficiente con videos en el navegador. 29 de junio de 2020 Actualizado 17 de\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/de\/dev\/realice-operaciones-eficientes-por-fotograma-de-video-en-video-con-requestvideoframecallback\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-07-28T08:01:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-1067606.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"360\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"R Marketing Digital\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/realice-operaciones-eficientes-por-fotograma-de-video-en-video-con-requestvideoframecallback\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/realice-operaciones-eficientes-por-fotograma-de-video-en-video-con-requestvideoframecallback\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"Realice operaciones eficientes por fotograma de video en video con requestVideoFrameCallback ()\",\"datePublished\":\"2022-07-28T08:01:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/realice-operaciones-eficientes-por-fotograma-de-video-en-video-con-requestvideoframecallback\\\/\"},\"wordCount\":1240,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/realice-operaciones-eficientes-por-fotograma-de-video-en-video-con-requestvideoframecallback\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-1067606.jpg\",\"articleSection\":[\"Dev\"],\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/realice-operaciones-eficientes-por-fotograma-de-video-en-video-con-requestvideoframecallback\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/realice-operaciones-eficientes-por-fotograma-de-video-en-video-con-requestvideoframecallback\\\/\",\"name\":\"Realice operaciones eficientes por fotograma de video en video con requestVideoFrameCallback () - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/realice-operaciones-eficientes-por-fotograma-de-video-en-video-con-requestvideoframecallback\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/realice-operaciones-eficientes-por-fotograma-de-video-en-video-con-requestvideoframecallback\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-1067606.jpg\",\"datePublished\":\"2022-07-28T08:01:42+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"Aprenda a usar el requestVideoFrameCallback() para trabajar de manera m\u00e1s eficiente con videos en el navegador. 29 de junio de 2020 Actualizado 17 de\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/realice-operaciones-eficientes-por-fotograma-de-video-en-video-con-requestvideoframecallback\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/realice-operaciones-eficientes-por-fotograma-de-video-en-video-con-requestvideoframecallback\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-1067606.jpg\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-1067606.jpg\",\"width\":1200,\"height\":360,\"caption\":\"hero-1067606-2036267-jpg\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"caption\":\"R Marketing Digital\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"F\u00fchren Sie mit requestVideoFrameCallback() - R Marketing Digital effiziente Operationen pro Videobild auf Video durch","description":"Erfahren Sie, wie Sie mit requestVideoFrameCallback () effizienter mit Videos im Browser arbeiten k\u00f6nnen. 29. Juni 2020 Aktualisiert am 17. Juni","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rmarketingdigital.com\/de\/dev\/realice-operaciones-eficientes-por-fotograma-de-video-en-video-con-requestvideoframecallback\/","og_locale":"de_DE","og_type":"article","og_title":"Realice operaciones eficientes por fotograma de video en video con requestVideoFrameCallback ()","og_description":"Aprenda a usar el requestVideoFrameCallback() para trabajar de manera m\u00e1s eficiente con videos en el navegador. 29 de junio de 2020 Actualizado 17 de","og_url":"https:\/\/rmarketingdigital.com\/de\/dev\/realice-operaciones-eficientes-por-fotograma-de-video-en-video-con-requestvideoframecallback\/","og_site_name":"R Marketing Digital","article_published_time":"2022-07-28T08:01:42+00:00","og_image":[{"width":1200,"height":360,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-1067606.jpg","type":"image\/jpeg"}],"author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/dev\/realice-operaciones-eficientes-por-fotograma-de-video-en-video-con-requestvideoframecallback\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/dev\/realice-operaciones-eficientes-por-fotograma-de-video-en-video-con-requestvideoframecallback\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"Realice operaciones eficientes por fotograma de video en video con requestVideoFrameCallback ()","datePublished":"2022-07-28T08:01:42+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/dev\/realice-operaciones-eficientes-por-fotograma-de-video-en-video-con-requestvideoframecallback\/"},"wordCount":1240,"image":{"@id":"https:\/\/rmarketingdigital.com\/dev\/realice-operaciones-eficientes-por-fotograma-de-video-en-video-con-requestvideoframecallback\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-1067606.jpg","articleSection":["Dev"],"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/dev\/realice-operaciones-eficientes-por-fotograma-de-video-en-video-con-requestvideoframecallback\/","url":"https:\/\/rmarketingdigital.com\/dev\/realice-operaciones-eficientes-por-fotograma-de-video-en-video-con-requestvideoframecallback\/","name":"F\u00fchren Sie mit requestVideoFrameCallback() - R Marketing Digital effiziente Operationen pro Videobild auf Video durch","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/dev\/realice-operaciones-eficientes-por-fotograma-de-video-en-video-con-requestvideoframecallback\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/dev\/realice-operaciones-eficientes-por-fotograma-de-video-en-video-con-requestvideoframecallback\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-1067606.jpg","datePublished":"2022-07-28T08:01:42+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"Erfahren Sie, wie Sie mit requestVideoFrameCallback () effizienter mit Videos im Browser arbeiten k\u00f6nnen. 29. Juni 2020 Aktualisiert am 17. Juni","inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/dev\/realice-operaciones-eficientes-por-fotograma-de-video-en-video-con-requestvideoframecallback\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/rmarketingdigital.com\/dev\/realice-operaciones-eficientes-por-fotograma-de-video-en-video-con-requestvideoframecallback\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-1067606.jpg","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-1067606.jpg","width":1200,"height":360,"caption":"hero-1067606-2036267-jpg"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"R Digitales Marketing","description":"SEO Agentur | Werbung f\u00fcr soziale Netzwerke | Community Management","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"R Digitales Marketing","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","caption":"R Marketing Digital"}}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts\/83094","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/comments?post=83094"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts\/83094\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/media\/83095"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/media?parent=83094"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/categories?post=83094"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/tags?post=83094"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}