未能在“URL”上执行“createObjectURL”：答案

【问题标题】：Failed to execute 'createObjectURL' on 'URL':未能在“URL”上执行“createObjectURL”：
【发布时间】：2015-01-23 02:31:09
【问题描述】：

在 Safari 中显示下方错误。

在“URL”上执行“createObjectURL”失败：找不到与提供的签名匹配的函数。

我的代码是：

function createObjectURL(object) {
    return (window.URL) ? window.URL.createObjectURL(object) : window.webkitURL.createObjectURL(object);
}

这是我的图片代码：

function myUploadOnChangeFunction() { 
    if (this.files.length) { 
       for (var i in this.files) { 
           if (this.files.hasOwnProperty(i)) { 
              var src = createObjectURL(this.files[i]); 
              var image = new Image(); 
              image.src = src; 
              imagSRC = src; 
              $('#img').attr('src', src); 
            }
       }           
   } 
}

【问题讨论】：

嗨，Hardik，当您收到该错误时，您将什么传递给您的 createObjectURL(...) 函数？
对象必须是 File 对象或 Blob 对象才能为其创建对象 URL。参见 devdocs.io/dom/window.url.createobjecturl
这是我的图像代码：function myUploadOnChangeFunction() { if (this.files.length) { for (var i in this.files) { if (this.files.hasOwnProperty(i)) { var src = createObjectURL(this.files[i]);变种图像 = 新图像（）；图像.src = src; imagSRC = src; $('#img').attr('src', src); } } } }
@HardikMansaraa 继续编辑您的问题。
window.URL.createObjectURL('broken') 抛出错误：Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.

标签： javascript createobject

【解决方案1】：

当我将原始数据传递给 createObjectURL 时，我遇到了同样的错误：

window.URL.createObjectURL(data)

它必须是 Blob、File 或 MediaSource 对象，而不是数据本身。这对我有用：

var binaryData = [];
binaryData.push(data);
window.URL.createObjectURL(new Blob(binaryData, {type: "application/zip"}))

查看 MDN 了解更多信息：https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL

更新

过去我们还可以将createObjectURL() 方法与 MediaStream 对象一起使用。规范和浏览器已经放弃了这种用法。
如果您需要将 MediaStream 设置为 HTMLMediaElement 的源，只需将 MediaStream 对象直接附加到 HTMLMediaElement 的 srcObject 属性，例如<video> 元素。

const mediaStream = new MediaStream();
const video = document.getElementById('video-player');
video.srcObject = mediaStream;

但是，如果您需要使用MediaSource、Blob 或File，您仍然需要使用URL.createObjectURL() 创建一个blob:// URL 并将其分配给HTMLMediaElement.src。

在此处阅读更多详细信息：https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject

【讨论】：

嗨.. 如果我正在处理“应用程序/pdf”怎么办？我在处理 PDF 文件时在控制台上遇到同样的错误
@mimo 我正在使用相同的代码下载文件。但是正在下载两个文件。一个是正确的文件，另一个是同名但失败状态的额外文件正在下载。你知道为什么会这样吗？
我对这条评论感到困惑，在 MDN 中，它不鼓励将 URL.createObjectURL() 用于媒体流。但是，它没有声明不要将其用于最初问题中所述的文件输入。

【解决方案2】：

这个错误是因为函数createObjectURL不再接受谷歌浏览器的媒体流对象

我改变了这个：

video.src=vendorUrl.createObjectURL(stream);
video.play();

到这里：

video.srcObject=stream;
video.play();

这对我有用。

【讨论】：

+1 参见后备示例developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/…
createObjectURL 没有被弃用，如 here 所示，但不再接受媒体流对象
这应该是答案。
还有另一个问题 video.play() 似乎受到限制：DOMException: play() 只能由用户手势启动。
@user889030 这意味着您无法打开网页并期望网络摄像头流开始。您必须让用户明确启动流。只需按一下按钮即可开始直播

【解决方案3】：

我的代码被破坏了，因为我使用了一种已弃用的技术。以前是这样的：

video.src = window.URL.createObjectURL(localMediaStream);
video.play();

然后我将其替换为：

video.srcObject = localMediaStream;
video.play();

效果很好。

编辑：最近localMediaStream 已被弃用并替换为MediaStream。最新的代码是这样的：

video.srcObject = new MediaStream();

参考资料：

已弃用的技术：https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL
现代弃用技术：https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject
现代技术：https://developer.mozilla.org/en-US/docs/Web/API/MediaStream

【讨论】：

【解决方案4】：

后退视频：

try {
  video.srcObject = mediaSource;
} catch (error) {
  video.src = URL.createObjectURL(mediaSource);
}
video.play();

来自： https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject

【讨论】：

【解决方案5】：

我对 MediaStream 有同样的错误。解决方案是给 srcObject 设置一个流。

来自docs：

重要提示：如果您仍有依赖于 createObjectURL() 的代码将流附加到媒体元素，您需要将代码更新为只需将 srcObject 直接设置为 MediaStream。

【讨论】：

【解决方案6】：

问题是循环中提供的键不引用文件的索引。

for (var i in this.files) {
    console.log(i);
}

以上代码的输出为：

0
length
item

但预期的是：

0
1
2
etc...

那么当浏览器尝试执行时就会出现错误，例如：

window.URL.createObjectURL(this.files["length"])

我建议基于以下代码实现：

var files = this.files;
for (var i = 0; i < files.length; i++) {
    var file = files[i],
        src = (window.URL || window.webkitURL).createObjectURL(file);
    ...
}

我希望这可以帮助某人。

您好！

【讨论】：

【解决方案7】：

如果您使用的是ajax，可以添加选项xhrFields: { responseType: 'blob' }：

$.ajax({
  url: 'yourURL',
  type: 'POST',
  data: yourData,
  xhrFields: { responseType: 'blob' },
  success: function (data, textStatus, jqXHR) {
    let src = window.URL.createObjectURL(data);
  }
});

【讨论】：

【解决方案8】：

如果您使用 Angular，本教程会有所帮助：link。但是，您需要替换此行：

this.video.src = window.URL.createObjectURL(stream);

有了这个，因为 createObjectURL() 在 chrome 上已被 MediaStream 弃用。

this.video.srcObject = stream;

【讨论】：

【解决方案9】：

我尝试了几件事，但对我来说，只需将流分配给 src 就可以了。

video.src=stream;

【讨论】：

【解决方案10】：

我修复了从 GgitHub 下载最新版本的问题 GitHub url

【讨论】：