关于通过 websocket 转发 `navigator.mediaDevices.getDisplayMedia` 的 MediaStream 数据

2023-02-18 16:43:09 +08:00
 fzdwx

大概需求就是局域网内分享屏幕的一个功能

  1. 第一个进入房间的用户就是分享者
  2. 后面进入这个房间的用户都能看到第一个人分享的屏幕

这个是客户端发送的代码:

 // send stream to server
 mediaRecorder = new MediaRecorder(stream);
 mediaRecorder.ondataavailable = (e) => {
     if (e.data.size > 0) {
         socket.send(e.data);
     }
 }
 mediaRecorder.start(1000);

服务端转发的代码:

socket.onmessage = (m) => {
    broadcast(
        room,
        m.data
    );
};

// broadcast 最后也是直接发送: socket.send(message);

然后客户端接收:

const blob = new Blob([m.data], {type: "video/webm;codecs=vp8"});
video.src = URL.createObjectURL(blob);

客户端最后数据也能接受到,但是就是好像解析不了:

一直转圈圈,求大佬解答!

580 次点击
所在节点    问与答
5 条回复
okakuyang
2023-02-18 21:03:30 +08:00
我觉得你可以先不要转发,在同一个网页上试一下能不能自己录制再播放。
另外一个是,你的视频每一次回调只有一秒钟的数据,这个数据是不是太短了,尝试设置更长时间。
ysc3839
2023-02-18 21:19:22 +08:00
建议改用 WebRTC
fzdwx
2023-02-18 21:24:42 +08:00
@ysc3839 #2

就是一个小需求,就是这周 cr 的时候,我的 linux 连不了那个大屏,所以想写个这种程序,然后我就可以直接分享了。。。
fzdwx
2023-02-18 21:26:32 +08:00
@okakuyang #1

我看了 ws 数据包,服务端转发的时候 显示的数据是 0b, 但是客户端的 ws 却能接收到数据

![image]( https://user-images.githubusercontent.com/65269574/219868340-76109402-82f6-4776-b854-ccc4c823782b.png)

然后用 MediaRecorder 在本机能播放的
ysc3839
2023-02-18 21:28:28 +08:00
@fzdwx 小需求的话更不应该自己写代码了,网上都有一堆 WebRTC 的项目,部署一下就能用了

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/917186

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX