- 官方给出的示例通过
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>
