Estoy tratando de hacer una captura de audio y video simple de la página en el navegador Chrome a través de la extensión de Chrome que estoy creando. Estoy ejecutando el siguiente código en un script de contenido.
No entiendo por qué tiene problemas para aceptar mi configuración, he incluido audio y video, pero todavía se queja de que
Uncaught TypeError: Failed to execute 'webkitGetUserMedia' on 'Navigator': At least one of audio and video must be requested at chooseDesktopMediaaquí está el código que probé:
chooseDesktopMedia(); function chooseDesktopMedia(){ navigator.webkitGetUserMedia( ["screen"] , function onSuccess(stream) { showScreenShare( { audio: true, video: { mandatory: { chromeMediaSource: 'desktop', chromeMediaSourceId: streamId } } } ); }, function onError(e) { console.error(e); alert('Failed to get user media.'); }); } function showScreenShare(conf){ var ve = document.getElementById("screen-share"); navigator.mediaDevices.getUserMedia(conf) .then(function(stream){ var url = window.URL.createObjectURL(stream); ve.src = url; }) .catch(function(e){ console.log(e); alert(e); }); }no creo que haya algo asi
navigator.mediaDevices.getUserMedia(['screen'])o tal vez soy ignorante al respecto, pero lo que significaba
TypeError no detectado: no se pudo ejecutar 'webkitGetUserMedia' en 'Navigator': se debe solicitar al menos uno de audio y video en chooseDesktopMedia
porque en su getUserMedia, no definió las restricciones con audio o video, que debería ser así
navigator.mediaDevices.getUserMedia({ audio: true, video: true }) .then(function(mediaStream) { //... }; })Por otro lado, para ejecutar la captura de pantalla, accederá a la API de captura de pantalla con getDisplayMedia(), no getUserMedia()
async function startCapture(displayMediaOptions) { let captureStream = null; try { captureStream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions); } catch(err) { console.error("Error: " + err); } return captureStream; }debido a la política de permisos, no puedo ejecutar el ejemplo en SO fragmentos, pero lo que puede hacer para probar esto, copie el código a continuación, abra su consola en las herramientas de desarrollo, luego ejecute esto
*descargo de responsabilidad: corre bajo tu propio riesgo
let getCanvas = document.getElementById('canvas') if (getCanvas == undefined) { var videoElem = document.createElement("video"); videoElem.setAttribute("id", "canvas"); videoElem.setAttribute("autoplay", true); videoElem.style.width = '98%' videoElem.style.maxWidth = '860px' videoElem.style.position = 'fixed' videoElem.style.zIndex = '99999' videoElem.style.top = '0' videoElem.style.left = '0' document.body.insertBefore(videoElem, document.body.firstChild) } var displayMediaOptions = { video: { cursor: "always" }, audio: false }; async function startCapture() { let canvas = document.getElementById('canvas') try { canvas.srcObject = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions); dumpOptionsInfo(canvas); } catch (err) { console.error("Error: " + err); } } function dumpOptionsInfo(canvas) { const videoTrack = canvas.srcObject.getVideoTracks()[0]; videoTrack.onended = function() { canvas.remove() }; console.info("Track settings:"); console.info(JSON.stringify(videoTrack.getSettings(), null, 2)); console.info("Track constraints:"); console.info(JSON.stringify(videoTrack.getConstraints(), null, 2)); } await startCapture()