Babylon使用麦克风并处理常见问题解决

引言

在Babylon.js中媒体设备流使用起来有很多坑，我们将在本文中逐一说明这些坑并提供相应的解决方案。

问题1：Property 'constraints' does not exist on type 'Window & typeof globalThis'.

在比较新的浏览器中，navigator对象中的getUserMedia方法已经被废弃了。取而代之的是navigator.mediaDevices.getUserMedia()，并且constraints应该作为参数传入。

const constraints = { audio: true, video: false };
navigator.mediaDevices.getUserMedia(constraints)

对于问题 Property 'constraints' does not exist on type 'Window & typeof globalThis'.ts(2339)。这是因为 TypeScript 没有识别到constraints变量的类型，可以尝试直接定义一个 const constraints 常量。

问题2： Property 'stream' does not exist on type 'Window & typeof globalThis'.ts(2339)

如果在使用媒体设备流时，你遇到了“Property 'stream' does not exist on type 'Window & typeof globalThis'.ts(2339)” 这个问题出现在TypeScript项目中。因为该类型Script不认识window.stream, 所以我们需要将它声明为any类型。解决方法如下：

(window as any).stream = stream;

这让编译器知道 window 对象现在具有一个名为stream的属性。

问题3： Property 'oninactive' does not exist on type 'MediaStream'.ts(2339)

在较新版本的Web API中，MediaStream对象不再包含oninactive属性，需要更改事件监听方式。 解决方法如下：

stream.addEventListener('inactive', () => {
   console.log('Stream ended ... ...');
});

而不是

stream.oninactive = () => {
   console.log('Stream ended ... ...');
};

此更改暴露了更多事件，同时也需要更改您的代码来处理它们。

loadingASoundFromTheMicrophone = (scene: Scene, canvas: HTMLCanvasElement) => {
       let engine = scene.getEngine();
       let freeCamera = new FreeCamera("freeCamera", new Vector3(0, 5, -10), scene);
       freeCamera.setTarget(Vector3.Zero());
       freeCamera.attachControl(canvas, true);
       let hemisphericLight = new HemisphericLight("hemisphericLight", new Vector3(0, 1, 0), scene);
       hemisphericLight.intensity = 0.7;
       let sphere = MeshBuilder.CreateSphere("sphere", {segments: 16, diameter: 2}, scene);
       const constraints = {  audio: true, video: false };
       function handleSuccess(stream: MediaStream) {
           const audioTracks = stream.getAudioTracks();
           console.log('Got stream with constraints:', constraints);
           console.log(`Using audio device: ${audioTracks[0].label}`);
           stream.addEventListener('inactive', () => {
               console.log('Stream ended ... ...');
           });
           (window as any).stream = stream; // make variable available to browser console
           var bjsSound = new Sound("mic", stream, scene);
           bjsSound.attachToMesh(sphere);
           bjsSound.play();
       }
       function handleError(error: any) {
           console.log('navigator.getUserMedia error: ', error);
       }
       navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);
       return scene;
   }

来源：https://juejin.cn/post/7216992973418774589