diff --git a/media/JSCamera/README.md b/media/JSCamera/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..edb52915f6e55f66135a02a0c8b0fcffc4fdb8b9
--- /dev/null
+++ b/media/JSCamera/README.md
@@ -0,0 +1,16 @@
+# JsCamera
+
+### Introduction
+
+ This sample shows how to use the JS UI component **\<camera>** to implement take photo.
+
+### Usage
+
+1. Start the sample app. The **\<camera>** component is displayed is loaded. At this time, the camera defaults to the back state.
+
+2. Click the front button to switch the front camera, and click to turn on/off the flash.
+
+
+### Constraints
+
+This sample can only be run on standard-system devices.
diff --git a/media/JSCamera/README_zh.md b/media/JSCamera/README_zh.md
new file mode 100644
index 0000000000000000000000000000000000000000..dc21a854900a32fd2eb3a3fc441a231c53f89e70
--- /dev/null
+++ b/media/JSCamera/README_zh.md
@@ -0,0 +1,28 @@
+# 摄像头拍照、前后置切换、打开/关闭手电筒
+
+### 简介
+
+ 此Demo使用JS UI中的<camera/>组件，实现摄像头拍照、前后切换、手电筒。实现效果如下：
+
+![main](screenshots/device/main.png)
+
+### 相关概念
+
+camera：摄像头组件，通过在布局中使用camera组件，设置前后置摄像头、打开/关闭手电筒功能。
+
+### 相关权限
+
+不涉及。
+
+### 使用说明
+
+1.启动应用，界面展示<camera/>组件，加载手机摄像头，此时摄像头默认为后置状态。
+
+2.点击前置按钮切换前面摄像头，点击打开/关闭手电筒。
+
+
+### 约束与限制
+
+1.本示例仅支持标准系统上运行。
+
+2.本示例需要使用DevEco Studio 3.0 Beta3 (Build Version: 3.0.0.901, built on May 30, 2022)才可编译运行。
\ No newline at end of file
diff --git a/media/JSCamera/entry/build.gradle b/media/JSCamera/entry/build.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..bec07a971bacff4b20aa5f0b9e895fe6a22f22b9
--- /dev/null
+++ b/media/JSCamera/entry/build.gradle
@@ -0,0 +1,21 @@
+apply plugin: 'com.huawei.ohos.hap'
+//For instructions on signature configuration, see https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ide_debug_device-0000001053822404#section1112183053510
+ohos {
+    compileSdkVersion 7
+    defaultConfig {
+        compatibleSdkVersion 8
+    }
+    buildTypes {
+        release {
+            proguardOpt {
+                proguardEnabled false
+                rulesFiles 'proguard-rules.pro'
+            }
+        }
+    }
+}
+
+dependencies {
+    implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])
+    testImplementation 'junit:junit:4.13.1'
+}
diff --git a/media/JSCamera/entry/package.json b/media/JSCamera/entry/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..0967ef424bce6791893e9a57bb952f80fd536e93
--- /dev/null
+++ b/media/JSCamera/entry/package.json
@@ -0,0 +1 @@
+{}
diff --git a/media/JSCamera/entry/proguard-rules.pro b/media/JSCamera/entry/proguard-rules.pro
new file mode 100644
index 0000000000000000000000000000000000000000..f7666e47561d514b2a76d5a7dfbb43ede86da92a
--- /dev/null
+++ b/media/JSCamera/entry/proguard-rules.pro
@@ -0,0 +1 @@
+# config module specific ProGuard rules here.
\ No newline at end of file
diff --git a/media/JSCamera/entry/src/main/config.json b/media/JSCamera/entry/src/main/config.json
new file mode 100644
index 0000000000000000000000000000000000000000..6793478cf361a77736cfac1fea18c8db5fb29315
--- /dev/null
+++ b/media/JSCamera/entry/src/main/config.json
@@ -0,0 +1,62 @@
+{
+  "app": {
+    "bundleName": "com.example.jscamera",
+    "vendor": "example",
+    "version": {
+      "code": 1000000,
+      "name": "1.0.0"
+    }
+  },
+  "deviceConfig": {},
+  "module": {
+    "package": "com.example.jscamera",
+    "name": ".MyApplication",
+    "mainAbility": ".MainAbility",
+    "deviceType": [
+      "phone"
+    ],
+    "distro": {
+      "deliveryWithInstall": true,
+      "moduleName": "entry",
+      "moduleType": "entry",
+      "installationFree": false
+    },
+    "abilities": [
+      {
+        "skills": [
+          {
+            "entities": [
+              "entity.system.home"
+            ],
+            "actions": [
+              "action.system.home"
+            ]
+          }
+        ],
+        "orientation": "unspecified",
+        "visible": true,
+        "srcPath": "MainAbility",
+        "name": ".MainAbility",
+        "srcLanguage": "js",
+        "icon": "$media:icon",
+        "description": "$string:description_mainability",
+        "formsEnabled": false,
+        "label": "$string:entry_MainAbility",
+        "type": "page",
+        "launchType": "standard"
+      }
+    ],
+    "js": [
+      {
+        "pages": [
+          "pages/index/index"
+        ],
+        "name": ".MainAbility",
+        "window": {
+          "designWidth": 720,
+          "autoDesignWidth": false
+        }
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/media/JSCamera/entry/src/main/js/MainAbility/app.js b/media/JSCamera/entry/src/main/js/MainAbility/app.js
new file mode 100644
index 0000000000000000000000000000000000000000..6d060ffe5682c19fc83e2274a9e62cbc40a655f8
--- /dev/null
+++ b/media/JSCamera/entry/src/main/js/MainAbility/app.js
@@ -0,0 +1,8 @@
+export default {
+    onCreate() {
+        console.info("Application onCreate");
+    },
+    onDestroy() {
+        console.info("Application onDestroy");
+    }
+};
diff --git a/media/JSCamera/entry/src/main/js/MainAbility/i18n/en-US.json b/media/JSCamera/entry/src/main/js/MainAbility/i18n/en-US.json
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/media/JSCamera/entry/src/main/js/MainAbility/i18n/zh-CN.json b/media/JSCamera/entry/src/main/js/MainAbility/i18n/zh-CN.json
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/media/JSCamera/entry/src/main/js/MainAbility/pages/index/index.css b/media/JSCamera/entry/src/main/js/MainAbility/pages/index/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..ccd07958f3483a1019609d960645213b750ec18d
--- /dev/null
+++ b/media/JSCamera/entry/src/main/js/MainAbility/pages/index/index.css
@@ -0,0 +1,19 @@
+.container {
+   width: 100%;
+   display: flex;
+   flex-direction: column;
+   align-items: center;
+   justify-content: center;
+   margin-top: 104px;
+}
+
+.css_camera{
+    width: 380px;
+    height: 380px;
+}
+
+.css_button{
+    margin-top: 50px;
+    width: 200px;
+    height: 100px;
+}
\ No newline at end of file
diff --git a/media/JSCamera/entry/src/main/js/MainAbility/pages/index/index.hml b/media/JSCamera/entry/src/main/js/MainAbility/pages/index/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..5418d3f21fb8d90cc4a15ff22ce9627ee1276802
--- /dev/null
+++ b/media/JSCamera/entry/src/main/js/MainAbility/pages/index/index.hml
@@ -0,0 +1,9 @@
+<div class="container">
+    <camera id="cameraId" class="css_camera" flash="{{flash}}" deviceposition="{{position}}" @error="cameraError">
+    </camera>
+    <button class="css_button" value="拍照" onclick="btn_takephoto"></button>
+    <button class="css_button" value="前置摄像头" onclick="btn_front"></button>
+    <button class="css_button" value="后置摄像头" onclick="btn_back"></button>
+    <button class="css_button" value="打开手电筒" onclick="btn_opentorch"></button>
+    <button class="css_button" value="关闭手电筒" onclick="btn_closetorch"></button>
+</div>
\ No newline at end of file
diff --git a/media/JSCamera/entry/src/main/js/MainAbility/pages/index/index.js b/media/JSCamera/entry/src/main/js/MainAbility/pages/index/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..85958305e0a8a13bdf13edf2e3520dd0c7ec474c
--- /dev/null
+++ b/media/JSCamera/entry/src/main/js/MainAbility/pages/index/index.js
@@ -0,0 +1,44 @@
+import prompt from '@system.prompt';
+export default {
+    data: {
+        position: 'back',
+        flash: 'on'
+    },
+    cameraError() {
+        prompt.showToast({
+            message: "授权失败！"
+        });
+    },
+    btn_takephoto() {
+        this.$element('cameraId').takePhoto({ quality: 'normal', success: this.takephoto_success, fail: this.takephoto_fail});
+    },
+    takephoto_success(e) {
+        prompt.showToast({
+            message: "拍照成功" + e.uri
+        });
+    },
+    takephoto_fail(e) {
+        prompt.showToast({
+            message: "拍照失败"
+        });
+    },
+    btn_front() {
+        this.position = 'front'
+        console.log("click camera front")
+    },
+    btn_back() {
+        this.position = 'back'
+        console.log("click camera back")
+    },
+    btn_opentorch() {
+        this.flash = 'torch'
+        console.log("click camera open torch")
+    },
+    btn_closetorch() {
+        this.flash = 'on'
+        console.log("click camera close torch")
+    }
+}
+
+
+
diff --git a/media/JSCamera/entry/src/main/resources/base/element/string.json b/media/JSCamera/entry/src/main/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..610d89afcb84069982cf1fd49782a75e2d0ef089
--- /dev/null
+++ b/media/JSCamera/entry/src/main/resources/base/element/string.json
@@ -0,0 +1,12 @@
+{
+  "string": [
+    {
+      "name": "entry_MainAbility",
+      "value": "entry_MainAbility"
+    },
+    {
+      "name": "description_mainability",
+      "value": "JS_Empty Ability"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/media/JSCamera/entry/src/main/resources/base/media/icon.png b/media/JSCamera/entry/src/main/resources/base/media/icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..ce307a8827bd75456441ceb57d530e4c8d45d36c
Binary files /dev/null and b/media/JSCamera/entry/src/main/resources/base/media/icon.png differ
diff --git a/media/JSCamera/package.json b/media/JSCamera/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..0967ef424bce6791893e9a57bb952f80fd536e93
--- /dev/null
+++ b/media/JSCamera/package.json
@@ -0,0 +1 @@
+{}
diff --git a/media/JSCamera/screenshots/device/main.PNG b/media/JSCamera/screenshots/device/main.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..7f3eade83464c6e6d05126a2a47c8bf48444defd
Binary files /dev/null and b/media/JSCamera/screenshots/device/main.PNG differ