Hello!
I’m making a mobile app with backendless UI but I failed to find a component that would let me use a mobile phone camera. For example, in AppGyver there’s such a component. I’ve checked the integration with AppGyver but it’s only like Backendless backend to AppGyver frontend and no way to use AppGyver UI tools in Backendless UI tools.
Could you please advise how to use mobile phone camera in Backendless?
Hello @Evgeniy_Volkov
Now we don’t have “no-code” tools working with a mobile camera.
Now, this is only possible through the “custom components” in UI-Builder or with “Custom code block”
I’ve created a simple demo with it.
const button = buttonEl
const video = videoContainer.appendChild(document.createElement('video'))
const mediaDevices = navigator.mediaDevices
video.muted = true
button.addEventListener('click', () => {
// Accessing the user camera and video.
mediaDevices.getUserMedia({
video: true,
audio: true,
})
.then(stream => {
// Changing the source of video to current stream.
video.srcObject = stream
video.addEventListener('loadedmetadata', () => {
video.play()
})
})
.catch(alert)
})
We will discuss with the team to add some components with these features.
Regards,
Viktor
Thank you, that’s works fine!
In addition to the @viktor.liablin approach, I can propose another solution by creating a custom component
define(() => {
return function VideoCam({ component, eventHandlers }) {
const videoRef = React.useRef(null)
const startVideoStreaming = () => {
const videoEl = videoRef.current
navigator.mediaDevices.getUserMedia({
video: true,
audio: true,
})
.then(stream => {
// Changing the source of video to current stream.
videoEl.srcObject = stream
videoEl.addEventListener('loadedmetadata', () => {
videoEl.play()
})
})
.catch(alert)
}
return React.createElement('div', null,
React.createElement('video', { muted: true, ref: videoRef }),
React.createElement('button', { onClick: startVideoStreaming }, 'open camera')
)
}
});
Regards, Vlad
Thank you!