Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.

5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
5 роки тому
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207
  1. const VideoConfig = Object.seal({
  2. videoOn: true,
  3. audioOn: true,
  4. get video() {
  5. return VideoConfig.videoOn
  6. && State.online.length < 10
  7. && params.get('v') !== '0'
  8. && {width: {ideal: 320}, facingMode: 'user', frameRate: 26}
  9. },
  10. get audio() {
  11. return VideoConfig.audioOn
  12. && params.get('a') !== '0'
  13. },
  14. toggle: (property) => () => {
  15. VideoConfig[property] = !VideoConfig[property]
  16. updateSelfVideo()
  17. },
  18. view() {
  19. return [
  20. m('button', {onclick: VideoConfig.toggle('videoOn')}, 'video'),
  21. m('button', {onclick: VideoConfig.toggle('audioOn')}, 'audio'),
  22. ]
  23. }
  24. })
  25. const updateSelfVideo = async () => {
  26. const video = document.querySelector('video.self')
  27. video.srcObject.getTracks().forEach(track => {
  28. track.stop()
  29. video.srcObject.removeTrack(track)
  30. delete track
  31. })
  32. if(VideoConfig.videoOn || VideoConfig.audioOn) {
  33. await navigator.mediaDevices
  34. .getUserMedia(VideoConfig)
  35. .then(s => s.getTracks().forEach(t => video.srcObject.addTrack(t)))
  36. .catch(e => console.error(e))
  37. }
  38. video.srcObject = video.srcObject // safari
  39. wire({kind: 'peerInfo', value: {type: 'request'}})
  40. }
  41. const updateOtherVideo = (target, dom) => {
  42. dom.srcObject = new MediaStream()
  43. let rpc = null
  44. const rpcConfig = {iceServers: [{
  45. urls: ['stun:stun.pico.chat:5349', 'turn:turn.pico.chat:5349'],
  46. username: 'roderic',
  47. credential: 'tomodachi',
  48. }]}
  49. const stopRpc = () => {
  50. rpc && rpc.close()
  51. dom.srcObject.getTracks().forEach(track => {
  52. track.stop()
  53. dom.srcObject.removeTrack(track)
  54. delete track
  55. })
  56. }
  57. const resetRpc = () => {
  58. stopRpc()
  59. rpc = new RTCPeerConnection(rpcConfig)
  60. document.querySelector('video.self').srcObject.getTracks()
  61. .forEach(t => rpc.addTrack(t))
  62. rpc.onicecandidate = ({candidate}) => {
  63. if(candidate && candidate.candidate) {
  64. const value = {type: 'candidate', candidate}
  65. wire({kind: 'peerInfo', value, target})
  66. }
  67. }
  68. rpc.ontrack = ({track}) => {
  69. dom.srcObject.addTrack(track)
  70. dom.srcObject = dom.srcObject
  71. }
  72. }
  73. dom.listener = async ({detail: {source, value}}) => {
  74. if(source !== target) {
  75. return
  76. }
  77. console.log(source, value.type)
  78. if(value.type === 'request') {
  79. resetRpc()
  80. const localOffer = await rpc.createOffer()
  81. await rpc.setLocalDescription(localOffer)
  82. wire({kind: 'peerInfo', value: localOffer, target})
  83. }
  84. else if(value.type === 'offer') {
  85. resetRpc()
  86. const remoteOffer = new RTCSessionDescription(value)
  87. await rpc.setRemoteDescription(remoteOffer)
  88. const localAnswer = await rpc.createAnswer()
  89. await rpc.setLocalDescription(localAnswer)
  90. wire({kind: 'peerInfo', value: localAnswer, target})
  91. }
  92. else if(value.type === 'answer') {
  93. const remoteAnswer = new RTCSessionDescription(value)
  94. await rpc.setRemoteDescription(remoteAnswer)
  95. }
  96. else if(value.type === 'candidate') {
  97. const candidate = new RTCIceCandidate(value.candidate)
  98. await rpc.addIceCandidate(candidate)
  99. }
  100. else if(value.type === 'stop') {
  101. stopRpc()
  102. }
  103. }
  104. addEventListener('peerInfo', dom.listener)
  105. }
  106. const Video = {
  107. setUp: (username) => ({dom}) => {
  108. dom.srcObject = new MediaStream()
  109. if(username === State.username) {
  110. dom.classList.add('self')
  111. dom.muted = true
  112. updateSelfVideo()
  113. }
  114. else {
  115. updateOtherVideo(username, dom)
  116. }
  117. },
  118. tearDown: (username) => ({dom}) => {
  119. removeEventListener('peerInfo', dom.listener)
  120. dom.srcObject.getTracks().forEach(track => {
  121. track.stop()
  122. dom.srcObject.removeTrack(track)
  123. delete track
  124. })
  125. },
  126. view({attrs: {username}}) {
  127. const styleOuter = {
  128. position: 'relative',
  129. display: 'block',
  130. color: 'white',
  131. overflow: 'hidden',
  132. }
  133. const styleMeta = {
  134. position: 'absolute',
  135. display: 'flex',
  136. alignItems: 'center',
  137. justifyContent: 'center',
  138. height: '100%',
  139. width: '100%',
  140. fontFamily: 'monospace',
  141. fontSize: 'xxx-large',
  142. }
  143. const styleVideo = {
  144. objectFit: Settings.get('blackBars') ? 'contain' : 'cover',
  145. width: '100%',
  146. height: '100%',
  147. transform: 'scaleX(-1)',
  148. }
  149. return m('.video-container', {style: styleOuter},
  150. m('.video-info', {style: styleMeta},
  151. m('.username', username),
  152. ),
  153. m('video[playsinline][autoplay]', {
  154. style: styleVideo,
  155. oncreate: this.setUp(username),
  156. onremove: this.tearDown(username),
  157. }),
  158. )
  159. },
  160. }
  161. const StreamContainer = {
  162. getColumns() {
  163. const n = State.online.length
  164. if(n > 5 * 5) return '1fr 1fr 1fr 1fr 1fr 1fr'
  165. if(n > 4 * 4) return '1fr 1fr 1fr 1fr 1fr'
  166. if(n > 3 * 3) return '1fr 1fr 1fr 1fr'
  167. if(n > 2 * 2) return '1fr 1fr 1fr'
  168. if(n > 1 * 1) return '1fr 1fr'
  169. return '1fr'
  170. },
  171. getRows() {
  172. const n = State.online.length
  173. if(n > 5 * 6) return '1fr 1fr 1fr 1fr 1fr 1fr'
  174. if(n > 4 * 5) return '1fr 1fr 1fr 1fr 1fr'
  175. if(n > 3 * 4) return '1fr 1fr 1fr 1fr'
  176. if(n > 2 * 3) return '1fr 1fr 1fr'
  177. if(n > 1 * 2) return '1fr 1fr'
  178. return '1fr'
  179. },
  180. view() {
  181. const dims = [StreamContainer.getRows(), StreamContainer.getColumns()]
  182. if(innerHeight > innerWidth) dims.reverse()
  183. const style = {
  184. backgroundColor: 'black',
  185. overflow: 'hidden',
  186. display: 'grid',
  187. gridTemplateRows: dims[0],
  188. gridTemplateColumns: dims[1],
  189. }
  190. return m('.videos', {style},
  191. State.online.map(username => m(Video, {key: username, username}))
  192. )
  193. },
  194. }
  195. const signalPeerStop = (username) => signal({kind: 'peerInfo', value: {type: 'stop'}, source: username})
  196. addEventListener('pagehide', () => State.online.forEach(signalPeerStop))
  197. addEventListener('logout', () => State.online.forEach(signalPeerStop))