IE 11 中的 getUserMedia 或 IE 11 中的 MediaStream

Question

我正在尝试借助 IE 11 中的 temasys 插件使用 getUserMedia 函数。getUserMedia returns IE 不支持的 MediaStream 实例.

这是我的示例代码：

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: 120 },
            { minFrameRate: 120 },
          ],
        },
      }, (st) => {
        try {
          this.videoRef.srcObject = st
        }
        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'),
)

st 是 MediaStream 的一个实例，IE 不支持。问题在线：

this.videoRef.srcObject = st

我也试过了

this.videoRef.src = window.URL.createObjectURL(st)

这在 IE 中也不起作用。

这里是 fiddle.

如何让它在 IE 上运行？任何帮助将不胜感激。

Answer 1

我希望您使用的是 WebRTC 适配器，它有助于标准化 API 来执行这些任务。

Temasys 拥有自己的适配器，该适配器建立在 WebRTC 适配器之上，并在保持相似界面的同时为其插件添加支持。

因此，IE 也将支持 MediaStream 和其他东西，因为它是由该适配器库定义的。

WebRTC 适配器JS：https://github.com/webrtc/adapter

Temasys AdapterJS：https://github.com/Temasys/AdapterJS

希望这能解决您的问题。

检查此示例代码以实现：https://github.com/Temasys/Google-WebRTC-Samples/blob/master/src/content/getusermedia/canvas-video/js/main.js

IE 11 中的 getUserMedia 或 IE 11 中的 MediaStream

getUserMedia in IE 11 or MediaStream in IE 11

html

javascript

internet-explorer-11

reactjs

temasys