如何替换已废弃的URL.createObjectURL？附代码寻求解决方案

嗨，我来帮你搞定这个废弃API的替换问题～其实现在主流浏览器已经推荐直接使用srcObject属性来替代URL.createObjectURL绑定媒体流了，操作更简单还不用手动释放资源。

为什么要替换？ #

URL.createObjectURL(MediaStream)已经被标记为废弃，因为它需要手动调用URL.revokeObjectURL()来释放内存，容易造成内存泄漏；而srcObject会自动管理流的生命周期，更安全高效。

具体替换步骤 #

你的代码片段里应该有一段获取媒体流后绑定到video的逻辑，我先把完整的流程补全并替换：

原废弃代码（推测完整逻辑）：

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var video = document.getElementById('video');
var mediaConfig = { video: true };
var errBack = function(e) { console.log('An error has occurred!', e) };

if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
  navigator.mediaDevices.getUserMedia(mediaConfig)
    .then(function(stream) {
      // 这行是废弃的写法
      video.src = URL.createObjectURL(stream);
      video.play();
    })
    .catch(errBack);
}

替换后的代码：

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var video = document.getElementById('video');
var mediaConfig = { video: true };
var errBack = function(e) { console.log('An error has occurred!', e) };

if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
  navigator.mediaDevices.getUserMedia(mediaConfig)
    .then(function(stream) {
      // 直接把MediaStream赋值给srcObject
      video.srcObject = stream;
      video.play();
    })
    .catch(errBack);
}

额外注意点 #

• 如果之前代码里有URL.revokeObjectURL(video.src)这样的释放代码，现在可以直接删掉了，srcObject会自动处理资源释放。
• 目前所有现代浏览器（Chrome、Firefox、Edge、Safari 11+）都支持srcObject，兼容性完全没问题，不用考虑 fallback 方案（除非你要兼容非常老旧的浏览器，那另当别论）。

内容的提问来源于stack exchange，提问作者user6944995