{"action":"created","issue":{"url":"https://api.github.com/repos/nkzawa/socket.io-stream/issues/85","repository_url":"https://api.github.com/repos/nkzawa/socket.io-stream","labels_url":"https://api.github.com/repos/nkzawa/socket.io-stream/issues/85/labels{/name}","comments_url":"https://api.github.com/repos/nkzawa/socket.io-stream/issues/85/comments","events_url":"https://api.github.com/repos/nkzawa/socket.io-stream/issues/85/events","html_url":"https://github.com/nkzawa/socket.io-stream/issues/85","id":161257381,"number":85,"title":"Using socket io stream server as middleman to send streams from one client to another","user":{"login":"joshterrill","id":5368757,"avatar_url":"https://avatars0.githubusercontent.com/u/5368757?v=4","gravatar_id":"","url":"https://api.github.com/users/joshterrill","html_url":"https://github.com/joshterrill","followers_url":"https://api.github.com/users/joshterrill/followers","following_url":"https://api.github.com/users/joshterrill/following{/other_user}","gists_url":"https://api.github.com/users/joshterrill/gists{/gist_id}","starred_url":"https://api.github.com/users/joshterrill/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/joshterrill/subscriptions","organizations_url":"https://api.github.com/users/joshterrill/orgs","repos_url":"https://api.github.com/users/joshterrill/repos","events_url":"https://api.github.com/users/joshterrill/events{/privacy}","received_events_url":"https://api.github.com/users/joshterrill/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":9,"created_at":"2016-06-20T18:06:22Z","updated_at":"2018-05-14T08:43:05Z","closed_at":null,"author_association":"NONE","body":"Hello,\n\nI am trying to use `socket.io-stream` to send video data from `getUserMedia` from one client (the source), into another client where it will stream it into a `<video>` container. I'm using nwjs.io (node-webkit) as my source. I'm able to get desktop sharing video via:\n\n```\nvar gui = require(\"nw.gui\");\ngui.Screen.chooseDesktopMedia([\"window\",\"screen\"], function(streamId) {\n    var vid_constraint = {\n        mandatory: {\n            chromeMediaSource: 'desktop', \n            chromeMediaSourceId: streamId, \n            maxWidth: 1920, \n            maxHeight: 1080,\n            minFrameRate: 1,\n            maxFrameRate: 5\n        }, \n        optional:[]\n    };\n    navigator.webkitGetUserMedia({audio:false,video: vid_constraint}, \n        function(stream) {\n            document.getElementById('video_1').src = URL.createObjectURL(stream);\n            stream.onended = function() { \n                console.log(\"Ended\"); \n            };\n        }, \n        function(error) {\n            console.log('failure',error);\n        }\n    );\n});\n```\n\nThis starts a screen share, and sends the stream into `<video id=\"video_1\"></video>`. What I would like to do, is use `socket.io-stream` to take this video data, and send it to another client, probably a chrome browser. I've tried a few things...\n\n```\nvar socket = io.connect(\"http://localhost:3000\");\nnavigator.webkitGetUserMedia({audio:false,video: vid_constraint}, \n        function(stream) {\n            //document.getElementById('video_1').src = URL.createObjectURL(stream);\n                        ss(socket).emit(\"stream\", stream);\n            stream.onended = function() { \n                console.log(\"Ended\"); \n            };\n        }, \n        function(error) {\n            console.log('failure',error);\n        }\n    );\n```\n\nAnd then on NodeJS server:\n\n```\nvar express = require(\"express\");\nvar app = express();\nvar http = require('http').Server(app);\nvar io = require('socket.io')(http);\nvar ss = require('socket.io-stream');\n\napp.use(express.static('views'));\n\napp.get('/', function(req, res){\n  res.sendfile('views/index.html');\n});\n\nio.on('connection', function(socket){\n  ss(socket).on('stream', function(stream) {\n    ss(socket).emit(\"received-stream\", stream);\n  });\n});\n\nhttp.listen(3000, function(){\n  console.log('listening on *:3000');\n});\n```\n\nAnd then on the other client, the `views/index.html` file being served by the nodejs server:\n\n```\nvar socket = io.connect(\"http://localhost:3000\");\nss(socket).on(\"received-stream\", function(data) {\n  console.log(data);\n  document.getElementById('video_1').src = URL.createObjectURL(data);\n})\n```\n\nI can't seem to get both of the client's to talk to each other....\n"},"comment":{"url":"https://api.github.com/repos/nkzawa/socket.io-stream/issues/comments/388741462","html_url":"https://github.com/nkzawa/socket.io-stream/issues/85#issuecomment-388741462","issue_url":"https://api.github.com/repos/nkzawa/socket.io-stream/issues/85","id":388741462,"user":{"login":"Dcros","id":37849856,"avatar_url":"https://avatars0.githubusercontent.com/u/37849856?v=4","gravatar_id":"","url":"https://api.github.com/users/Dcros","html_url":"https://github.com/Dcros","followers_url":"https://api.github.com/users/Dcros/followers","following_url":"https://api.github.com/users/Dcros/following{/other_user}","gists_url":"https://api.github.com/users/Dcros/gists{/gist_id}","starred_url":"https://api.github.com/users/Dcros/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Dcros/subscriptions","organizations_url":"https://api.github.com/users/Dcros/orgs","repos_url":"https://api.github.com/users/Dcros/repos","events_url":"https://api.github.com/users/Dcros/events{/privacy}","received_events_url":"https://api.github.com/users/Dcros/received_events","type":"User","site_admin":false},"created_at":"2018-05-14T08:43:05Z","updated_at":"2018-05-14T08:43:05Z","author_association":"NONE","body":"Solution = encode the stream into a unit8 array stream with format .png and then in the other side recive it and pass it from base64 to img frames replayed on some <canvas>: example:\r\ni use opencv in this example to encode the streamed frames from my webcam-->\r\n\r\nfunction sendToWeb(err,pm) {\r\n    if(err){ console.log(\"Cant Send the Frames\")}\r\n    pm = cv.imencode('.png',frameResized)\r\n    socket.emit('frame', { pm });      \r\n};\r\n\r\nthis is how you encode the streamed video frames \"frameResized\"\r\nfor getUserMedia(); i dont know how to encode but sure in google its something...\r\n{DONT TAKE IT LITTERALY ITS JUST A EXAMPLE FROM MY PROJECT only to get you the idea how to try it.}\r\n\r\nyou send the encoded unit8 array with .png format from server or client (in my case dosent matter works on both sides) \r\n\r\nin the other side you should recive it as:\r\n\r\n//image video frames buffer to Base64\r\nfunction _arrayBufferToBase64(buffer) {\r\n    var binary = '';\r\n    var bytes = new Uint8Array(buffer);\r\n    var len = bytes.byteLength;\r\n    for (var i = 0; i < len; i++) {\r\n        binary += String.fromCharCode( bytes[ i ] );\r\n    }\r\n    return binary;\r\n}\r\n\r\n//the printed recived video\r\nfunction startScan(){\r\n       var sstr = \"StartEye\"\r\n       //ignore this just the start for which socket to use\r\n       openIfSocket(sstr);\r\n       var canvass = document.getElementById('canvas-fDR');\r\n       var context = canvass.getContext('2d');\r\n       var img = new Image();\r\n       // show loading notice\r\n       context.fillStyle = '#333';\r\n       context.fillText('Loading...', canvass.width/2-30, canvass.height/3);\r\n       socket.on('frame', function (data) {\r\n       //the data.im its the encoded  unit8 frames or video stream from where are sending it using socket.io\r\n       //here you conver to base64 the unit8 array by the function _arrayBufferToBase64.\r\n       var b64encoded = btoa(_arrayBufferToBase64(data.im)); \r\n       //console.log(b64encoded)\r\n       //var base64String = data.im;\r\n       img.onload = function () {\r\n           context.drawImage(this, 0, 0, canvass.width, canvass.height);\r\n       };\r\n       img.src = 'data:image/png;base64,' + b64encoded;\r\n       });\r\n};"}}
{"actor":{"display_login":"Dcros"}}