<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Setting a blob through srcObject after a MediaStream</title>
    <script src="/resources/testharness.js"></script>
    <script src="/resources/testharnessreport.js"></script>
</head>
<body>
    <video id="video1" controls autoplay playsInline></video>
    <video id="video2" controls autoplay playsInline></video>
    <script>
function waitFor(duration)
{
    return new Promise((resolve) => setTimeout(resolve, duration));
}

promise_test(async (test) => {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
    video1.srcObject = stream;
    await video1.play();

    const recorder = new MediaRecorder(stream);
    const dataPromise = new Promise(resolve => recorder.ondataavailable = (e) => resolve(e.data));

    const startPromise = new Promise(resolve => recorder.onstart = resolve);
    recorder.start();
    await startPromise;

    await waitFor(100);
    recorder.stop();
    const blob = await dataPromise;

    video1.srcObject = blob;
    video2.srcObject = blob;
    await video1.play();
    await video2.play();

    assert_equals(video1.duration, video2.duration);
}, "Setting srcObject to MediaStream and then Blob");

    </script>
</body>
</html>