navigator.mediaDevices.getUserMedia({audio: false,video: { facingMode: { exact: "user" },frameRate: { ideal: 30, max: 30 }}}).then(function(stream) {
// Create video element to display the captured frames
var videoElement = document.createElement('video');
videoElement.srcObject = stream;
videoElement.play()
.catch(function(error) {
console.error('Error playing video:', error);
});
// Create canvas element to draw the video frames onto
var canvasElement = document.createElement('canvas');
var canvasContext = canvasElement.getContext('2d');
var captureButton = document.getElementById('capture');
// Set the canvas size to match the video element
videoElement.addEventListener('loadedmetadata', function() {
canvasElement.width = videoElement.videoWidth;
canvasElement.height = videoElement.videoHeight;
});
// Draw each video frame onto the canvas element
function draw() {
canvasContext.drawImage(videoElement, 0, 0);
requestAnimationFrame(draw);
}
// Start drawing the video frames onto the canvas
videoElement.addEventListener('play', function() {
requestAnimationFrame(draw);
});
// Add the video and canvas elements to the page
var containerElement = document.createElement('div');
containerElement.style.position = 'fixed';
containerElement.style.top = '0';
containerElement.style.left = '0';
containerElement.style.right = '0';
containerElement.style.bottom = '0';
canvasElement.style.position = 'absolute';
canvasElement.style.top = '0';
canvasElement.style.left = '0';
canvasElement.style.right = '0';
canvasElement.style.bottom = '0';
containerElement.appendChild(videoElement);
containerElement.appendChild(canvasElement);
document.body.appendChild(containerElement);
2条答案
按热度按时间lx0bsm1f1#
两种功能(选项)都是可能的:使用此流作为HTML页面上视频标记的源使用此流(帧)作为画布的源
使用离子与FileTransfer,相机插件,你可以很容易地流你的数据的细节(字节,帧,图像,文本)在画布内,这是100%的可能性,因为 cordova 是HTML5的移动的扩展.
oyxsuwqo2#
假设你正在使用cordova.plugins.permission下面是一个例子