Babylon使用麥克風(fēng)并處理常見問題解決
引言
在Babylon.js中媒體設(shè)備流使用起來有很多坑,我們將在本文中逐一說明這些坑并提供相應(yīng)的解決方案。
問題1:Property 'constraints' does not exist on type 'Window & typeof globalThis'.
在比較新的瀏覽器中,navigator對象中的getUserMedia方法已經(jīng)被廢棄了。取而代之的是navigator.mediaDevices.getUserMedia(),并且constraints應(yīng)該作為參數(shù)傳入。
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)
如果在使用媒體設(shè)備流時,你遇到了“Property 'stream' does not exist on type 'Window & typeof globalThis'.ts(2339)” 這個問題出現(xiàn)在TypeScript項目中。因為該類型Script不認識window.stream, 所以我們需要將它聲明為any類型。解決方法如下:
(window as any).stream = stream;
這讓編譯器知道 window 對象現(xiàn)在具有一個名為stream的屬性。
問題3: Property 'oninactive' does not exist on type 'MediaStream'.ts(2339)
在較新版本的Web API中,MediaStream
對象不再包含oninactive
屬性,需要更改事件監(jiān)聽方式。 解決方法如下:
stream.addEventListener('inactive', () => { console.log('Stream ended ... ...'); });
而不是
stream.oninactive = () => { console.log('Stream ended ... ...'); };
此更改暴露了更多事件,同時也需要更改您的代碼來處理它們。
總結(jié)
在 Babylon.js 中,使用媒體設(shè)備流時出現(xiàn)的問題通常是由于您沒有根據(jù)最新的約定執(zhí)行操作,或者由于 TypeScript 編譯器不知道您所做的更改而導(dǎo)致的。通過遵循我們提供的指南和解決方案,您應(yīng)該能夠輕松地解決這些問題。
示例源碼(修改前):
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 = window.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.oninactive = function() { console.log('Stream ended'); }; window.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; }
示例源碼(修改后):
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; }
以上就是Babylon使用麥克風(fēng)并處理常見問題解決的詳細內(nèi)容,更多關(guān)于Babylon麥克風(fēng)常見問題的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Javascript 正則表達式校驗數(shù)字的簡單實例
下面小編就為大家?guī)硪黄狫avascript 正則表達式校驗數(shù)字的簡單實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-11-11javascript操作Cookie(設(shè)置、讀取、刪除)方法詳解
這篇文章主要詳細向大家介紹了javascript操作Cookie的方法,包括設(shè)置、讀取、刪除操作,十分的細致全面,附上示例,是篇非常不錯的文章,這里推薦給大家。2015-03-03jquery插件bootstrapValidator數(shù)據(jù)驗證詳解
這篇文章主要為大家詳細介紹了jquery插件bootstrapValidator數(shù)據(jù)驗證使用教程,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-11-11