what can i use this js library to save a video stream from the scoket.

[cryingbat]

It is now possible to retrieve a piece of video stream data from the back end using sockets. Araybuffer type. Can I use this JS library to save the data stream in a video format file? If I can, what should I do?

[jimmywarting]

Yes, it's possible.

// create a writable stream
const fileStream = streamSaver.createWriteStream('filename.mp4')
const writer = fileStream.getWriter()

// When you get data from your websocket you
// have to write it to the writeStream
socket.onmessage = arrayBuffer => {
  writer.write(Uint8Array.from(arrayBuffer))
}

// Sometime later when all data is finish then you need to close the
// stream to signal that you are done with it
writer.close()

[jimmywarting]

But if it's possible just do what the streamsaver lib dose. Send the video with content-disposition attachment header and regular http response instead of using a WebSocket

[cryingbat]

thankyou your answer,The fact is, the back end uses websocket to transmit video stream data in real time, and I get arraybuffer. I want to implement the video recording function, intercept a video stream and save it as a file in MP4 format. Download it directly from the browser.

[jimmywarting]

ok

[cryingbat]

Thank you again. Tomorrow I will study it.

[cryingbat]

excuse me， i test the code you say，but always get ‘Cannot write to a closed writable stream’， what means？where is it my fault？

var fileStream = streamSaver.createWriteStream('filename.mp4'),
      writer = fileStream.getWriter();
var renderTimer = timer(function() {
    a++;
    writer.write(Uint8Array.from(arraybuffer));
     if(a>=250) {
        writer.close();
     }
})

i console writer got WritableStreamDefaultWriter {} closed: Promise proto: Promise

desiredSize: (...) ready: Promise proto: Object

[jimmywarting]

you should stop the renderTimer after you call writer.close()

You cannot write to a closed writable stream

writer.close(); closes the stream

[cryingbat]

hello,i try this code

// start the record
recordstart = function () {
  recordTimer = timer(function () {  // start the timer
    var fr = new FileReader()
    fr.onloadend = function (e) {
      writefile(fr.result)
    }
    fr.onload = function (e) {
      writefile(fr.result)
        }
        fr.readAsArrayBuffer(arraybuffer)
  })
  function writefile (result) {
    var bufs = new Uint8Array(result)
        var protobuf = proto.FrameTrans.FrameData.deserializeBinary(bufs)
        writer.write(protobuf.getVideoBuffer())
  }
}
// close the record
recordstop = function () {
  $interval.cancel(recordTimer) // clear the timer
  $timeout(function () {
    writer.close()
  }, 1000)
}

the first record ok， but when i try again ，i get the error info TypeError: Cannot write to a closed writable stream at writefile this problem same as i asked you before， you say

you should stop the renderTimer after you call writer.close() You cannot write to a closed writable stream writer.close(); closes the stream

i has do this，but this problem always exist； what should i do？

[jimmywarting]

if you stop the writable stream you then have to create a new writableStream if you want to save something new

start() {
  var fileStream = streamSaver.createWriteStream('filename.mp4')
  var writer = fileStream.getWriter()
}

[cryingbat]

hi，I'm disturbing you again. I encountered another problem in the process of using it. I put streamsaver. JS sw. JS mitm. HTML in the Lib / streamsaver directory of my project. Introduce streamsaver. JS into the entry file index. html, and then report errors when using downloaded video streams

failed to load resources :: netERR_cert_authority_invalid; Uncatcaught(in promise )DOMExecption

this error i don't what means?

oh.i changed the mitm.html =》

const streamSaver = {
    createWriteStream,
    WritableStream: window.WritableStream || ponyfill.WritableStream,
    supported: false,
    version: { full: '1.2.0', major: 1, minor: 2, dot: 0 },
   + mitm: myip：myport/mitm.html?version=1.2.0',
   + ping: 'myip：myport/ping.html?version=1.2.0'
  }

and how to change which file i can use this lib without access to other third playback connections is required（such as your link jimmywarting.github.io//）