{"id":23726,"date":"2024-03-16T01:56:14","date_gmt":"2024-03-16T01:56:14","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-to-set-the-video-quality-in-getusermedia\/"},"modified":"2024-03-22T01:58:12","modified_gmt":"2024-03-22T01:58:12","slug":"how-to-set-the-video-quality-in-getusermedia","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-to-set-the-video-quality-in-getusermedia\/","title":{"rendered":"How to set the video quality in getUserMedia?"},"content":{"rendered":"<p>To adjust the video quality of getUserMedia, you can use the MediaTrackConstraints object to specify the desired parameters. The following example code demonstrates how to set the maximum and minimum values for video width and height.<\/p>\n<pre class=\"post-pre\"><code>navigator.<span class=\"hljs-property\">mediaDevices<\/span>.<span class=\"hljs-title function_\">getUserMedia<\/span>({\r\n  <span class=\"hljs-attr\">video<\/span>: {\r\n    <span class=\"hljs-attr\">width<\/span>: { <span class=\"hljs-attr\">min<\/span>: <span class=\"hljs-number\">640<\/span>, <span class=\"hljs-attr\">ideal<\/span>: <span class=\"hljs-number\">1280<\/span>, <span class=\"hljs-attr\">max<\/span>: <span class=\"hljs-number\">1920<\/span> },\r\n    <span class=\"hljs-attr\">height<\/span>: { <span class=\"hljs-attr\">min<\/span>: <span class=\"hljs-number\">480<\/span>, <span class=\"hljs-attr\">ideal<\/span>: <span class=\"hljs-number\">720<\/span>, <span class=\"hljs-attr\">max<\/span>: <span class=\"hljs-number\">1080<\/span> }\r\n  }\r\n})\r\n.<span class=\"hljs-title function_\">then<\/span>(<span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">stream<\/span>) {\r\n  <span class=\"hljs-comment\">\/\/ \u5904\u7406\u89c6\u9891\u6d41<\/span>\r\n})\r\n.<span class=\"hljs-title function_\">catch<\/span>(<span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">error<\/span>) {\r\n  <span class=\"hljs-variable language_\">console<\/span>.<span class=\"hljs-title function_\">log<\/span>(<span class=\"hljs-string\">'\u8bbf\u95ee\u6444\u50cf\u5934\u5931\u8d25: '<\/span>, error);\r\n});\r\n<\/code><\/pre>\n<p>In the code above, the width and height properties specify the minimum, ideal, and maximum width and height of the video respectively. These can be adjusted according to specific needs.<\/p>\n<p>Please note that the actual video stream may not meet the specified exact parameters, especially on mobile devices. Therefore, it is recommended to use a range of values to set the quality and resolution.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>To adjust the video quality of getUserMedia, you can use the MediaTrackConstraints object to specify the desired parameters. The following example code demonstrates how to set the maximum and minimum values for video width and height. navigator.mediaDevices.getUserMedia({ video: { width: { min: 640, ideal: 1280, max: 1920 }, height: { min: 480, ideal: 720, max: [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-23726","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to set the video quality in getUserMedia? - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/blog\/how-to-set-the-video-quality-in-getusermedia\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to set the video quality in getUserMedia?\" \/>\n<meta property=\"og:description\" content=\"To adjust the video quality of getUserMedia, you can use the MediaTrackConstraints object to specify the desired parameters. The following example code demonstrates how to set the maximum and minimum values for video width and height. navigator.mediaDevices.getUserMedia({ video: { width: { min: 640, ideal: 1280, max: 1920 }, height: { min: 480, ideal: 720, max: [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-to-set-the-video-quality-in-getusermedia\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-16T01:56:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-22T01:58:12+00:00\" \/>\n<meta name=\"author\" content=\"Benjamin Taylor\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:site\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Benjamin Taylor\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-set-the-video-quality-in-getusermedia\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-set-the-video-quality-in-getusermedia\/\"},\"author\":{\"name\":\"Benjamin Taylor\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/ac801fe9549a25960ce48aa2e0a691c9\"},\"headline\":\"How to set the video quality in getUserMedia?\",\"datePublished\":\"2024-03-16T01:56:14+00:00\",\"dateModified\":\"2024-03-22T01:58:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-set-the-video-quality-in-getusermedia\/\"},\"wordCount\":108,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-set-the-video-quality-in-getusermedia\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-to-set-the-video-quality-in-getusermedia\/\",\"name\":\"How to set the video quality in getUserMedia? - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-16T01:56:14+00:00\",\"dateModified\":\"2024-03-22T01:58:12+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-set-the-video-quality-in-getusermedia\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-to-set-the-video-quality-in-getusermedia\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-set-the-video-quality-in-getusermedia\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to set the video quality in getUserMedia?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"name\":\"Silicon Cloud Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\",\"name\":\"Silicon Cloud Blog\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"contentUrl\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"width\":1024,\"height\":1024,\"caption\":\"Silicon Cloud Blog\"},\"image\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\",\"https:\/\/twitter.com\/SiliCloudGlobal\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/ac801fe9549a25960ce48aa2e0a691c9\",\"name\":\"Benjamin Taylor\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ec2e3d3e2d525fd148047c4520ae7c1cdccd1f4b48a1a488422b31f04f345c14?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ec2e3d3e2d525fd148047c4520ae7c1cdccd1f4b48a1a488422b31f04f345c14?s=96&d=mm&r=g\",\"caption\":\"Benjamin Taylor\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/benjamintaylor\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to set the video quality in getUserMedia? - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/blog\/how-to-set-the-video-quality-in-getusermedia\/","og_locale":"en_US","og_type":"article","og_title":"How to set the video quality in getUserMedia?","og_description":"To adjust the video quality of getUserMedia, you can use the MediaTrackConstraints object to specify the desired parameters. The following example code demonstrates how to set the maximum and minimum values for video width and height. navigator.mediaDevices.getUserMedia({ video: { width: { min: 640, ideal: 1280, max: 1920 }, height: { min: 480, ideal: 720, max: [&hellip;]","og_url":"https:\/\/www.silicloud.com\/blog\/how-to-set-the-video-quality-in-getusermedia\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-16T01:56:14+00:00","article_modified_time":"2024-03-22T01:58:12+00:00","author":"Benjamin Taylor","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Benjamin Taylor","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/how-to-set-the-video-quality-in-getusermedia\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-set-the-video-quality-in-getusermedia\/"},"author":{"name":"Benjamin Taylor","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/ac801fe9549a25960ce48aa2e0a691c9"},"headline":"How to set the video quality in getUserMedia?","datePublished":"2024-03-16T01:56:14+00:00","dateModified":"2024-03-22T01:58:12+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-set-the-video-quality-in-getusermedia\/"},"wordCount":108,"commentCount":0,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/how-to-set-the-video-quality-in-getusermedia\/","url":"https:\/\/www.silicloud.com\/blog\/how-to-set-the-video-quality-in-getusermedia\/","name":"How to set the video quality in getUserMedia? - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-16T01:56:14+00:00","dateModified":"2024-03-22T01:58:12+00:00","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-set-the-video-quality-in-getusermedia\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-to-set-the-video-quality-in-getusermedia\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-to-set-the-video-quality-in-getusermedia\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to set the video quality in getUserMedia?"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/blog\/#website","url":"https:\/\/www.silicloud.com\/blog\/","name":"Silicon Cloud Blog","description":"","publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.silicloud.com\/blog\/#organization","name":"Silicon Cloud Blog","url":"https:\/\/www.silicloud.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","contentUrl":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","width":1024,"height":1024,"caption":"Silicon Cloud Blog"},"image":{"@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/SiliCloudGlobal\/","https:\/\/twitter.com\/SiliCloudGlobal"]},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/ac801fe9549a25960ce48aa2e0a691c9","name":"Benjamin Taylor","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ec2e3d3e2d525fd148047c4520ae7c1cdccd1f4b48a1a488422b31f04f345c14?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ec2e3d3e2d525fd148047c4520ae7c1cdccd1f4b48a1a488422b31f04f345c14?s=96&d=mm&r=g","caption":"Benjamin Taylor"},"url":"https:\/\/www.silicloud.com\/blog\/author\/benjamintaylor\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/23726","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=23726"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/23726\/revisions"}],"predecessor-version":[{"id":57719,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/23726\/revisions\/57719"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=23726"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=23726"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=23726"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}