MediaStreamTrackGenerator-video.https.html

<!DOCTYPE html>

<html>

<head>

<title>MediaStream Insertable Streams - Video</title>

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="/webrtc/RTCPeerConnection-helper.js"></script>

</head>

<body>

  <p class="instructions">When prompted, use the accept button to give permission to use your audio and video devices.</p>

  <h1 class="instructions">Description</h1>

  <p class="instructions">This test checks that generating video MediaStreamTracks works as expected.</p>

  <script>

    const pixelColour = [50, 100, 150, 255];

    const height = 240;

    const width = 320;

    function makeVideoFrame(timestamp) {

      const canvas = new OffscreenCanvas(width, height);

      const ctx = canvas.getContext('2d', {alpha: false});

      ctx.fillStyle = `rgba(${pixelColour.join()})`;

      ctx.fillRect(0, 0, width, height);

      return new VideoFrame(canvas, {timestamp, alpha: 'discard'});

    async function getVideoFrame() {

      const stream = await getNoiseStream({video: true});

      const input_track = stream.getTracks()[0];

      const processor = new MediaStreamTrackProcessor(input_track);

      const reader = processor.readable.getReader();

      const result = await reader.read();

      input_track.stop();

      return result.value;

    function assertPixel(t, bytes, expected, epsilon = 5) {

      for (let i = 0; i < bytes.length; i++) {

        t.step(() => {

          assert_less_than(Math.abs(bytes[i] - expected[i]),  epsilon, "Mismatched pixel");

});

    async function initiateSingleTrackCall(t, track, output) {

      const caller = new RTCPeerConnection();

      t.add_cleanup(() => caller.close());

      const callee = new RTCPeerConnection();

      t.add_cleanup(() => callee.close());

      caller.addTrack(track);

      t.add_cleanup(() => track.stop());

      exchangeIceCandidates(caller, callee);

      // Wait for the first track.

      const e = await exchangeOfferAndListenToOntrack(t, caller, callee);

      output.srcObject = new MediaStream([e.track]);

      // Exchange answer.

      await exchangeAnswer(caller, callee);

      await waitForConnectionStateChange(callee, ['connected']);

    promise_test(async t => {

      const videoFrame = await getVideoFrame();

      const originalWidth = videoFrame.displayWidth;

      const originalHeight = videoFrame.displayHeight;

      const originalTimestamp = videoFrame.timestamp;

      const generator = new MediaStreamTrackGenerator({kind: 'video'});

      t.add_cleanup(() => generator.stop());

      // Use a MediaStreamTrackProcessor as a sink for |generator| to verify

      // that |processor| actually forwards the frames written to its writable

      // field.

      const processor = new MediaStreamTrackProcessor(generator);

      const reader = processor.readable.getReader();

      const readerPromise = new Promise(async resolve => {

        const result = await reader.read();

        assert_equals(result.value.displayWidth, originalWidth);

        assert_equals(result.value.displayHeight, originalHeight);

        assert_equals(result.value.timestamp, originalTimestamp);

        resolve();

});

      generator.writable.getWriter().write(videoFrame);

      return readerPromise;

    }, 'Tests that MediaStreamTrackGenerator forwards frames to sink');

    promise_test(async t => {

      const videoFrame = makeVideoFrame(1);

      const originalWidth = videoFrame.displayWidth;

      const originalHeight = videoFrame.displayHeight;

      const generator = new MediaStreamTrackGenerator({ kind: 'video' });

      t.add_cleanup(() => generator.stop());

      const video = document.createElement("video");

      video.autoplay = true;

      video.width = 320;

      video.height = 240;

      video.srcObject = new MediaStream([generator]);

      video.play();

      // Wait for the video element to be connected to the generator and

      // generate the frame.

      video.onloadstart = () => generator.writable.getWriter().write(videoFrame);

      return new Promise((resolve)=> {

        video.ontimeupdate = t.step_func(() => {

          const canvas = document.createElement("canvas");

          canvas.width = originalWidth;

          canvas.height = originalHeight;

          const context = canvas.getContext('2d');

          context.drawImage(video, 0, 0);

          // Pick a pixel in the centre of the video and check that it has the colour of the frame provided.

          const pixel = context.getImageData(videoFrame.displayWidth/2, videoFrame.displayHeight/2, 1, 1);

          assertPixel(t, pixel.data, pixelColour);

          resolve();

});

});

    }, 'Tests that frames are actually rendered correctly in a stream used for a video element.');

    promise_test(async t => {

      const generator = new MediaStreamTrackGenerator({kind: 'video'});

      t.add_cleanup(() => generator.stop());

      // Write frames for the duration of the test.

      const writer = generator.writable.getWriter();

      let timestamp = 0;

      const intervalId = setInterval(

          t.step_func(async () => {

            if (generator.readyState === 'live') {

              timestamp++;

              await writer.write(makeVideoFrame(timestamp));

}),

          40);

      t.add_cleanup(() => clearInterval(intervalId));

      const video = document.createElement('video');

      video.autoplay = true;

      video.width = width;

      video.height = height;

      video.muted = true;

      await initiateSingleTrackCall(t, generator, video);

      return new Promise(resolve => {

        video.ontimeupdate = t.step_func(() => {

          const canvas = document.createElement('canvas');

          canvas.width = width;

          canvas.height = height;

          const context = canvas.getContext('2d');

          context.drawImage(video, 0, 0);

          // Pick a pixel in the centre of the video and check that it has the

          // colour of the frame provided.

          const pixel = context.getImageData(width / 2, height / 2, 1, 1);

          // Encoding/decoding can add noise, so increase the threshhold to 8.

          assertPixel(t, pixel.data, pixelColour, 8);

          resolve();

});

});

    }, 'Tests that frames are actually rendered correctly in a stream sent over a peer connection.');

    promise_test(async t => {

      const generator = new MediaStreamTrackGenerator({kind: 'video'});

      t.add_cleanup(() => generator.stop());

      const inputCanvas = new OffscreenCanvas(width, height);

      const inputContext = inputCanvas.getContext('2d', {alpha: false});

      // draw four quadrants

      const colorUL = [255, 0, 0, 255];

      inputContext.fillStyle = `rgba(${colorUL.join()})`;

      inputContext.fillRect(0, 0, width / 2, height / 2);

      const colorUR = [255, 255, 0, 255];

      inputContext.fillStyle = `rgba(${colorUR.join()})`;

      inputContext.fillRect(width / 2, 0, width / 2, height / 2);

      const colorLL = [0, 255, 0, 255];

      inputContext.fillStyle = `rgba(${colorLL.join()})`;

      inputContext.fillRect(0, height / 2, width / 2, height / 2);

      const colorLR = [0, 255, 255, 255];

      inputContext.fillStyle = `rgba(${colorLR.join()})`;

      inputContext.fillRect(width / 2, height / 2, width / 2, height / 2);

      // Write frames for the duration of the test.

      const writer = generator.writable.getWriter();

      let timestamp = 0;

      const intervalId = setInterval(

          t.step_func(async () => {

            if (generator.readyState === 'live') {

              timestamp++;

              await writer.write(new VideoFrame(

                  inputCanvas, {timestamp: timestamp, alpha: 'discard'}));

}),

          40);

      t.add_cleanup(() => clearInterval(intervalId));

      const caller = new RTCPeerConnection();

      t.add_cleanup(() => caller.close());

      const callee = new RTCPeerConnection();

      t.add_cleanup(() => callee.close());

      const sender = caller.addTrack(generator);

      exchangeIceCandidates(caller, callee);

      // Wait for the first track.

      const e = await exchangeOfferAndListenToOntrack(t, caller, callee);

      // Exchange answer.

      await exchangeAnswer(caller, callee);

      await waitForConnectionStateChange(callee, ['connected']);

      const params = sender.getParameters();

      params.encodings.forEach(e => e.scaleResolutionDownBy = 2);

      sender.setParameters(params);

      const processor = new MediaStreamTrackProcessor(e.track);

      const reader = processor.readable.getReader();

      // The first frame may not have had scaleResolutionDownBy applied

      const numTries = 5;

      for (let i = 1; i <= numTries; i++) {

        const {value: outputFrame} = await reader.read();

        if (outputFrame.displayWidth !== width / 2) {

          assert_less_than(i, numTries, `First ${numTries} frames were the wrong size.`);

          outputFrame.close();

          continue;

        assert_equals(outputFrame.displayWidth, width / 2);

        assert_equals(outputFrame.displayHeight, height / 2);

        const outputCanvas = new OffscreenCanvas(width / 2, height / 2);

        const outputContext = outputCanvas.getContext('2d', {alpha: false});

        outputContext.drawImage(outputFrame, 0, 0);

        outputFrame.close();

        // Check the four quadrants

        const pixelUL = outputContext.getImageData(width / 8, height / 8, 1, 1);

        assertPixel(t, pixelUL.data, colorUL);

        const pixelUR =

            outputContext.getImageData(width * 3 / 8, height / 8, 1, 1);

        assertPixel(t, pixelUR.data, colorUR);

        const pixelLL =

            outputContext.getImageData(width / 8, height * 3 / 8, 1, 1);

        assertPixel(t, pixelLL.data, colorLL);

        const pixelLR =

            outputContext.getImageData(width * 3 / 8, height * 3 / 8, 1, 1);

        assertPixel(t, pixelLR.data, colorLR);

        break;

    }, 'Tests that frames are sent correctly with RTCRtpEncodingParameters.scaleResolutionDownBy.');

    promise_test(async t => {

      const generator = new MediaStreamTrackGenerator("video");

      t.add_cleanup(() => generator.stop());

      const writer = generator.writable.getWriter();

      const frame = makeVideoFrame(1);

      await writer.write(frame);

      assert_equals(generator.kind, "video");

      assert_equals(generator.readyState, "live");

    }, "Tests that creating a Video MediaStreamTrackGenerator works as expected");

    promise_test(async t => {

      const generator = new MediaStreamTrackGenerator("video");

      t.add_cleanup(() => generator.stop());

      const writer = generator.writable.getWriter();

      const frame = makeVideoFrame(1);

      await writer.write(frame);

      assert_throws_dom("InvalidStateError", () => frame.clone(), "VideoFrame wasn't destroyed on write.");

    }, "Tests that VideoFrames are destroyed on write.");

    promise_test(async t => {

      const generator = new MediaStreamTrackGenerator("audio");

      t.add_cleanup(() => generator.stop());

      const writer = generator.writable.getWriter();

      const frame = makeVideoFrame(1);

      assert_throws_js(TypeError, writer.write(frame));

    }, "Mismatched frame and generator kind throws on write.");

  </script>

</body>

</html>

Source code

Revision control

Copy as Markdown

Other Tools

Test Info: Warnings