Webtorrent - Uncaught (in promise) Error: No server created

Question

I'm experimenting with a Webtorrent library inside a Chrome extension that use Vite and Vue for the UI. I'm looking at the webtorrent documentation and I saw that to add a magnet link a service worker is needed.

According to the chrome mv3 documentation, a service worker is automatically registered from the extension. At the moment I have this code in my Vue app to get magnet link file content, but it's not working. I'm able to log the file info but no way to stream the file.

import WebTorrent from 'import WebTorrent from 'webtorrent/dist/webtorrent.min.js';

const client = new WebTorrent(); 

//this is working fine
watch([enableVideoShare], () => {
  console.log(enableVideoShare.value);
  if(enableVideoShare.value){
    client.seed(file.value, (torrent) => {
      console.log(torrent)
      outcomingMagnetURI.value = torrent.magnetURI;
    });
  }
});

In my background script I have this code at the moment.

import WebTorrent from 'webtorrent/dist/webtorrent.min.js'; //added this but not sure if need to implement the server

console.log('hello world from background');

//
chrome.action.onClicked.addListener((tab) => {
  console.log('tab info', tab);
  chrome.tabs.create({
    active: true,
    url: chrome.runtime.getURL('src/new-tab/index.html')
  });
});

self.onerror = function (message, source, lineno, colno, error) {
  console.info(
    `Error: ${message}\nSource: ${source}\nLine: ${lineno}\nColumn: ${colno}\nError object: ${error}`
  )
}

export {}

This is what is logged in console.

index-DcFS_qW1.js:1 Uncaught (in promise) Error: No server created
    at get streamURL (index-DcFS_qW1.js:1:166925)
    at ti.streamTo (index-DcFS_qW1.js:1:167066)
    at index-DcFS_qW1.js:24:9552
    at ni.n (index-DcFS_qW1.js:24:4353)
    at Object.u (index-DcFS_qW1.js:1:11020)
    at index-DcFS_qW1.js:1:12744
    at s.emit (index-DcFS_qW1.js:1:12811)
    at ni._onStore (index-DcFS_qW1.js:1:183681)
    at n (index-DcFS_qW1.js:1:181577)
    at y (index-DcFS_qW1.js:1:43150)
 WebSocket connection to 'wss://tracker.btorrent.xyz/' failed

How can I correctly manage stream?

Answer 1

After a lot of searching I've tried this solution that seems working as expected:

In my service worker file I've imported the code suggested for browser usage into the webtorrent documentation.

After this I will have this backhround script file content

import fileResponse from '../../node_modules/webtorrent/lib/worker-server.js';

self.addEventListener('install', () => {
  console.log(self);
  self.skipWaiting();
});

self.addEventListener('fetch', event => {
  const res = fileResponse(event)
  if (res) event.respondWith(res);
});

self.addEventListener('activate', () => {
  self.clients.claim();
});

//
chrome.action.onClicked.addListener((tab) => {
  console.log('tab info', tab);
  chrome.tabs.create({
    active: true,
    url: chrome.runtime.getURL('src/new-tab/index.html')
  });
});

self.onerror = function (message, source, lineno, colno, error) {
  console.info(
    `Error: ${message}\nSource: ${source}\nLine: ${lineno}\nColumn: ${colno}\nError object: ${error}`
  )
}

export {}

In my function to handle the magnetURI than I've done this modification

const handleIncomingMagnetURI = async () => {
  if (incomingMagnetURI.value) {
    const controller = await navigator.serviceWorker.ready
    client.createServer({ controller });
    console.log('client.createServer', controller);
    console.log('magnetURI detected!', incomingMagnetURI.value);
    client.add(incomingMagnetURI.value, (torrent) => {
      console.log('video file detected!', torrent.files[0]);
      torrent.files[0].streamTo(videoPlayer.value);
    });
  }
}

Not tested yet in firefox but used an anonymous window to see if the magnet was accepted and displayed into the video HTML element I have in the UI. Not sure if worked because form same machine, need to do more tests.