TensorFlow.js调用tf.data.webcam()触发仅getter属性TypeError报错排查

该异常与你编写的DOM绑定逻辑、视频元素配置无关，本质是TensorFlow.js 内部错误处理逻辑与现代浏览器JS校验规则不兼容：tf.data.webcam 在捕获摄像头调用的错误分支时，会尝试直接给Error对象的message属性赋值，但现代浏览器已经将该属性定义为仅带getter的访问器属性，不允许直接覆写赋值，最终触发类型错误抛出。

• 核对TensorFlow.js的引入版本：3.20.x 至 4.12.x 区间的部分实验版本存在该已知bug，内部代码硬编码了错误信息赋值逻辑。可以将依赖版本固定为官方稳定的4.13.0正式版，移除项目中加载的预发布、实验通道的tfjs包，重新加载页面测试。
• 排查全局Error原型的篡改：如果项目中引入了前端监控、埋点类第三方SDK，这类SDK通常会重写全局Error的构造逻辑，将message属性的描述符改为只读访问器，触发tfjs内部的赋值报错。可以在控制台执行以下代码校验属性状态：

  console.log(Object.getOwnPropertyDescriptor(Error.prototype, 'message'))
  

  如果输出结果中writable属性为false，即可确认是原型被篡改。可在tfjs加载前执行以下代码恢复属性可写性：

  // 需放在所有第三方SDK加载完成后、tfjs脚本引入前执行
  Object.defineProperty(Error.prototype, 'message', {
    configurable: true,
    enumerable: false,
    writable: true,
    value: ''
  })
  

• 校验页面运行环境：摄像头调用API要求页面必须运行在HTTPS安全上下文，或本地localhost调试环境。非安全上下文下的API调用失败会触发tfjs内部的错误处理分支，进而走到有bug的代码段，确认页面协议符合要求即可。

你当前定义的视频元素、DOM获取逻辑、摄像头绑定逻辑，完全符合tfjs摄像头接口的要求，不需要做代码调整：

<video autoplay playsinline muted id="webcam" width="224" height="224"></video>

const webcamElement = document.getElementById('webcam');
const webcam = await tf.data.webcam(webcamElement);

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