199

在 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); 
            }
       }           
   } 
} 
4

10 回答 10

236

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

window.URL.createObjectURL(data)

它必须是一个或对象Blob,而不是数据本身。这对我有用:FileMediaSource

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对象直接附加到srcObjectHTMLMediaElement 的属性,例如<video>元素。

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

但是,如果您需要使用MediaSource,BlobFile,您仍然需要创建一个blob://URLURL.createObjectURL()并将其分配给HTMLMediaElement.src.

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

于 2015-11-17T14:34:04.237 回答
166

出现此错误是因为该函数createObjectURL不再接受 Google Chrome 的媒体流对象

我改变了这个:

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

对此:

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

这对我有用。

于 2018-12-17T19:14:56.247 回答
32

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

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

然后我用这个替换了它:

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

那效果很好。

编辑:最近localMediaStream已被弃用并替换为MediaStream. 最新的代码如下所示:

video.srcObject = new MediaStream();

参考:

  1. 不推荐使用的技术:https ://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL
  2. 现代不推荐使用的技术:https ://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject
  3. 现代技术:https ://developer.mozilla.org/en-US/docs/Web/API/MediaStream
于 2019-03-29T00:05:43.080 回答
10

回退视频:

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

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

于 2019-02-15T05:11:56.570 回答
9

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

文档

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

于 2018-12-05T11:34:34.447 回答
5

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

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);
    ...
}

我希望这可以帮助某人。

问候!

于 2017-04-17T15:37:31.080 回答
2

如果您使用 Angular,本教程将很有帮助:链接。但是,您将需要替换此行:

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

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

this.video.srcObject = stream;
于 2021-05-25T06:19:17.263 回答
2

如果您使用的是 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);
  }
});
于 2019-10-03T18:44:31.810 回答
0

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

video.srcObject=stream;
于 2022-01-12T10:40:20.983 回答
-7

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

于 2019-02-20T17:47:55.670 回答