I'm aiming to develop an Outlook Add-in using Script Lab that allows users to record videos via email. My goal currently is to have the user click a button that will open their camera and display its output. When accessing the camera on a browser (i.e. Chrome), I can access the user's system camera via the following code:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>video app</title>
</head>
<body>
<!-- HTML DISPLAY CODE -->
<video id="video" src=""></video>
<button onclick="openCamera()">start recording</button>
<!-- JS LOGIC -->
<script src="index.js"></script>
</body>
</html>
index.js
function openCamera() {
const constraints = {
video: true,
audio: false
}
navigator.mediaDevices.getUserMedia(constraints)
.then(mediaStream => {
var video = document.querySelector("video");
video.srcObject = mediaStream;
video.onloadedmetadata = function(e) {
video.play();
};
})
.catch(error => {
console.log(error.name + ":" + error.message);
})
}
When running this same script as an Outlook Add-in (on Script Lab as well as running a local npm dev-server), Requests for the camera go straight to the catch block without even prompting the user for permission. This is the output:
PermissionDeniedError: null
My Question is: How do I need to change the above code to allow camera functionality via an Outlook-Addin
This error is due to a limitation of the underlying browser control that is being used to run the add-in. I believe Outlook is using Internet Explorer or Microsoft Edge (NOT Chromium-based). You should not get this error when you have a configuration where Outlook uses the new Chromium-based Edge browser to run your add-in. Documentation on the configuration/browsers for Outlook add-ins can be found here.