HarmonyOS 鸿蒙Next H5拉起系统相机的样例代码

发布于 1周前 作者 itying888 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next H5拉起系统相机的样例代码

与别人技术交流后，别人需要拉起系统相机的demo代码，如何通过IR系统提供代码

Harmonyos Next教程
2 回复

【local.html】

<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="cameraImage()">唤起照相机</button>
<p id="demo"></p>
<script>
function cameraImage(){
let str2=cameraImageName.testCameraImage();
}
</script>
</body>
</html>

【index.ets】

import common from '@ohos.app.ability.common';
import web_webview from '@ohos.web.webview';

class cameraImage {
  constructor() {
  }

  testCameraImage(): string {
    const context = getContext(this) as common.UIAbilityContext
    context.startAbilityForResult({
      action:"ohos.want.action.imageCapture",
      parameters:{
        callBundleName:"com.hm.imageshow"
      }
    },(err,data) => {
      console.info("imageCapture:" + `${JSON.stringify(data)}`)
    })
    return '1221';
  }

}

@Entry
@Component
struct camera{
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  @State webCameraImage: cameraImage = new cameraImage();

  aboutToAppear(){
    // 配置Web开启调试模式
    web_webview.WebviewController.setWebDebuggingAccess(true);
  }

  build() {
    Column() {
      Web({ src: $rawfile('local.html'), controller: this.controller })
        .javaScriptAccess(true)
        .javaScriptProxy({
          object: this.webCameraImage,
          name: "cameraImageName",
          methodList: ["testCameraImage"],
          controller: this.controller
        })
    }
  }
}

更多关于HarmonyOS 鸿蒙Next H5拉起系统相机的样例代码的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，H5拉起系统相机的操作可以通过调用系统的能力接口实现。以下是一个简单的样例代码，展示了如何在H5页面中通过JavaScript拉起系统相机：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HarmonyOS H5 拉起系统相机</title>
</head>
<body>
    <button id="openCamera">打开相机</button>

    <script>
        document.getElementById('openCamera').addEventListener('click', function() {
            // 调用系统相机接口
            plus.io.resolveLocalFileSystemURL('_documents/', function(entry) {
                entry.getFile('tempCameraImage.jpg', {create: true, exclusive: false}, function(fileEntry) {
                    var camera = navigator.mediaDevices.getUserMedia({video: true});
                    camera.then(function(stream) {
                        // 此处仅为示例，实际需将stream保存为图片文件
                        // 注意：HarmonyOS H5中直接操作stream保存图片可能受限，需通过系统API或插件
                        console.log('相机已打开，stream:', stream);
                    }).catch(function(error) {
                        console.error('打开相机失败:', error);
                    });
                }, function(error) {
                    console.error('创建文件失败:', error);
                });
            }, function(error) {
                console.error('获取文件系统URL失败:', error);
            });
        });
    </script>
</body>
</html>

注意：上述代码仅为示例，实际在HarmonyOS H5环境中，直接操作getUserMedia可能受限，需通过系统提供的API或插件来实现。如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部