Electron+React+WebRTC screen sharing (2): get video stream
Mobx management status
import { observable } from "mobx"; let rtcState = observable({ sources:[], sourceId:-1, mediaStream:null, SetAllSources :function(sources){ //Zimiao haunting blog (azimiao. com) sets all source references this.sources.replace(sources); }, SetChoseId : function(index){ //Set the selected id zi to haunt the blog (azimiao. com) try { this.sourceId = this.sources[index].id; return true; } catch (error) { // throw error; //Blog return false; } }, GetMediaStream : function(){ //Get video stream }, Clear:function(){ //Clear information this.sources = []; this.sourceId = -1; this.mediaStream = null; } }); export {rtcState}
Electron gets the WebRTC window list
navigator.mediaDevices.getUserMedia({ audio:true, video:true }).then((source)=>{ console.log(source); }).catch(e=>{ alert(e);// Zimiao haunting blog (azimiao. com) })
{ //An identifier of a window or screen, //When calling [navigator. webkitGetUserMedia], you can use [Zimiao Blog (azimiao. com)] as the chromeMediaSourceId constraint. //The identifier format is: window: XX or screen: XX. XX is a randomly generated number id:"screen:0:0", //The screen source will be named Entire Screen or Screen<index>, and the name of the window source will match the window title name:"Screen 0", //Thumbnail thumbnail:NativeImage, display_id:"0", appIcon:NativeImage }
desktopCapturer.getSources({ types: ["window", 'screen'] }).then((sources) => { rtcState.SetAllSources(sources); }).catch((err) => { alert("Error:" + err); })
//rtcState.jsx GetMediaStream : function(){ return navigator.mediaDevices.getUserMedia({ audio:{ mandatory:{ chromeMediaSource:"desktop" } },//A | z | m | i | a | o |. c-o-m video:{ mandatory:{ chromeMediaSource:"desktop", chromeMediaSourceId:rtcState.sourceId, minWidth:640, maxWidth:1920, minHeight:360, maxHeight:1080 } } }); },
React component
render() { if (! Array.isArray(rtcState.sources) || rtcState.sources.length <= 0) { return ( <div className="content"> <h4><center>Now Fecth All Screen</center></h4> </div> ); } return (<div className="content">{rtcState.sources.map((e, index) => { var thumb = e.thumbnail.toDataURL(); if (thumb) { return <PrevScreen key={e.name} sourceId={index} imgUrl={thumb} title={e.name} onItemClick={this.onItemClick} /> } })} </div>) }
onItemClick(index) { if(rtcState. SetChoseId(index)){ console.log("try to jump start share"); //The state machine defined in the topmost component is used to switch different sub components this.props.entryCallBack("testshow"); } }
constructor(props){ super(props); this.state = {}; this.getSomething = this.getSomething.bind(this); this.getSomething();// Zimiao haunting blog (azimiao. com) } render(){ return( <video style={{maxWidth:100 + "%",maxHeight:"auto"}} id="testId"></video> ) } getSomething(){ rtcState.GetMediaStream().then((stream)=>{ document.getElementById("testId").srcObject = stream; document.getElementById("testId").play(); }). catch (e=>{//Zimiao haunting blog (azimiao. com) console.log(e); }) }