fix: move camera-view-container css to inline and update guide

felixindrawan · Felix-Dynamsoft · commit 6d9414b3df2a · 2024-09-16T11:07:27.000-07:00
diff --git a/hello-world/angular/README.md b/hello-world/angular/README.md
@@ -123,7 +123,11 @@ ng generate component video-capture
 
 ```html
 <!-- /src/app/video-capture/video-capture.component.html -->
-<div #cameraViewContainer class="camera-view-container"></div>
+<div
+  #cameraViewContainer
+  class="camera-view-container"
+  style="width: 100%; height: 70vh"
+></div>
 <br />
 Results:
 <div #results class="results"></div>
diff --git a/hello-world/angular/src/app/video-capture/video-capture.component.css b/hello-world/angular/src/app/video-capture/video-capture.component.css
@@ -1,8 +1,3 @@
-.camera-view-container {
-  width: 100%;
-  height: 70vh;
-}
-
 .results {
   width: 100%;
   height: 10vh;
diff --git a/hello-world/angular/src/app/video-capture/video-capture.component.html b/hello-world/angular/src/app/video-capture/video-capture.component.html
@@ -1,4 +1,8 @@
-<div #cameraViewContainer class="camera-view-container"></div>
+<div
+  #cameraViewContainer
+  class="camera-view-container"
+  style="width: 100%; height: 70vh"
+></div>
 <br />
 Results:
 <div #results class="results"></div>
diff --git a/hello-world/electron/README.md b/hello-world/electron/README.md
@@ -121,9 +121,9 @@ Create an `index.html` file at the root folder, and define it like this:
     <link href="style.css" rel="stylesheet" />
     <script src="./node_modules/dynamsoft-barcode-reader-bundle/dist/dbr.bundle.js"></script>
   </head>
-  <body>
+  <body style="text-align: center">
     <h1>Hello World for Electron</h1>
-    <div id="camera-view-container"></div>
+    <div id="camera-view-container" style="width: 100%; height: 80vh"></div>
     <br />
     Results:
     <div id="results"></div>
diff --git a/hello-world/electron/index.html b/hello-world/electron/index.html
@@ -11,9 +11,9 @@
     <link href="style.css" rel="stylesheet" />
     <script src="./node_modules/dynamsoft-barcode-reader-bundle/dist/dbr.bundle.js"></script>
   </head>
-  <body>
+  <body style="text-align: center">
     <h1>Hello World for Electron</h1>
-    <div id="camera-view-container"></div>
+    <div id="camera-view-container" style="width: 100%; height: 80vh"></div>
     <br />
     Results:
     <div id="results"></div>
diff --git a/hello-world/electron/style.css b/hello-world/electron/style.css
@@ -1,12 +1,3 @@
-body {
-  text-align: center;
-}
-
-#camera-view-container {
-  width: 100%;
-  height: 80vh;
-}
-
 #results {
   width: 100%;
   height: 10vh;
diff --git a/hello-world/next/README.md b/hello-world/next/README.md
@@ -222,7 +222,14 @@ function VideoCapture() {
 
   return (
     <div>
-      <div ref={cameraViewContainer} className="camera-view-container"></div>
+      <div
+        ref={cameraViewContainer}
+        style={{
+          width: "100%",
+          height: "70vh",
+          background: "#eee",
+        }}
+      ></div>
       Results:
       <br />
       <div ref={resultsContainer} className="results"></div>
diff --git a/hello-world/next/components/VideoCapture/VideoCapture.css b/hello-world/next/components/VideoCapture/VideoCapture.css
@@ -1,9 +1,3 @@
-.camera-view-container {
-  width: 100%;
-  height: 70vh;
-  background: #eee;
-}
-
 .results {
   width: 100%;
   height: 10vh;
diff --git a/hello-world/next/components/VideoCapture/VideoCapture.tsx b/hello-world/next/components/VideoCapture/VideoCapture.tsx
@@ -104,7 +104,14 @@ function VideoCapture() {
 
   return (
     <div>
-      <div ref={cameraViewContainer} className="camera-view-container"></div>
+      <div
+        ref={cameraViewContainer}
+        style={{
+          width: "100%",
+          height: "70vh",
+          background: "#eee",
+        }}
+      ></div>
       <br />
       Results:
       <div ref={resultsContainer} className="results"></div>
diff --git a/hello-world/nuxt/README.md b/hello-world/nuxt/README.md
@@ -199,7 +199,7 @@ onBeforeUnmount(async () => {
 
 <template>
   <div>
-    <div ref="cameraViewContainer" class="camera-view-container"></div>
+    <div ref="cameraViewContainer" style="width: 100%; height: 70vh; background: #eee;"></div>
     <br />
     Results:
     <div ref="resultsContainer" class="results"></div>
diff --git a/hello-world/nuxt/components/VideoCapture.client.vue b/hello-world/nuxt/components/VideoCapture.client.vue
@@ -91,20 +91,14 @@ onBeforeUnmount(async () => {
 
 <template>
   <div>
-    <div ref="cameraViewContainer" class="camera-view-container"></div>
+    <div ref="cameraViewContainer" style="width: 100%; height: 70vh; background: #eee;"></div>
     <br />
     Results:
     <div ref="resultsContainer" class="results"></div>
   </div>
 </template>
 
 <style scoped>
-.camera-view-container {
-  width: 100%;
-  height: 70vh;
-  background: #eee;
-}
-
 .results {
   width: 100%;
   height: 10vh;
diff --git a/hello-world/react-hooks/README.md b/hello-world/react-hooks/README.md
@@ -208,7 +208,7 @@ function VideoCapture() {
 
   return (
     <div>
-      <div ref={cameraViewContainer} className="camera-view-container"></div>
+      <div ref={cameraViewContainer} style={{  width: "100%", height: "70vh" }}></div>
       <br />
       Results:
       <div ref={resultsContainer} className="results"></div>
diff --git a/hello-world/react-hooks/src/components/VideoCapture/VideoCapture.css b/hello-world/react-hooks/src/components/VideoCapture/VideoCapture.css
@@ -1,8 +1,3 @@
-.camera-view-container {
-  width: 100%;
-  height: 70vh;
-}
-
 .results {
   width: 100%;
   height: 10vh;
diff --git a/hello-world/react-hooks/src/components/VideoCapture/VideoCapture.tsx b/hello-world/react-hooks/src/components/VideoCapture/VideoCapture.tsx
@@ -104,7 +104,7 @@ function VideoCapture() {
 
   return (
     <div>
-      <div ref={cameraViewContainer} className="camera-view-container"></div>
+      <div ref={cameraViewContainer} style={{  width: "100%", height: "70vh" }}></div>
       <br />
       Results:
       <div ref={resultsContainer} className="results"></div>
diff --git a/hello-world/react/README.md b/hello-world/react/README.md
@@ -210,7 +210,7 @@ class VideoCapture extends React.Component {
   render() {
     return (
       <div>
-        <div ref={this.cameraViewContainer} className="camera-view-container"></div>
+        <div ref={this.cameraViewContainer} style={{  width: "100%", height: "70vh" }}></div>
         <br />
         Results:
         <div ref={this.resultsContainer} className="results"></div>
diff --git a/hello-world/react/src/components/VideoCapture/VideoCapture.css b/hello-world/react/src/components/VideoCapture/VideoCapture.css
@@ -1,8 +1,3 @@
-.camera-view-container {
-  width: 100%;
-  height: 70vh;
-}
-
 .results {
   width: 100%;
   height: 10vh;
diff --git a/hello-world/react/src/components/VideoCapture/VideoCapture.tsx b/hello-world/react/src/components/VideoCapture/VideoCapture.tsx
@@ -106,7 +106,7 @@ class VideoCapture extends React.Component {
   render() {
     return (
       <div>
-        <div ref={this.cameraViewContainer} className="camera-view-container"></div>
+        <div ref={this.cameraViewContainer} style={{  width: "100%", height: "70vh" }}></div>
         <br />
         Results:
         <div ref={this.resultsContainer} className="results"></div>
diff --git a/hello-world/svelte/README.md b/hello-world/svelte/README.md
@@ -210,9 +210,8 @@ CoreModule.loadWasm(["DBR"]);
 </script>
 
 <div>
-  <div bind:this={cameraViewContainer} class="camera-view-container"></div>
-  <br />
-  Results:
+  <div bind:this={cameraViewContainer} style="width: 100%; height: 70vh; background: #eee;"></div>
+  Results:<br />
   <div bind:this={resultsContainer} class="results"></div>
 </div>
 ```
diff --git a/hello-world/svelte/src/components/VideoCapture.svelte b/hello-world/svelte/src/components/VideoCapture.svelte
@@ -102,17 +102,12 @@
 </script>
 
 <div>
-  <div bind:this={cameraViewContainer} class="camera-view-container"></div>
+  <div bind:this={cameraViewContainer} style="width: 100%; height: 70vh; background: #eee;"></div>
   Results:<br />
   <div bind:this={resultsContainer} class="results"></div>
 </div>
 
 <style>
-  .camera-view-container {
-    width: 100%;
-    height: 70vh;
-    background: #eee;
-  }
   .results {
     width: 100%;
     height: 10vh;
diff --git a/hello-world/vue/README.md b/hello-world/vue/README.md
@@ -208,7 +208,7 @@ onBeforeUnmount(async () => {
 
 <template>
   <div>
-    <div ref="cameraViewContainer" class="camera-view-container"></div>
+    <div ref="cameraViewContainer" style="width: 100%; height: 70vh; background: #eee;"></div>
     <br />
     Results:
     <div ref="resultsContainer" class="results"></div>
diff --git a/hello-world/vue/src/components/VideoCapture.vue b/hello-world/vue/src/components/VideoCapture.vue
@@ -91,20 +91,14 @@ onBeforeUnmount(async () => {
 
 <template>
   <div>
-    <div ref="cameraViewContainer" class="camera-view-container"></div>
+    <div ref="cameraViewContainer" style="width: 100%; height: 70vh; background: #eee;"></div>
     <br />
     Results:
     <div ref="resultsContainer" class="results"></div>
   </div>
 </template>
 
 <style scoped>
-.camera-view-container {
-  width: 100%;
-  height: 70vh;
-  background: #eee;
-}
-
 .results {
   width: 100%;
   height: 10vh;
