QRコードの中にARマーカーの画像を入れても反応しないので反応させたい

実現したいこと

WebARのマーカーがうまく反応しないです。
QRコードにアイコンを真ん中に表示する事ができると思いますが、
そこにARマーカーを付けて、QRでWebブラウザを開いてカメラを
起動させ、そのまま真ん中の小さなARマーカーにカメラをかざせば、
ARが表示されます。

実際に下記のWebARの解説記事にもその方法が書かれていて、
ARマーカーとQRコードが一体になってるのでデザインする時
スペースが節約できて便利です。

でも実際、やってみると全然、ARが反応してくれません。
QRコードの点の部分やARマーカーの縁の部分を黒やはっきりした
色にしても反応しません。

ARが表示されたいです。私の場合は画像や動画です。

「参考サイト」
AR.jsを使ってWebAR年賀状を作る 2020年版

該当のソースコード

<!doctype html>
<html>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densityDpi=device-dpi" />
        <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
        <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
        <script src="https://raw.githack.com/AR-js-org/studio-backend/master/src/modules/marker/tools/gesture-detector.js"></script>
        <script src="https://raw.githack.com/AR-js-org/studio-backend/master/src/modules/marker/tools/gesture-handler.js"></script>

            <a-assets>
                <video
                    id="vid"
                    src="assets/asset.mp4"
                    preload="auto"
                    response-type="arraybuffer"
                    loop
                    crossorigin
                    webkit-playsinline
                    muted
                    playsinline
                ></video>
                <audio src="videopath" autoplay></audio>
            </a-assets>

            <a-marker
                type="pattern"
                preset="custom"
                url="assets/marker.patt"
                videohandler
                smooth="true"
                smoothCount="10"
                smoothTolerance="0.01"
                smoothThreshold="5"
                raycaster="objects: .clickable"
                emitevents="true"
                cursor="fuse: false; rayOrigin: mouse;"
                id="markerA"
            >
                <a-video
                link="href: https://twitter.com/naive_kazama"
         animation-mixer="loop:repeat"
                    src="#vid"
                    width="2.6" height="1.4" position="0 0 0" rotation="270 0 0" play="true"
                    class="clickable"
                    gesture-handler
                ></a-video>
            </a-marker>

            <a-entity camera></a-entity>
        </a-scene>