We recently asked if someone had the code for the CE Webcam example from Yisrael. We found the code and are requesting help to make it more advanced. We need help making it so the users are able to take a snapshot of their camera and record their camera, probably using buttons like btnCam and btnMic on the page-side, if you know what we mean. The code is presented below and anyone who is interested, we would love the help!
// Page code:
$w.onReady(function () {
let camStatus = 'on';
let micStatus = 'off';
$w("#btnCam").onClick(() => {
camStatus = (camStatus === 'off') ? 'on' : 'off';
console.log('camStatus', camStatus);
$w('#ceWebcam').setAttribute('cam', camStatus);
});
$w("#btnMic").onClick(() => {
micStatus = (micStatus === 'off') ? 'on' : 'off';
console.log('micStatus', micStatus);
$w('#ceWebcam').setAttribute('mic', micStatus);
});
});
// ce-webcam.js:
const template = document.createElement('template');
template.innerHTML = `
<style>
*{
background-color: #658EA9;
}
#videoCam {
width: 630px;
height: 300px;
margin-left: 0px;
border: 3px solid #ccc;
background: black;
}
#startBtn {
margin-left: 280px;
width: 120px;
height: 45px;
cursor: pointer;
font-weight: bold;
}
#startBtn:hover{
background-color: #647C90;
color: red;
}
</style>
<div>
<br/><br/>
<center>
<video id="videoCam"></video>
</center>
<br/><br/>
</div>
`;
class CEWebCam extends HTMLElement {
constructor() {
super();
this._shadowRoot = this.attachShadow({ mode: 'open' });
this._shadowRoot.appendChild(template.content.cloneNode(true));
}
connectedCallback() {
this.render();
}
get cam() {
return this.getAttribute('cam');
}
set cam(value) {
this.setAttribute('cam', value);
}
get mic() {
return this.getAttribute('mic');
}
set mic(value) {
this.setAttribute('mic', value);
}
static get observedAttributes() {
return ['cam', 'mic'];
}
attributeChangedCallback(name, oldVal, newVal) {
let cam = (this.cam === 'on') ? true : false;
let mic = (this.mic === 'on') ? true : false;
if (name === 'cam') {
cam = (newVal === 'on') ? true : false;
}
if (name === 'mic') {
mic = (newVal === 'on') ? true : false;
}
// for every attr change, we stop (and disconnect) all of the tracks
// we then render again which will start up the webcam with the new attrs
let video = this._shadowRoot.getElementById('videoCam');
let mediaStream;
if (video.srcObject !== undefined && video.srcObject !== null) {
mediaStream = video.srcObject;
const tracks = mediaStream.getTracks();
if (tracks != undefined) {
tracks.forEach((track) => {
track.stop();
});
this.render();
}
}
}
render() {
let video = this._shadowRoot.getElementById('videoCam');
let All_mediaDevices = navigator.mediaDevices
if (!All_mediaDevices || !All_mediaDevices.getUserMedia) {
console.log("getUserMedia() not supported.");
return;
}
let cam = (this.cam === 'on') ? true : false;
let mic = (this.mic === 'on') ? true : false;
All_mediaDevices.getUserMedia({
audio: mic,
video: cam
})
.then(function (vidStream) {
if ("srcObject" in video) {
video.srcObject = vidStream;
} else {
video.src = window.URL.createObjectURL(vidStream);
}
video.onloadedmetadata = function (e) {
video.play();
};
})
.catch(function (e) {
console.log('*** ' + e.name + ": " + e.message);
});
}
}
window.customElements.define('ce-webcam', CEWebCam);