necccc/index.html

## index.html
<!DOCTYPE HTML>
<html>
<head>
  <title>Binary streaming using Fetch</title>
</head>
<body>
  <h1>Binary streaming using Fetch</h1>

  <img src="">

  <script>

    let data = []

    const processing = function (done, value) {
      if (done) {
        const img = new Blob(data, { type: 'image/png' })
        document.querySelector('img').setAttribute('src', URL.createObjectURL(img))
        return
      }

      // doing something with the data...

      data.push(value)
    }

    const url = 'https://loremflickr.com/1200/720/nature'
    const req = new Request(url)

    console.log('loading...')

    fetch(req)
      .then(response => {
        const reader = response.body.getReader();

        const reading = function ({done, value}) {

          if (!done) {

            console.log('chunk loaded, size:', value.length)
            processing(false, value)
            reader.read().then(reading)

          } else {

            console.log('loaded!')
            processing(true)

          }

        }

        reader.read().then(reading)
      })
  </script>
</body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<title>Binary streaming using Fetch</title>
	</head>
	<body>
	<h1>Binary streaming using Fetch</h1>

	<img src="">

	<script>

	let data = []

	const processing = function (done, value) {
	if (done) {
	const img = new Blob(data, { type: 'image/png' })
	document.querySelector('img').setAttribute('src', URL.createObjectURL(img))
	return
	}

	// doing something with the data...

	data.push(value)
	}

	const url = 'https://loremflickr.com/1200/720/nature'
	const req = new Request(url)

	console.log('loading...')

	fetch(req)
	.then(response => {
	const reader = response.body.getReader();

	const reading = function ({done, value}) {

	if (!done) {

	console.log('chunk loaded, size:', value.length)
	processing(false, value)
	reader.read().then(reading)

	} else {

	console.log('loaded!')
	processing(true)

	}

	}

	reader.read().then(reading)
	})
	</script>
	</body>
	</html>