IE11中用Temasys插件调用getUserMedia遇MediaStream兼容问题求助

我之前也踩过这个坑，IE11本身不支持标准的srcObject属性，而且Temasys插件返回的MediaStream对象和原生浏览器的实现有差异，直接用window.URL.createObjectURL根本识别不了。这里给你整理一套可行的修复方案：

核心问题拆解 #

• IE11完全没实现HTMLMediaElement.srcObject，必须用传统的src属性来设置视频源。
• Temasys插件生成的MediaStream实例自带专属的URL生成逻辑，原生的createObjectURL对它无效。

修改后的完整代码实现 #

你需要在getUserMedia的成功回调里，根据isUsingPlugin的状态来适配不同的视频源设置方式，同时注意IE11的特殊限制：

import React from 'react'
import { render } from 'react-dom'

class App extends React.Component {
  state = {
    toggle: false,
  }

  componentDidMount() {
    AdapterJS.webRTCReady(isUsingPlugin => {
      console.log('isUsingPlugin....', isUsingPlugin)
      navigator.getUserMedia({
        video: {
          mandatory: {
            maxWidth: 640,
          },
          optional: [
            { maxFrameRate: 30 }, // 注意：IE11和Temasys插件不支持120fps这么高的帧率，建议调低到合理范围
            { minFrameRate: 15 },
          ],
        },
      }, (st) => {
        try {
          if ('srcObject' in this.videoRef) {
            // 现代浏览器优先使用标准API
            this.videoRef.srcObject = st;
          } else {
            // 清理旧URL避免内存泄漏
            if (this.videoRef.src) {
              isUsingPlugin 
                ? AdapterJS.revokeObjectURL(this.videoRef.src) 
                : window.URL.revokeObjectURL(this.videoRef.src);
            }
            // IE11 + Temasys插件的专属处理
            if (isUsingPlugin) {
              // 使用插件提供的toURL()生成兼容的视频源
              this.videoRef.src = st.toURL();
              // 也可以用AdapterJS封装的createObjectURL
              // this.videoRef.src = AdapterJS.createObjectURL(st);
            } else {
              // 其他不支持srcObject的旧浏览器
              this.videoRef.src = window.URL.createObjectURL(st);
            }
          }
          // IE11对autoPlay支持有限，手动触发播放更可靠
          setTimeout(() => {
            this.videoRef.play().catch(err => console.error('播放失败:', err));
          }, 100);
        } catch (eee) {
          console.error(eee)
        }
        this.setState({ toggle: !this.state.toggle })
      }, (error) => {
        console.log('error....', error)
      })
    })
  }

  setRef = ref => {
    this.videoRef = ref
  }

  render() {
    return (
      <div>
        <video ref={this.setRef} autoPlay={true} />
      </div>
    )
  }
}

render(
  <App />,
  document.getElementById('root'),
)

额外注意要点 #

• 帧率约束调整：你原来设置的120fps在IE11和Temasys插件中几乎无法支持，建议调整到15-30fps的合理区间，避免因约束不兼容导致获取流失败。
• 插件权限：确保IE11已经允许Temasys插件运行，浏览器默认可能会阻止插件，需要手动在地址栏的插件提示里启用。
• 内存泄漏预防：在组件卸载或者切换视频源时，记得调用对应的revokeObjectURL释放资源，插件生成的URL要用AdapterJS.revokeObjectURL，原生的用window.URL.revokeObjectURL。

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