我目前有一个设置，用于在不同浏览器不支持某些功能时模拟 Web Workers 支持，以便在所有浏览器中使用相同的消息系统。在这种情况下，Firefox 不支持 Web Worker 中的 Media Source Extension。在“无工作器”模式下，我创建了一个，并使用 MessageChannel 端口在“工作器”线程和主线程之间交换消息。我的代码总体上是这样的：

// on port1 of the MessageChannel (representing the worker side)
postMessageToMain("createVideo")
const mediaSource = new MediaSource()
if (workerSupported){
  const handle = mediaSource.handle
  postMessageToMain("setSource", handle, [handle])
} else {
  const handle = URL.createObjectURL(mediaSource)
  postMessageToMain("setSource", handle)
}

// on port2 of the MessageChannel (representing the main thread)
onmessage(m){
  switch (m) {
    case "createVideo":{
        videoElement = document.createElement('video')
        videoElement.playsInline = true
        break
    }
    case "setSource":{
        if(workerSupported){
         videoElement.srcObject = m.data.handle // it is of type MediaSourceHandle
        } else {
         videoElement.src = m.data.handle // is of type string, here the error in the title is thrown
        }
    }
  }
}

此代码在 Chrome 的工作模式和非工作模式下均可运行，而在 Safari 上，由于不支持 Web Worker 中的 MSE，因此仅在非工作模式下运行。我没有设置任何 CSP 标头。我做错了吗？我在 SO 中发现了，但我很难找到实际问题及其解决方案

5

  • const mediaSource = new MediaSource()应该在 Firefox 中引入 Worker。MediaSource该上下文是什么？


    – 

  • const mediaSource = new MediaSource()Firefox 上的 始终在主线程上执行，因为它不受 Worker 支持。这就是为什么我创建这个消息系统作为 Web Workers 不支持某些功能时的后备方案。


    – 

  • 那你为什么要把它包含在标有 的部分中// on the worker side。如果这不是你的实际代码，我们真的帮不了你。


    – 

  • 我之所以包含它，是因为无论它是否在工作器中运行，它都是相同的代码。它的存在只是为了区分 MessageChannel 的两侧


    – 

  • 所以我在第一条评论中引用的这行代码，是从 worker 端运行的吗？如果不是，那么您将什么作为 createObjectURL 的参数传递？


    – 


$(function() {
$(“.js-gps-inline-related-questions .spacer”).on(“click”, function () {
fireRelatedEvent($(this).index() + 1, $(this).data(‘question-id’));
});

function fireRelatedEvent(position, questionId) {
StackExchange.using(“gps”, function() {
StackExchange.gps.track(‘related_questions.click’,
{
position: position,
originQuestionId: 78697036,
relatedQuestionId: +questionId,
location: ‘inline’,
source: ‘Baseline_Fallback’
});
});
}
});

function toggleInlineRelated(showMore) {
var inlineRelatedLess = document.getElementById(“inline_related_var_a_less”);
var inlineRelatedMore = document.getElementById(“inline_related_var_a_more”);

var inlineRelatedSeeMore = document.getElementById(“inline_related_see_more”);
var inlineRelatedSeeLess = document.getElementById(“inline_related_see_less”);

if (showMore) {
inlineRelatedLess.classList.add(“d-none”);
inlineRelatedSeeMore.classList.add(“d-none”);

inlineRelatedMore.classList.remove(“d-none”);
inlineRelatedSeeLess.classList.remove(“d-none”);
}
else {
inlineRelatedMore.classList.add(“d-none”);
inlineRelatedSeeLess.classList.add(“d-none”);

inlineRelatedLess.classList.remove(“d-none”);
inlineRelatedSeeMore.classList.remove(“d-none”);
}
}

0