【p2p、分布式，区块链笔记 Torrent】webtorrent.min.js的实现之appendTo()函数

news2024/11/26 14:31:16

官方给出的示例通过appendTo函数渲染文件对象，通过torrent.files的元素对象调用：

const WebTorrent = require('webtorrent')

const client = new WebTorrent()

// Sintel, a free, Creative Commons movie
const torrentId = 'magnet:?xt=urn:btih:08ada5a7a6183aae1e09d831df6748d566095a10&dn=Sintel&tr=udp%3A%2F%2Fexplodie.org%3A6969&tr=udp%3A%2F%2Ftracker.coppersurfer.tk%3A6969&tr=udp%3A%2F%2Ftracker.empire-js.us%3A1337&tr=udp%3A%2F%2Ftracker.leechers-paradise.org%3A6969&tr=udp%3A%2F%2Ftracker.opentrackr.org%3A1337&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2F&xs=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel.torrent'

client.add(torrentId, function (torrent) {
  // Torrents can contain many files. Let's use the .mp4 file
  const file = torrent.files.find(function (file) {
    return file.name.endsWith('.mp4')
  })

  // Display the file by adding it to the DOM.
  // Supports video, audio, image files, and more!
  file.appendTo('body')
})

在这里插入图片描述

appendTo将调用append函数

在这里插入图片描述

调用renderMedia函数

在这里插入图片描述

MEDIASOURCE_EXTS.includes(extname) ? renderMediaSource() : VIDEO_EXTS.includes(extname) ? renderMediaElement("video") : AUDIO_EXTS.includes(extname) ? renderMediaElement("audio") : IMAGE_EXTS.includes(extname) ? renderImage() : IFRAME_EXTS.includes(extname) ? renderIframe() : tryRenderIframe() 使用了三元运算符来根据文件扩展名（extname）决定如何渲染不同类型的媒体内容。它依次检查文件扩展名，并调用相应的渲染函数。
其中数组定义如下：

              , VIDEOSTREAM_EXTS = [".m4a", ".m4b", ".m4p", ".m4v", ".mp4"]
              , MEDIASOURCE_VIDEO_EXTS = [".m4v", ".mkv", ".mp4", ".webm"]
              , MEDIASOURCE_AUDIO_EXTS = [".m4a", ".m4b", ".m4p", ".mp3"]
              , MEDIASOURCE_EXTS = [].concat(MEDIASOURCE_VIDEO_EXTS, MEDIASOURCE_AUDIO_EXTS)
              , VIDEO_EXTS = [".mov", ".ogv"]
              , AUDIO_EXTS = [".aac", ".oga", ".ogg", ".wav", ".flac"]
              , IMAGE_EXTS = [".bmp", ".gif", ".jpeg", ".jpg", ".png", ".svg"]
              , IFRAME_EXTS = [".css", ".html", ".js", ".md", ".pdf", ".srt", ".txt"]

在这里插入图片描述

如果 extname 不在上述任何数组中，调用 tryRenderIframe()。

图像数据的渲染：renderImage

图像数据通过renderImage函数渲染：

                function renderImage() {
                    elem = getElem("img"), // getElem 函数根据传入的标签名决定使用哪个函数来创建元素。如果是媒体类型的标签（视频或音频），则使用 createMedia，否则使用通用的 createElem
                    getBlobURL(file, (err, url) => err ? fatalError(err) : void (elem.src = url,
                    elem.alt = file.name,
                    cb(null, elem)))
                }

getElem

在这里插入图片描述

getBlobURL

            function getBlobURL(file, cb) {
                const extname = path.extname(file.name).toLowerCase();
                streamToBlobURL(file.createReadStream(), exports.mime[extname]).then(blobUrl => cb(null, blobUrl), err => cb(err))
            }

render-media
streamToBlobURL = require(“stream-to-blob-url”)
一个png文件的渲染结果：

<img src="blob:http://127.0.0.1:5500/7d7b555b-4378-43e7-a5fd-486ffc1a1844" alt="carbon.png">

文本数据的渲染：renderIframe

文本数据通过renderIframe函数渲染：

                function renderIframe() {
                    getBlobURL(file, (err, url) => err ? fatalError(err) : void (".pdf" === extname ? (elem = getElem("object"),
                    elem.setAttribute("typemustmatch", !0),
                    elem.setAttribute("type", "application/pdf"),
                    elem.setAttribute("data", url)) : (elem = getElem("iframe"),
                    elem.sandbox = "allow-forms allow-scripts",
                    elem.src = url),
                    cb(null, elem)))
                }

一个txt文件的渲染结果：

<iframe sandbox="allow-forms allow-scripts" src="blob:http://127.0.0.1:5500/e99bed8c-a0c8-47be-93d1-9b1a209dcf6f">
    #document (blob:http://127.0.0.1:5500/e99bed8c-a0c8-47be-93d1-9b1a209dcf6f)
    <html>
    <head>
        <meta name="color-scheme" content="light dark">
    </head>
    <body>
        <pre style="word-wrap: break-word; white-space: pre-wrap;">
             AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA	
        </pre>
    </body>
    </html>
</iframe>