diff --git a/One-to-One-Video/Agora-Web-Tutorial-1to1-Webpack/src/common.js b/One-to-One-Video/Agora-Web-Tutorial-1to1-Webpack/src/common.js
index 04c73437..c21ea8f5 100644
--- a/One-to-One-Video/Agora-Web-Tutorial-1to1-Webpack/src/common.js
+++ b/One-to-One-Video/Agora-Web-Tutorial-1to1-Webpack/src/common.js
@@ -104,6 +104,19 @@ export function removeView (id) {
   }
 }
 
+export function requestPermission(next) {
+  const tempAudioVideoStream = AgoraRTC.createStream({ audio: true, video: true })
+  const callback = function (hasPermission) {
+    tempAudioVideoStream.close()
+    next(hasPermission)
+  }
+  tempAudioVideoStream.init(function () {
+    callback(true)
+  }, function () {
+    callback(false)
+  })
+}
+
 export function getDevices (next) {
   AgoraRTC.getDevices(function (items) {
     items.filter(function (item) {
diff --git a/One-to-One-Video/Agora-Web-Tutorial-1to1-Webpack/src/index.js b/One-to-One-Video/Agora-Web-Tutorial-1to1-Webpack/src/index.js
index 7e40b5f9..a9044af4 100644
--- a/One-to-One-Video/Agora-Web-Tutorial-1to1-Webpack/src/index.js
+++ b/One-to-One-Video/Agora-Web-Tutorial-1to1-Webpack/src/index.js
@@ -1,30 +1,35 @@
 import RTCClient from './rtc-client'
-import {getDevices, Toast, serializeFormData, validator, resolutions} from './common'
+import {requestPermission, getDevices, Toast, serializeFormData, validator, resolutions} from './common'
 import './assets/style.css'
 import * as M from 'materialize-css'
 // import {setFormData, parseFromSearch} from './searchParam';
 
-$(() => {  
-  getDevices(function (devices) {
-    devices.audios.forEach(function (audio) {
-      $('<option/>', {
-        value: audio.value,
-        text: audio.name,
-      }).appendTo('#microphoneId')
-    })
-    devices.videos.forEach(function (video) {
-      $('<option/>', {
-        value: video.value,
-        text: video.name,
-      }).appendTo('#cameraId')
-    })
-    resolutions.forEach(function (resolution) {
-      $('<option/>', {
-        value: resolution.value,
-        text: resolution.name
-      }).appendTo('#cameraResolution')
+$(() => {
+  requestPermission(function (hasPermission) {
+    if (!hasPermission) {
+      Toast.error('no camera or microphone permission!')
+    }
+    getDevices(function (devices) {
+      devices.audios.forEach(function (audio) {
+        $('<option/>', {
+          value: audio.value,
+          text: audio.name,
+        }).appendTo('#microphoneId')
+      })
+      devices.videos.forEach(function (video) {
+        $('<option/>', {
+          value: video.value,
+          text: video.name,
+        }).appendTo('#cameraId')
+      })
+      resolutions.forEach(function (resolution) {
+        $('<option/>', {
+          value: resolution.value,
+          text: resolution.name
+        }).appendTo('#cameraResolution')
+      })
+      M.AutoInit()
     })
-    M.AutoInit()
   })
 
   const fields = ['appID', 'channel']