Fail
Unable to find an element with the title: select video source.
Ignored nodes: comments, script, style
<div
id="storybook-root"
>
<div
class="image-container"
style="width: 300px; position: relative; border-radius: var(--radius-lg); overflow: hidden;"
>
<div
class="block svelte-90oupt"
id=""
style="border-style: dashed; overflow: hidden; min-width: min(0px, 100%); border-width: var(--block-border-width);"
>
<div
class="wrap default full svelte-1occ011 hide"
style="position: absolute; padding: 0px;"
/>
<label
class="svelte-1b6s6s hide sr-only float"
data-testid="block-label"
for=""
>
<span
class="svelte-1b6s6s"
>
<svg
class="feather feather-image"
fill="none"
height="100%"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="100%"
xmlns="http://www.w3.org/2000/svg"
>
<rect
height="18"
rx="2"
ry="2"
width="18"
x="3"
y="3"
/>
<circle
cx="8.5"
cy="8.5"
r="1.5"
/>
<polyline
points="21 15 16 10 5 21"
/>
</svg>
</span>
Image
</label>
<div
class="image-container svelte-2gpyzw"
data-testid="image"
>
<div
class="upload-container svelte-2gpyzw"
>
<button
class="svelte-jqnyug hidden center boundedheight flex"
style="height: 100%;"
tabindex="-1"
>
<div
aria-label="Empty value"
class="empty svelte-1oiin9d large unpadded_box small_parent"
>
<div
class="icon svelte-1oiin9d"
>
<svg
class="feather feather-image"
fill="none"
height="100%"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="100%"
xmlns="http://www.w3.org/2000/svg"
>
<rect
height="18"
rx="2"
ry="2"
width="18"
x="3"
y="3"
/>
<circle
cx="8.5"
cy="8.5"
r="1.5"
/>
<polyline
points="21 15 16 10 5 21"
/>
</svg>
</div>
</div>
<input
accept="image/*"
aria-label="file upload"
class="svelte-jqnyug"
data-testid="file-upload"
type="file"
/>
</button>
<div
class="wrap svelte-1wzy63q"
>
<video
class="svelte-1wzy63q hide"
/>
<div>
<button
class="svelte-i86qyk"
style="height: 100%;"
>
<div
class="wrap svelte-i86qyk"
>
<span
class="icon-wrap svelte-i86qyk"
>
<svg
height="100%"
viewBox="0 0 24 24"
width="100%"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 2c-4.963 0-9 4.038-9 9c0 3.328 1.82 6.232 4.513 7.79l-2.067 1.378A1 1 0 0 0 6 22h12a1 1 0 0 0 .555-1.832l-2.067-1.378C19.18 17.232 21 14.328 21 11c0-4.962-4.037-9-9-9zm0 16c-3.859 0-7-3.141-7-7c0-3.86 3.141-7 7-7s7 3.14 7 7c0 3.859-3.141 7-7 7z"
fill="currentColor"
/>
<path
d="M12 6c-2.757 0-5 2.243-5 5s2.243 5 5 5s5-2.243 5-5s-2.243-5-5-5zm0 8c-1.654 0-3-1.346-3-3s1.346-3 3-3s3 1.346 3 3s-1.346 3-3 3z"
fill="currentColor"
/>
</svg>
</span>
Click to Access Webcam
</div>
</button>
</div>
</div>
</div>
<span
class="source-selection svelte-1ebruwp"
data-testid="source-select"
>
<button
aria-label="Upload file"
class="icon svelte-1ebruwp"
>
<svg
class="feather feather-upload"
fill="none"
height="90%"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="90%"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
/>
<polyline
points="17 8 12 3 7 8"
/>
<line
x1="12"
x2="12"
y1="3"
y2="15"
/>
</svg>
</button>
<button
aria-label="Capture from camera"
class="icon svelte-1ebruwp selected"
>
<svg
height="100%"
viewBox="0 0 24 24"
width="100%"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 2c-4.963 0-9 4.038-9 9c0 3.328 1.82 6.232 4.513 7.79l-2.067 1.378A1 1 0 0 0 6 22h12a1 1 0 0 0 .555-1.832l-2.067-1.378C19.18 17.232 21 14.328 21 11c0-4.962-4.037-9-9-9zm0 16c-3.859 0-7-3.141-7-7c0-3.86 3.141-7 7-7s7 3.14 7 7c0 3.859-3.141 7-7 7z"
fill="currentColor"
/>
<path
d="M12 6c-2.757 0-5 2.243-5 5s2.243 5 5 5s5-2.243 5-5s-2.243-5-5-5zm0 8c-1.654 0-3-1.346-3-3s1.346-3 3-3s3 1.346 3 3s-1.346 3-3 3z"
fill="currentColor"
/>
</svg>
</button>
<button
aria-label="Paste from clipboard"
class="icon svelte-1ebruwp"
>
<svg
height="100%"
viewBox="0 0 24 24"
width="100%"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13.75 2a2.25 2.25 0 0 1 2.236 2.002V4h1.764A2.25 2.25 0 0 1 20 6.25V11h-1.5V6.25a.75.75 0 0 0-.75-.75h-2.129c-.404.603-1.091 1-1.871 1h-3.5c-.78 0-1.467-.397-1.871-1H6.25a.75.75 0 0 0-.75.75v13.5c0 .414.336.75.75.75h4.78a3.99 3.99 0 0 0 .505 1.5H6.25A2.25 2.25 0 0 1 4 19.75V6.25A2.25 2.25 0 0 1 6.25 4h1.764a2.25 2.25 0 0 1 2.236-2h3.5Zm2.245 2.096L16 4.25c0-.052-.002-.103-.005-.154ZM13.75 3.5h-3.5a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 0-1.5ZM15 12a3 3 0 0 0-3 3v5c0 .556.151 1.077.415 1.524l3.494-3.494a2.25 2.25 0 0 1 3.182 0l3.494 3.494c.264-.447.415-.968.415-1.524v-5a3 3 0 0 0-3-3h-5Zm0 11a2.985 2.985 0 0 1-1.524-.415l3.494-3.494a.75.75 0 0 1 1.06 0l3.494 3.494A2.985 2.985 0 0 1 20 23h-5Zm5-7a1 1 0 1 1 0-2a1 1 0 0 1 0 2Z"
fill="currentColor"
/>
</svg>
</button>
</span>
</div>
</div>
</div>
</div>
Ignored nodes: comments, script, style
<div
id="storybook-root"
>
<div
class="image-container"
style="width: 300px; position: relative; border-radius: var(--radius-lg); overflow: hidden;"
>
<div
class="block svelte-90oupt"
id=""
style="border-style: dashed; overflow: hidden; min-width: min(0px, 100%); border-width: var(--block-border-width);"
>
<div
class="wrap default full svelte-1occ011 hide"
style="position: absolute; padding: 0px;"
/>
<label
class="svelte-1b6s6s hide sr-only float"
data-testid="block-label"
for=""
>
<span
class="svelte-1b6s6s"
>
<svg
class="feather feather-image"
fill="none"
height="100%"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="100%"
xmlns="http://www.w3.org/2000/svg"
>
<rect
height="18"
rx="2"
ry="2"
width="18"
x="3"
y="3"
/>
<circle
cx="8.5"
cy="8.5"
r="1.5"
/>
<polyline
points="21 15 16 10 5 21"
/>
</svg>
</span>
Image
</label>
<div
class="image-container svelte-2gpyzw"
data-testid="image"
>
<div
class="upload-container svelte-2gpyzw"
>
<button
class="svelte-jqnyug hidden center boundedheight flex"
style="height: 100%;"
tabindex="-1"
>
<div
aria-label="Empty value"
class="empty svelte-1oiin9d large unpadded_box small_parent"
>
<div
class="icon svelte-1oiin9d"
>
<svg
class="feather feather-image"
fill="none"
height="100%"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
viewBox="0 0 24 24"
width="100%"
xmlns="http://www.w3.org/2000/svg"
>
<rect
height="18"
rx="2"
ry="2"
width="18"
x="3"
y="3"
/>
<circle
cx="8.5"
cy="8.5"
r="1.5"
/>
<polyline
points="21 15 16 10 5 21"
/>
</svg>
</div>
</div>
<input
accept="image/*"
aria-label="file upload"
class="svelte-jqnyug"
data-testid="file-upload"
type="file"
/>
</button>
<div
class="wrap svelte-1wzy63q"
>
<video
class="svelte-1wzy63q hide"
/>
<div>
<button
class="svelte-i86qyk"
style="height: 100%;"
>
<div
class="wrap svelte-i86qyk"
>
<span
class="icon-wrap svelte-i86qyk"
>
<svg
height="100%"
viewBox="0 0 24 24"
width="100%"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 2c-4.963 0-9 4.038-9 9c0 3.328 1.82 6.232 4.513 7.79l-2.067 1.378A1 1 0 0 0 6 22h12a1 1 0 0 0 .555-1.832l-2.067-1.378C19.18 17.232 21 14.328 21 11c0-4.962-4.037-9-9-9zm0 16c-3.859 0-7-3.141-7-7c0-3.86 3.141-7 7-7s7 3.14 7 7c0 3.859-3.141 7-7 7z"
fill="currentColor"
/>
<path
d="M12 6c-2.757 0-5 2.243-5 5s2.243 5 5 5s5-2.243 5-5s-2.243-5-5-5zm0 8c-1.654 0-3-1.346-3-3s1.346-3 3-3s3 1.346 3 3s-1.346 3-3 3z"
fill="currentColor"
/>
</svg>
</span>
Click to Access Webcam
</div>
</button>
</div>
</div>
</div>
<span
class="source-selection svelte-1ebruwp"
data-testid="source-select"
>
<button
aria-label="Upload file"
class="icon svelte-1ebruwp"
>
<svg
class="feather feather-upload"
fill="none"
height="90%"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="90%"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
/>
<polyline
points="17 8 12 3 7 8"
/>
<line
x1="12"
x2="12"
y1="3"
y2="15"
/>
</svg>
</button>
<button
aria-label="Capture from camera"
class="icon svelte-1ebruwp selected"
>
<svg
height="100%"
viewBox="0 0 24 24"
width="100%"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 2c-4.963 0-9 4.038-9 9c0 3.328 1.82 6.232 4.513 7.79l-2.067 1.378A1 1 0 0 0 6 22h12a1 1 0 0 0 .555-1.832l-2.067-1.378C19.18 17.232 21 14.328 21 11c0-4.962-4.037-9-9-9zm0 16c-3.859 0-7-3.141-7-7c0-3.86 3.141-7 7-7s7 3.14 7 7c0 3.859-3.141 7-7 7z"
fill="currentColor"
/>
<path
d="M12 6c-2.757 0-5 2.243-5 5s2.243 5 5 5s5-2.243 5-5s-2.243-5-5-5zm0 8c-1.654 0-3-1.346-3-3s1.346-3 3-3s3 1.346 3 3s-1.346 3-3 3z"
fill="currentColor"
/>
</svg>
</button>
<button
aria-label="Paste from clipboard"
class="icon svelte-1ebruwp"
>
<svg
height="100%"
viewBox="0 0 24 24"
width="100%"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13.75 2a2.25 2.25 0 0 1 2.236 2.002V4h1.764A2.25 2.25 0 0 1 20 6.25V11h-1.5V6.25a.75.75 0 0 0-.75-.75h-2.129c-.404.603-1.091 1-1.871 1h-3.5c-.78 0-1.467-.397-1.871-1H6.25a.75.75 0 0 0-.75.75v13.5c0 .414.336.75.75.75h4.78a3.99 3.99 0 0 0 .505 1.5H6.25A2.25 2.25 0 0 1 4 19.75V6.25A2.25 2.25 0 0 1 6.25 4h1.764a2.25 2.25 0 0 1 2.236-2h3.5Zm2.245 2.096L16 4.25c0-.052-.002-.103-.005-.154ZM13.75 3.5h-3.5a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 0-1.5ZM15 12a3 3 0 0 0-3 3v5c0 .556.151 1.077.415 1.524l3.494-3.494a2.25 2.25 0 0 1 3.182 0l3.494 3.494c.264-.447.415-.968.415-1.524v-5a3 3 0 0 0-3-3h-5Zm0 11a2.985 2.985 0 0 1-1.524-.415l3.494-3.494a.75.75 0 0 1 1.06 0l3.494 3.494A2.985 2.985 0 0 1 20 23h-5Zm5-7a1 1 0 1 1 0-2a1 1 0 0 1 0 2Z"
fill="currentColor"
/>
</svg>
</button>
</span>
</div>
</div>
</div>
</div>View in Storybook
Chrome 105300x281
Linux Linux Ubuntu 20.04.4
9255ec on record-button-for-image-streaming
Caught exception in
play functionThis story threw an error after it finished rendering which means interactions may not have been executed fully.
Error: ignoredException
at https://649585a46a67480e3074dc75-qcdqimemvg.capture-loopback.chromatic.com/sb-preview/runtime.js:4:97731