英文:
Simple app showing front camera video feed not working in Cordova Android
问题
在 www/index.html 中：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Camera App</title>
</head>
<body>
<video id="videoElement"></video>
<script src="js/app.js"></script>
</body>
</html>
在 www/js/app.js 中：
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady() {
// Get the video element
var videoElement = document.getElementById('videoElement');
// Set the source of the video to the device's front camera
navigator.camera.getPicture(
function successCallback(imageData) {
videoElement.src = "data:image/jpeg;base64," + imageData;
videoElement.play();
},
function errorCallback(error) {
alert('Unable to get the camera: ' + error);
},
{
quality: 50,
destinationType: Camera.DestinationType.DATA_URL,
sourceType: Camera.PictureSourceType.CAMERA,
cameraDirection: Camera.Direction.FRONT
}
);
}
在 config.xml 中添加：
<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" android:required="true" />
<uses-feature android:name="android.hardware.camera.front" android:required="true" />
希望能帮到你。
英文:
I have done some research in different sites but I have not seen an answer that works. Maybe this github issue might be leading to where I want. I have been trying to make a simple android app that when opened, it shows the front or back camera (it shouldn't matter) output (video). I do not have a lot of experience with cordova nor android apps in general.
To recreate this:
cordova create my-camera-app com.example.mycameraapp MyCameraApp
cd my-camera-app
cordova platform add android
cordova plugin add cordova-plugin-camera
And now in www/index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Camera App</title>
</head>
<body>
<video id="videoElement"></video>
<script src="js/app.js"></script>
</body>
</html>
and www/js/app.js:
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady() {
// Get the video element
var videoElement = document.getElementById('videoElement');
// Set the source of the video to the device's front camera
navigator.camera.getPicture(
function successCallback(imageData) {
videoElement.src = "data:image/jpeg;base64," + imageData;
videoElement.play();
},
function errorCallback(error) {
alert('Unable to get the camera: ' + error);
},
{
quality: 50,
destinationType: Camera.DestinationType.DATA_URL,
sourceType: Camera.PictureSourceType.CAMERA,
cameraDirection: Camera.Direction.FRONT
}
);
}
Finally adding to the config.xml file:
<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" android:required="true" />
<uses-feature android:name="android.hardware.camera.front" android:required="true" />
And running with the device connected to the pc: cordova run android
As you can see, it's nothing fancy as I just want to have the baseline working before doing anything else. But it is not working. I just get the symbol of the videoplayer in the app, but nothing else is happening nor can I press anything. I have tried in two different android devices (Lenovo tablet and Samsung phone), as I saw in my research that compatibility with the device can be the issue sometimes.
In case you also want to see the complete config.xml file:
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.example.mycameraapp" version="1.0.0" xmlns="http://www.w3.org/n>
<name>My Camera App</name>
<description>A simple app that displays the front camera video stream</descri>
<author email="youremail@example.com" href="http://example.com/">Your Name</a>
<content src="index.html" />
<access origin="*" />
<platform name="android">
<preference name="android-minSdkVersion" value="21" />
<preference name="android-targetSdkVersion" value="31" />
<preference name="android-build-tool" value="29.0.2" />
<preference name="android-enableHybridWebView" value="true" />
<preference name="android-useLegacyWhitelist" value="true" />
<allow-intent href="market:*" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.front" />
</platform>
</widget>
答案1
得分: 1
你不能通过拍照并将其放入视频元素来显示相机反馈。这不像你想象的那么简单。如果你想显示视频反馈，你需要使用
navigator.mediaDevices.getUserMedia
然后将流转换为 MediaStream，将 MediaStreamTrack 添加到 MediaStream，然后将轨道/流链接到视频元素。
查看 https://developer.mozilla.org/en-US/docs/Web/API/MediaStream
英文:
You cannot display the camera feed with taking a picture and stuffing it to the video element. It's not as straight forward as you think it is. If you are trying to display the video feed, you need to use
navigator.mediaDevices.getUserMedia
Then convert the stream into a MediaStream and add MediaStreamTrack to the MediaStream then link the tracks/stream to the video element.
Check out https://developer.mozilla.org/en-US/docs/Web/API/MediaStream
答案2
得分: 0
我终于成功解决了这个问题。检查一下 platforms/android/app/src/main/AndroidManifest.xml 文件，添加以下内容可能是个好主意：
<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />
但我不确定是否必要。感谢 @Eric 的回答，我能够朝特定方向搜索到有效的代码。
我在 index.html 文件中完成所有操作：
let constraintObj = {
audio: false,
video: {
facingMode: "user",
width: { min: 640, ideal: 1280, max: 1920 },
height: { min: 480, ideal: 720, max: 1080 },
},
};
navigator.mediaDevices.getUserMedia(constraintObj)
.then(function (mediaStreamObj) {
let video = document.getElementById('video');
video.srcObject = mediaStreamObj;
video.onloadedmetadata = function (ev) {
video.play();
};
})
.catch(function (error) {
console.error('Camera error: ' + error);
});
英文:
I finally managed to solve this. It might be smart to check the platforms/android/app/src/main/AndroidManifest.xml file and add
<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />
But I am not sure if it's necessary. Code that worked, thanks to @Eric's answer, I was able to search in a specific direction.
I do everything in the index.html file:
let constraintObj = {
audio: false,
video: {
facingMode: "user",
width: { min: 640, ideal: 1280, max: 1920 },
height: { min: 480, ideal: 720, max: 1080 },
},
};
navigator.mediaDevices.getUserMedia(constraintObj)
.then(function (mediaStreamObj) {
let video = document.getElementById('video');
video.srcObject = mediaStreamObj;
video.onloadedmetadata = function (ev) {
video.play();
};
})
.catch(function (error) {
console.error('Camera error: ' + error);
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论