https://docs-production-katalon.netlify.app/assets/js/6429cc42.cdc7d47e.js

1"use strict";(self.webpackChunkKatalon_Docs=self.webpackChunkKatalon_Docs||[]).push([[10750],{28453:(e,s,a)=>{a.d(s,{R:()=>i,x:()=>r});var t=a(96540);const l={},n=t.createContext(l);function i(e){const s=t.useContext(n);return t.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function r(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(l):e.components||l:i(e.components),t.createElement(n.Provider,{value:s},e.children)}},45252:(e,s,a)=>{a.r(s),a.d(s,{assets:()=>c,contentTitle:()=>o,default:()=>p,frontMatter:()=>r,metadata:()=>t,toc:()=>d});const t=JSON.parse('{"id":"test-reports/generate-test-reports/generate-browser-based-videos-in-katalon-studio-reports","title":"Generate browser-based videos in Katalon Studio reports","description":"Important Install FFmpeg library.","source":"@site/docs/katalon-studio/test-reports/generate-test-reports/generate-browser-based-videos-in-katalon-studio-reports.md","sourceDirName":"test-reports/generate-test-reports","slug":"/test-reports/generate-test-reports/generate-browser-based-videos-in-katalon-studio-reports","permalink":"/katalon-studio/test-reports/generate-test-reports/generate-browser-based-videos-in-katalon-studio-reports","draft":false,"unlisted":false,"tags":[],"version":"current","lastUpdatedAt":1775545163000,"frontMatter":{"title":"Generate browser-based videos in Katalon Studio reports"},"sidebar":"katalon-studio","previous":{"title":"View captured screenshots in Katalon Studio reports","permalink":"/katalon-studio/test-reports/view-test-reports/view-captured-screenshots-in-katalon-studio-reports"},"next":{"title":"Generate screen-based videos in Katalon Studio reports","permalink":"/katalon-studio/test-reports/generate-test-reports/generate-screen-based-videos-in-katalon-studio-reports"}}');var l=a(74848),n=a(28453),i=a(86025);const r={title:"Generate browser-based videos in Katalon Studio reports"},o=void 0,c={},d=[{value:"Enable browser-based recorder",id:"enable-browser-based-recorder",level:2},{value:'<a class="anchor_top_offset"></a>Install FFmpeg library',id:"install-ffmpeg-library",level:2},{value:'<a class="anchor_top_offset"></a>Add FFmpeg to PATH on Windows',id:"add-ffmpeg-to-path-on-windows",level:3},{value:'<a class="anchor_top_offset"></a>Build and commit a Docker image with FFmpeg installed',id:"build-and-commit-a-docker-image-with-ffmpeg-installed",level:3},{value:'<a class="anchor_top_offset"></a>View recorded videos',id:"view-recorded-videos",level:2},{value:"See also",id:"see-also",level:3}];function h(e){const s={a:"a",code:"code",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,n.R)(),...e.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)("div",{xmlns:"http://www.w3.org/1999/xhtml",className:"p",children:(0,l.jsxs)("div",{className:"note important note_important",children:[(0,l.jsx)("span",{className:"note__title",children:"Important:"})," ",(0,l.jsxs)("ul",{className:"ul",children:[(0,l.jsxs)("li",{className:"li",children:["You need an active ",(0,l.jsx)("span",{className:"ph",children:"Katalon Studio"})," license."]}),(0,l.jsxs)("li",{className:"li",children:["You need to install the FFmpeg library. See: ",(0,l.jsx)("a",{className:"xref",href:"#install-ffmpeg-library",children:"Install FFmpeg library"}),"."]})]})]})}),"\n",(0,l.jsxs)("div",{xmlns:"http://www.w3.org/1999/xhtml",className:"p",children:["You can use the browser-based recording feature in ",(0,l.jsx)("span",{className:"ph",children:"Katalon Studio"})," to capture videos of your test executions. This feature allows you to:",(0,l.jsxs)("ul",{className:"ul",children:[(0,l.jsx)("li",{className:"li",children:(0,l.jsx)("p",{className:"p",children:"Record video of browser window only (even if it is hidden behind another window)."})}),(0,l.jsxs)("li",{className:"li",children:[(0,l.jsxs)("p",{className:"p",children:["Record video of Headless browser. To learn more about Headless Browser Execution, see: ",(0,l.jsx)("a",{className:"xref",href:"/katalon-studio/execute-tests/headless-browsers-execution-in-katalon-studio",children:"Headless Browsers Execution"}),"."]})," "]}),(0,l.jsx)("li",{className:"li",children:(0,l.jsx)("p",{className:"p",children:" Record videos of multiple browsers simultaneously (for instance, parallel execution of Test Suite Collection)."})})]})]}),"\n",(0,l.jsxs)("div",{xmlns:"http://www.w3.org/1999/xhtml",className:"p",children:["This document shows you how to enable the browser-based recording feature in Katalon Studio and install FFmpeg as a third-party library for video encoding.",(0,l.jsxs)("div",{className:"note note note_note",children:[(0,l.jsx)("span",{className:"note__title",children:"Note:"})," ",(0,l.jsxs)("ul",{className:"ul",children:[(0,l.jsx)("li",{className:"li",children:"You can only record and watch videos for Web UI testing."}),(0,l.jsx)("li",{className:"li",children:"This feature supports test suite and test suite collection execution."}),(0,l.jsxs)("li",{className:"li",children:["This feature is available for Chrome, Microsoft Edge (Chromium-based), and Headless Chrome. To learn more about Headless Chrome, refer to the Google Developer website here: ",(0,l.jsx)("a",{className:"xref j-external-link",href:"https://developers.google.com/web/updates/2017/04/headless-chrome",target:"_blank",children:"Getting Started with Headless Chrome"}),"."]}),(0,l.jsxs)("li",{className:"li",children:["For screen-based recorder, see ",(0,l.jsx)("a",{className:"xref j-external-link",href:"https://docs.katalon.com/katalon-studio/test-reports/generate-test-reports/generate-screen-based-videos-in-katalon-studio-reports",target:"_blank",children:"Generate screen-based videos in Katalon Studio reports"}),"."]})]})]})]}),"\n",(0,l.jsx)(s.h2,{id:"enable-browser-based-recorder",children:"Enable browser-based recorder"}),"\n",(0,l.jsx)(s.p,{children:"To enable browser-based recorder in Katalon Studio, follow the steps below:"}),"\n",(0,l.jsxs)(s.ol,{children:["\n",(0,l.jsxs)(s.li,{children:["\n",(0,l.jsxs)(s.p,{children:["Go to ",(0,l.jsx)(s.strong,{children:"Project > Settings > Execution"}),"."]}),"\n"]}),"\n",(0,l.jsxs)(s.li,{children:["\n",(0,l.jsxs)(s.p,{children:["In the ",(0,l.jsx)(s.strong,{children:"During-Execution Options"})," panel:"]}),"\n"]}),"\n"]}),"\n",(0,l.jsxs)(s.ul,{children:["\n",(0,l.jsxs)(s.li,{children:["\n",(0,l.jsxs)(s.p,{children:["Enable Video Recorder by checking ",(0,l.jsx)(s.strong,{children:"Record video during execution"}),"."]}),"\n"]}),"\n",(0,l.jsxs)(s.li,{children:["\n",(0,l.jsxs)(s.p,{children:["Select ",(0,l.jsx)(s.strong,{children:"Record Type"})," as ",(0,l.jsx)(s.strong,{children:"Browser-based Recorder"}),"."]}),"\n"]}),"\n",(0,l.jsxs)(s.li,{children:["\n",(0,l.jsxs)(s.p,{children:["Specify the applicable test cases by choosing either ",(0,l.jsx)(s.strong,{children:"Failed test cases"})," or ",(0,l.jsx)(s.strong,{children:"All Test Cases"}),"."]}),"\n"]}),"\n",(0,l.jsxs)(s.li,{children:["\n",(0,l.jsx)(s.p,{children:"Specify video format and quality based on your preferences:"}),"\n",(0,l.jsxs)(s.ul,{children:["\n",(0,l.jsxs)(s.li,{children:[(0,l.jsx)(s.strong,{children:"Video format"}),": WEBM (",(0,l.jsx)(s.code,{children:".webm"}),"), AVI (",(0,l.jsx)(s.code,{children:".avi"}),"), MOV (",(0,l.jsx)(s.code,{children:".mov"}),"), or MP4 (",(0,l.jsx)(s.code,{children:".mp4"}),")."]}),"\n",(0,l.jsxs)(s.li,{children:[(0,l.jsx)(s.strong,{children:"Video quality"}),": Low; Medium or High."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,l.jsx)("img",{src:"https://tw-cdn.katalon.com/katalon-studio/Test%20report/Generate%20browser-based%20videos.png",alt:"browser-based recorder",width:"750"}),"\n",(0,l.jsxs)(s.ol,{start:"3",children:["\n",(0,l.jsxs)(s.li,{children:["\n",(0,l.jsxs)(s.p,{children:["Go to ",(0,l.jsx)(s.strong,{children:"Desired Capabilities > Web UI"}),", then select ",(0,l.jsx)(s.strong,{children:"Chrome"}),", ",(0,l.jsx)(s.strong,{children:"Chrome Headless"}),", or ",(0,l.jsx)(s.strong,{children:"Edge Chromium"}),"."]}),"\n"]}),"\n",(0,l.jsxs)(s.li,{children:["\n",(0,l.jsxs)(s.p,{children:["Click the ",(0,l.jsx)(s.strong,{children:"Add"})," button, then type in the following value to set a window size of 1500x1000 for the browser to record and allow all remote origins, as shown in the sample screenshot below."]}),"\n",(0,l.jsxs)(s.table,{children:[(0,l.jsx)(s.thead,{children:(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.th,{children:"Name"}),(0,l.jsx)(s.th,{children:"Type"}),(0,l.jsx)(s.th,{children:"Value"})]})}),(0,l.jsx)(s.tbody,{children:(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:"args"}),(0,l.jsx)(s.td,{children:"List"}),(0,l.jsxs)(s.td,{children:["--window-size=1500,1000 ",(0,l.jsx)("br",{})," --remote-allow-origins=*"]})]})})]}),"\n"]}),"\n"]}),"\n",(0,l.jsx)("img",{src:"https://docs.katalon.com/fd3a0860-9336-11ee-ab4f-0242c7a41fd4/KS_set_desired_capabilities_for_browser_based_record.png",alt:"Set desired capabilities for Chrome",width:"700"}),"\n",(0,l.jsxs)(s.p,{children:["To learn more about setting desired capabilities for WebUI testing, see: ",(0,l.jsx)(s.a,{href:"/katalon-studio/manage-projects/project-settings/desired-capabilities/set-up-desired-capabilities-for-webui-testing-in-katalon-studio",children:"Set up desired capabilities for WebUI testing"}),"."]}),"\n",(0,l.jsxs)(s.ol,{start:"5",children:["\n",(0,l.jsxs)(s.li,{children:["Click ",(0,l.jsx)(s.strong,{children:"Apply & Close"}),"."]}),"\n"]}),"\n",(0,l.jsxs)(s.h2,{id:"install-ffmpeg-library",children:[(0,l.jsx)("a",{id:"id_2",class:"anchor_top_offset"}),"Install FFmpeg library"]}),"\n",(0,l.jsxs)("div",{xmlns:"http://www.w3.org/1999/xhtml",className:"p",children:["To install the FFmpeg library:",(0,l.jsxs)("ul",{className:"ul",children:[(0,l.jsx)("li",{className:"li",children:(0,l.jsxs)("div",{className:"p",children:["For macOS, use the following command with Homebrew: ",(0,l.jsx)("pre",{className:"pre codeblock",children:(0,l.jsx)("code",{children:"brew install ffmpeg"})})]})}),(0,l.jsx)("li",{className:"li",children:(0,l.jsxs)("div",{className:"p",children:["For Linux, use the following command: ",(0,l.jsx)("pre",{className:"pre codeblock",children:(0,l.jsx)("code",{children:"sudo apt-get install ffmpeg"})})]})}),(0,l.jsx)("li",{className:"li",children:(0,l.jsxs)("div",{className:"p",children:["For Windows users: ",(0,l.jsxs)("ol",{className:"ol",children:[(0,l.jsx)("li",{className:"li",children:(0,l.jsxs)("p",{className:"p",children:["Go to the ",(0,l.jsx)("a",{className:"xref j-external-link",href:"https://ffmpeg.org/download.html",target:"_blank",children:"FFmpeg download web page"}),"."]})}),(0,l.jsx)("li",{className:"li",children:(0,l.jsx)("p",{className:"p",children:"Download the package for Windows."})}),(0,l.jsx)("li",{className:"li",children:(0,l.jsxs)("p",{className:"p",children:["Add the path to the FFmpeg executable file to your PATH environment variable. See ",(0,l.jsx)("a",{className:"xref",href:"/katalon-studio/test-reports/generate-test-reports/generate-browser-based-videos-in-katalon-studio-reports",children:"Add FFmpeg to PATH on Windows"}),"."]})}),(0,l.jsx)("li",{className:"li",children:(0,l.jsxs)("p",{className:"p",children:["Reactivate ",(0,l.jsx)("span",{className:"ph",children:"Katalon Studio"})," for this installation to take effect."]})})]})]})})]}),"\nFor more information on FFmpeg library, see: ",(0,l.jsx)("a",{className:"xref j-external-link",href:"https://ffmpeg.org/",target:"_blank",children:"FFmpeg library"}),"."]}),"\n",(0,l.jsx)("div",{className:"p",children:(0,l.jsxs)("div",{className:"note attention note_attention",children:[(0,l.jsx)("h4",{className:"note__title",children:"Attention:"}),(0,l.jsx)("ul",{className:"ul",children:(0,l.jsx)("li",{className:"li",children:(0,l.jsx)("p",{className:"p",children:(0,l.jsx)(s.p,{children:"FFmpeg v7 has an issue with the VP9 codec. The output file cannot be played on Chrome or Microsoft Edge browsers but works fine on S

1afari and Firefox. To resolve this issue, you should downgrade FFmpeg to v6."})})})}),(0,l.jsx)("h5",{className:"note__subtitle",children:"Commands to install FFmpeg v6 on macOS:"}),(0,l.jsxs)("div",{className:"p",style:{marginLeft:"20px"},children:[(0,l.jsx)("p",{className:"p",children:(0,l.jsxs)(s.p,{children:["Uninstall FFmpeg v7: ",(0,l.jsx)("code",{className:"ph codeph",children:"brew uninstall ffmpeg"})]})}),(0,l.jsx)("p",{className:"p",children:(0,l.jsxs)(s.p,{children:["Install FFmpeg v6: ",(0,l.jsx)("code",{className:"ph codeph",children:"brew install ffmpeg@6"})]})}),(0,l.jsx)("p",{className:"p",children:(0,l.jsxs)(s.p,{children:["Link FFmpeg v6: ",(0,l.jsx)("code",{className:"ph codeph",children:"brew link ffmpeg@6"})]})}),(0,l.jsx)("p",{className:"p",children:(0,l.jsxs)(s.p,{children:["Verify the version: ",(0,l.jsx)("code",{className:"ph codeph",children:"ffmpeg -version"})]})})]})]})}),"\n",(0,l.jsxs)(s.h3,{id:"add-ffmpeg-to-path-on-windows",children:[(0,l.jsx)("a",{id:"task-8960",class:"anchor_top_offset"}),"Add FFmpeg to PATH on Windows"]}),"\n",(0,l.jsx)("section",{xmlns:"http://www.w3.org/1999/xhtml",className:"section context",children:(0,l.jsx)("p",{children:(0,l.jsx)(s.p,{children:"On Windows, to use FFmpeg with Katalon Studio, you need to add it to the system PATH. Follow these steps to configure the PATH variable:"})})}),"\n",(0,l.jsxs)("ol",{xmlns:"http://www.w3.org/1999/xhtml",className:"ol steps",children:[(0,l.jsx)("li",{className:"li step stepexpand",children:(0,l.jsx)("span",{className:"ph cmd",children:(0,l.jsxs)(s.p,{children:["After downloading and extracting the FFmpeg package, rename the extracted folder to ",(0,l.jsx)("code",{className:"ph codeph",children:"ffmpeg"}),"."]})})}),(0,l.jsx)("li",{className:"li step stepexpand",children:(0,l.jsx)("span",{className:"ph cmd",children:(0,l.jsxs)(s.p,{children:["Move the ",(0,l.jsx)("code",{className:"ph codeph",children:"ffmpeg"})," folder to the root directory of the ",(0,l.jsx)("code",{className:"ph codeph",children:"C:"})," drive or another location of your choice."]})})}),(0,l.jsxs)("li",{className:"li step stepexpand",children:[(0,l.jsx)("span",{className:"ph cmd",children:(0,l.jsxs)(s.p,{children:["To add FFmpeg to the PATH, type ",(0,l.jsx)("kbd",{className:"ph userinput",children:"system variables"})," into the search bar, and select ",(0,l.jsx)("span",{className:"ph uicontrol",children:"Edit the system environment variables"}),"."]})}),(0,l.jsx)("div",{className:"itemgroup info",children:(0,l.jsx)("img",{className:"image",width:"250",src:(0,i.Ay)("/1bf5ba7c-3810-43fc-99af-1221b6376319/add_FFmpeg_to_PATH-1.png")})})]}),(0,l.jsxs)("li",{className:"li step stepexpand",children:[(0,l.jsx)("span",{className:"ph cmd",children:(0,l.jsxs)(s.p,{children:["In the ",(0,l.jsx)("span",{className:"ph uicontrol",children:"System Properties"})," window, go to the ",(0,l.jsx)("span",{className:"ph uicontrol",children:"Advanced"})," tab and select ",(0,l.jsx)("span",{className:"ph uicontrol",children:"Environment Variables\u2026"}),"."]})}),(0,l.jsx)("div",{className:"itemgroup info",children:(0,l.jsx)("img",{className:"image",width:"300",src:(0,i.Ay)("/6e08cb1a-09bf-40f8-b5da-c299a8eb4c28/add_FFmpeg_to_PATH-2.png")})})]}),(0,l.jsxs)("li",{className:"li step stepexpand",children:[(0,l.jsx)("span",{className:"ph cmd",children:(0,l.jsxs)(s.p,{children:["Under the ",(0,l.jsx)("span",{className:"ph uicontrol",children:"User variables for [Your Username]"})," section, locate the ",(0,l.jsx)("code",{className:"ph codeph",children:"Path"})," variable and select ",(0,l.jsx)("span",{className:"ph uicontrol",children:"Edit\u2026"}),"."]})}),(0,l.jsx)("div",{className:"itemgroup info",children:(0,l.jsx)("img",{className:"image",width:"450",src:(0,i.Ay)("/93f0f600-40cb-4909-8dc5-bfcd9cf34f69/add_FFmpeg_to_PATH-3.png")})})]}),(0,l.jsxs)("li",{className:"li step stepexpand",children:[(0,l.jsx)("span",{className:"ph cmd",children:(0,l.jsxs)(s.p,{children:["In the ",(0,l.jsx)("span",{className:"ph uicontrol",children:"Edit environment variable"})," window, click ",(0,l.jsx)("span",{className:"ph uicontrol",children:"New"})," and enter the path to the FFmpeg binary folder (for example, ",(0,l.jsx)("code",{className:"ph codeph",children:"C:\\ffmpeg\\bin"}),")."]})}),(0,l.jsx)("div",{className:"itemgroup info",children:(0,l.jsx)("img",{className:"image",width:"350",src:(0,i.Ay)("/13c774d7-a8fb-429d-bd5f-497b8667312c/add_FFmpeg_to_PATH-4.png")})})]}),(0,l.jsx)("li",{className:"li step stepexpand",children:(0,l.jsx)("span",{className:"ph cmd",children:(0,l.jsxs)(s.p,{children:["Click ",(0,l.jsx)("span",{className:"ph uicontrol",children:"OK"})," to close all dialog boxes and save the changes."]})})})]}),"\n",(0,l.jsxs)("section",{xmlns:"http://www.w3.org/1999/xhtml",className:"section result",children:[(0,l.jsx)("p",{children:(0,l.jsx)(s.p,{children:"To verify that FFmpeg has been correctly added to the PATH, open the C

1ommand Prompt and run the following command:"})}),(0,l.jsx)("pre",{className:"pre codeblock",children:(0,l.jsx)("code",{children:"ffmpeg -version"})}),(0,l.jsx)("p",{className:"p",children:(0,l.jsx)(s.p,{children:"The output should display FFmpeg version details, confirming the installation."})}),(0,l.jsx)("p",{className:"p",children:(0,l.jsx)("img",{className:"image",width:"500",src:(0,i.Ay)("/77ece238-daf2-4335-88e3-b6af84766db2/add_FFmpeg_to_PATH-5.png")})}),(0,l.jsx)("div",{className:"p",children:(0,l.jsxs)("div",{className:"note attention note_attention",children:[(0,l.jsx)("h4",{className:"note__title",children:"Attention:"}),(0,l.jsx)("ul",{className:"ul",children:(0,l.jsx)("li",{className:"li",children:(0,l.jsx)("p",{className:"p",children:(0,l.jsxs)(s.p,{children:["If you have already installed FFmpeg, but typing ",(0,l.jsx)("code",{className:"ph codeph",children:"ffmpeg"})," in the command prompt returns nothing, make sure your user account has full permission ",(0,l.jsx)("strong",{className:"ph b",children:"OR"})," run CMD window as Administrator mode."]})})})})]})})]}),"\n",(0,l.jsxs)(s.h3,{id:"build-and-commit-a-docker-image-with-ffmpeg-installed",children:[(0,l.jsx)("a",{id:"task-5317",class:"anchor_top_offset"}),"Build and commit a Docker image with FFmpeg installed"]}),"\n",(0,l.jsxs)("p",{xmlns:"http://www.w3.org/1999/xhtml",className:"shortdesc",children:["Katalon Docker image may be used as a container to execute ",(0,l.jsx)("span",{className:"ph",children:"Katalon Studio"})," tests and write reports to the host's file system. However, the default Katalon Docker image does not include the FFmpeg library required for browser-based video recording."]}),"\n",(0,l.jsxs)("section",{xmlns:"http://www.w3.org/1999/xhtml",className:"section context",children:["The following steps guide you through building and committing your own Docker image with FFmpeg installed.",(0,l.jsx)("div",{className:"p",children:(0,l.jsxs)("div",{className:"note note note_note",children:[(0,l.jsx)("span",{className:"note__title",children:"Note:"})," ",(0,l.jsxs)("ul",{className:"ul",children:[(0,l.jsx)("li",{className:"li",children:(0,l.jsxs)("p",{className:"p",children:["This procedure assumes you are using the Docker image ",(0,l.jsx)("code",{className:"ph codeph",children:"katalon:9.7.2"}),". To check for the latest images, visit the ",(0,l.jsx)("a",{className:"xref j-external-link",href:"https://hub.docker.com/r/katalonstudio/katalon/tags",target:"_blank",children:"Katalon Docker Hub"}),"."]})}),(0,l.jsx)("li",{className:"li",children:(0,l.jsx)("p",{className:"p",children:"Make sure the image tag matches the version of Katalon Studio installed on your system."})})]})]})})]}),"\n",(0,l.jsxs)("ol",{xmlns:"http://www.w3.org/1999/xhtml",className:"ol steps",children:[(0,l.jsxs)("li",{className:"li step stepexpand",children:[(0,l.jsx)("span",{className:"ph cmd",children:"Run a container from the Katalon Docker image."}),(0,l.jsxs)("ol",{type:"a",className:"ol substeps",children:[(0,l.jsx)("li",{className:"li substep substepexpand",children:(0,l.jsx)("span",{className:"ph cmd",children:"Open a terminal on your local machine."})}),(0,l.jsxs)("li",{className:"li substep substepexpand",children:[(0,l.jsx)("span",{className:"ph cmd",children:"Run the following command to start a container from the desired Katalon Docker image (for example, version 9.7.2):"}),(0,l.jsx)("div",{className:"itemgroup info",children:(0,l.jsx)("pre",{className:"pre codeblock",children:(0,l.jsx)("code",{children:"docker run -it katalonstudio/katalon:9.7.2 /bin/bash"})})})]}),(0,l.jsxs)("li",{className:"li substep substepexpand",children:[(0,l.jsx)("span",{className:"ph cmd",children:"Inside the container, update the package manager and install FFmpeg:"}),(0,l.jsx)("div",{className:"itemgroup info",children:(0,l.jsx)("pre",{className:"pre codeblock",children:(0,l.jsxs)("code",{children:["apt-get update","\n","apt-get -y install ffmpeg"]})})})]})]})]}),(0,l.jsxs)("li",{className:"li step stepexpand",children:[(0,l.jsx)("span",{className:"ph cmd",children:"Save the updated container as a new image."}),(0,l.jsxs)("ol",{type:"a",className:"ol substeps",children:[(0,l.jsxs)("li",{className:"li substep substepexpand",children:[(0,l.jsx)("span",{className:"ph cmd",children:"Open another terminal and list the active Docker 

1containers to locate the container ID:"}),(0,l.jsxs)("div",{className:"itemgroup info",children:[(0,l.jsx)("pre",{className:"pre codeblock",children:(0,l.jsx)("code",{children:"docker ps"})}),(0,l.jsxs)("div",{className:"p",children:["Example output:",(0,l.jsx)("pre",{className:"pre codeblock",children:(0,l.jsxs)("code",{children:["CONTAINER ID","   ","IMAGE","                             ","COMMAND","\n","6e9278d5d7f4","   ","katalonstudio/katalon:9.7.2","      ",'"/bin/bash"',"\n"]})})]})]})]}),(0,l.jsxs)("li",{className:"li substep substepexpand",children:[(0,l.jsx)("span",{className:"ph cmd",children:"Use the container ID from the output to save the updated container as a new Docker image:"}),(0,l.jsxs)("div",{className:"itemgroup info",children:[(0,l.jsx)("pre",{className:"pre codeblock",children:(0,l.jsx)("code",{children:"docker commit <container id> <new image name>"})}),(0,l.jsxs)("div",{className:"p",children:["For example, if the container ID is ",(0,l.jsx)("code",{className:"ph codeph",children:"6e9278d5d7f4"})," and you want to name the new image ",(0,l.jsx)("code",{className:"ph codeph",children:"ksffmpeg"}),", the command would be:",(0,l.jsx)("pre",{className:"pre codeblock",children:(0,l.jsx)("code",{children:"docker commit 6e9278d5d7f4 ksffmpeg"})})]})]})]})]})]}),(0,l.jsxs)("li",{className:"li step stepexpand",children:[(0,l.jsx)("span",{className:"ph cmd",children:"Run your image."}),(0,l.jsxs)("div",{className:"itemgroup info",children:["In the below example, we are running the ",(0,l.jsx)("code",{className:"ph codeph",children:"ksffmpeg"})," image from the Katalon project directory and mapping a docker volume to the drive.",(0,l.jsx)("pre",{className:"pre codeblock",children:(0,l.jsxs)("code",{children:["docker run -t --rm -v $","{","pwd","}",':/tmp/project ksffmpeg katalonc.sh -retry=0 -projectPath="/tmp/project/web-keywords-automation.prj" -testSuitePath="Test Suites/WebUI Keywords Test" -browserType="Chrome" -executionProfile="default" -apiKey="<removed>" -orgID=<removed> --config -proxy.auth.option=NO_PROXY -proxy.system.option=NO_PROXY -proxy.system.applyToDesiredCapabilities=true']})})]})]})]}),"\n",(0,l.jsxs)("section",{xmlns:"http://www.w3.org/1999/xhtml",className:"section result",children:["You have built your own images for Katalon Docker image. For more information on Katalon Docker image, see: ",(0,l.jsx)("a",{className:"xref",href:"/katalon-studio/execute-tests/katalon-runtime-engine/katalon-docker-image-kdi",children:"Katalon Docker Image (KDI)"}),"."]}),"\n",(0,l.jsxs)(s.h2,{id:"view-recorded-videos",children:[(0,l.jsx)("a",{id:"concept-6849",class:"anchor_top_offset"}),"View recorded videos"]}),"\n",(0,l.jsxs)("p",{xmlns:"http://www.w3.org/1999/xhtml",className:"p",children:["Click the ",(0,l.jsx)("em",{className:"ph i",children:"Play"})," icon in the ",(0,l.jsx)("span",{className:"ph uicontrol",children:"Video"})," column to play the video as shown below. Each test step in the video has a description embedded like a subtitle."]}),"\n",(0,l.jsxs)("p",{xmlns:"http://www.w3.org/1999/xhtml",className:"p",children:["After running the test suite, navigate to the ",(0,l.jsx)("span",{className:"ph uicontrol",children:"Result"})," tab. You can see a list of test cases. A recorded video is attached to each test case."]}),"\n",(0,l.jsx)("p",{xmlns:"http://www.w3.org/1999/xhtml",className:"p",children:(0,l.jsx)("img",{className:"image",width:700,src:(0,i.Ay)("/3c12c860-9dec-11ed-998d-0242cfbc79b5/ks-reports-view-video.png"),alt:"View result video"})}),"\n",(0,l.jsx)(s.h3,{id:"see-also",children:"See also"}),"\n",(0,l.jsx)("div",{xmlns:"http://www.w3.org/1999/xhtml",className:"p",children:(0,l.jsx)("ul",{className:"ul",children:(0,l.jsxs)("li",{className:"li",children:[(0,l.jsx)("a",{className:"xref",href:"/katalon-studio/troubleshooting/troubleshoot-web-automated-testing/common-issues-with-browser-based-videos-in-katalon-studio-report",children:"Common issues with browser-based videos in Katalon Studio report"}),"."]})})})]})}function p(e={}){const{wrapper:s}={...(0,n.R)(),...e.components};return s?(0,l.jsx)(s,{...e,children:(0,l.jsx)(h,{...e})}):h(e)}}}]);