Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Waiting for many Promise actors / setting child state from parent?#5335

Unanswered
James-E-A asked this question inQ&A
Discussion options

I'm trying to wait for several resources to be acquired before advancing my state machine fromrecording.acquiring torecording.recording.

I thought that I should do this by makingrecording.acquiring a parallel state, for each resource that needs to be acquired, using itsonDone event to assign the result & then mark its parallel childready (final); then using therecording.acquiringonDone transition to enterrecording.recording.

This nearly worked, except that when the invoked actoronDone handlers try to switch the parallel child state, they end upresetting the state of all that parallel child's peers. (I thought to use invoked actors so that I can guarantee resources are cleaned up when the masterrecording state is eventually exited, no matter what reason.)

Settingreenter: false did not fix this. How can I accomplish what I'm trying to accomplish?

import{assign,createMachine,fromPromise}from"xstate";classMediaRecorderStream{constructor(stream,options){// ...}pipeTo(target,options){console.debug("<debug: pipeTo OK>");}}exportdefaultcreateMachine({id:"TapeRecorder",initial:"inactive",states:{inactive:{on:{action_record:"recording",},},recording:{initial:"acquiring",invoke:[{src:"MediaRecorderStream",id:"mic",input:{query:{audio:true,video:false},mimeType:"audio/webm;codecs=opus",},onDone:{actions:assign({mic:({ event})=>event.output}),target:".acquiring.acquiring_mic.ready",reenter:false,},onError:{actions:({ event})=>console.error(event.error),target:".stopped"},},{src:"FileWritableStream",id:"file",input:{suggestedName:"out.weba",},onDone:{actions:assign({file:({ event})=>event.output}),target:".acquiring.acquiring_file.ready",reenter:false,},onError:{actions:({ event})=>console.error(event.error),target:".stopped"},},],states:{acquiring:{type:"parallel",states:{acquiring_mic:{initial:"acquiring",states:{acquiring:{},ready:{type:"final",},},},acquiring_file:{initial:"acquiring",states:{acquiring:{},ready:{type:"final",},},},},onDone:"recording",},recording:{initial:"recording",invoke:{src:"PipeTo",input:({ context})=>({source:context.mic,target:context.file,}),},states:{recording:{on:{action_pause:"paused",},},paused:{on:{action_resume:"recording",},},},},stopped:{type:"final",},},on:{action_stop:".stopped",},onDone:"inactive",},},},{actors:{PipeTo:fromPromise(({input:{ source, target, options}, signal})=>source.pipeTo(target,options)),FileWritableStream:fromPromise(({input:options, signal})=>(//window.showSaveFilePicker(options)//new Promise((_resolve, reject) => setTimeout(() => reject(new Error("<debug>")), 1500))navigator.storage.getDirectory().then((d)=>d.getFileHandle(options.suggestedName,{create:true}))).then((f)=>f.createWritable())),MediaRecorderStream:fromPromise(({input:{ query, options}, signal})=>navigator.mediaDevices.getUserMedia(query).then((stream)=>newMediaRecorderStream(stream,options))),},},);

OK, on further study, I realized that a Promise actor isn't quite the correct tool here.

But when using other actors, which don't "produce output" and have to be wired up with a customready event, I'm having a hard time finding anyclean way to discriminate the different actors'ready events from one another:

import{assign,createMachine,fromCallback,fromPromise}from"xstate";classMediaRecorderStream{constructor(stream,options){// ...}pipeTo(target,options){console.debug("<debug: pipeTo OK>");}}exportdefaultcreateMachine({id:"TapeRecorder",initial:"inactive",states:{inactive:{on:{action_record:"recording",},},recording:{invoke:[{src:"MediaRecorderStream",id:"mic",input:{query:{audio:true,video:false},mimeType:"audio/webm;codecs=opus",fixme1:"nhpuv6",},onError:{actions:({ event})=>console.error(event.error),target:".stopped"},},{src:"FileWritableStream",id:"file",input:{options:{suggestedName:"out.weba"},fixme1:"xdj2de",},onError:{actions:({ event})=>console.error(event.error),target:".stopped"},},],initial:"acquiring",states:{acquiring:{type:"parallel",states:{acquiring_mic:{initial:"acquiring",states:{acquiring:{on:{ready_nhpuv6:{actions:assign({mic:({ event})=>event.output}),target:"ready",},},},ready:{type:"final",},},},acquiring_file:{initial:"acquiring",states:{acquiring:{on:{ready_xdj2de:{actions:assign({file:({ event})=>event.output}),target:"ready",},},},ready:{type:"final",},},},},onDone:"recording",},recording:{initial:"recording",invoke:{src:"PipeTo",input:({ context})=>({source:context.mic,target:context.file,}),},states:{recording:{on:{action_pause:"paused",},},paused:{on:{action_resume:"recording",},},},},stopped:{type:"final",},},on:{action_stop:".stopped",},onDone:"inactive",},},},{actors:{PipeTo:fromPromise(({input:{ source, target, options}, signal})=>source.pipeTo(target,options)),FileWritableStream:fromCallback(({ sendBack, receive,input:{ options, fixme1}, signal})=>{console.debug(signal);(//window.showSaveFilePicker(options)//new Promise((_resolve, reject) => setTimeout(() => reject(new Error("<debug>")), 1500))navigator.storage.getDirectory().then((d)=>d.getFileHandle(options.suggestedName,{create:true}))).then((f)=>f.createWritable()).then((w)=>sendBack({type:`ready_${fixme1}`,output:w}));return()=>{console.debug("<debug: cleanup file>");};}),MediaRecorderStream:fromCallback(({ sendBack, receive,input:{ query, options, fixme1}, signal})=>{navigator.mediaDevices.getUserMedia(query).then((media)=>sendBack({type:`ready_${fixme1}`,output:newMediaRecorderStream(media,options)}));return()=>{console.debug("<debug: cleanup media>");};}),},},);
You must be logged in to vote

Replies: 2 comments 2 replies

Comment options

Interim solution that isn't so unspeakably bad: have the actors brand theready events with their own IDs

/** * resourceActor({ *   acquire: async (options) => {...}, *   release: async (resource) => {...}, * }) */functionresourceActor({ acquire, release}){returnfromCallback(({input:options, self, sendBack})=>{varresource_=Promise.resolve(acquire(options));resource_.then((result)=>voidsendBack({type:"ready",output:result,_fixme_xstate_5335:self.id}),(error)=>voidsendBack({type:"error", error}));return()=>voidresource_.then((result)=>release(result));});}/** * on: { *   ready: { *     guard: fromActor("some_invoked_actor"), *     actions: assign({ some_resource: ({ event }) => event.output }), *     target: "ready", *   }, * }, */functionfromActor(id){return({ event})=>(event._fixme_xstate_5335===id);}
You must be logged in to vote
0 replies
Comment options

Would usingPromise.allSettled(…) as a single actor work here?

You must be logged in to vote
2 replies
@James-E-A
Comment options

I think not; I actually discovered that Promise actorscan't be used for resource management like I thought, since they're deemed to be terminated after settled.

I'm currently using a template for callback actorsas detailed here.

@James-E-A
Comment options

I've got a more fully worked examplehere, showing a pretty minimal "real-world" use-case of resource acquisition. I just can't see how to accomplish this without that annoying extra "tag" on the event.

Sign up for freeto join this conversation on GitHub. Already have an account?Sign in to comment
Category
Q&A
Labels
None yet
2 participants
@James-E-A@davidkpiano
[8]ページ先頭
©2009-2025 Movatter.jp