HarmonyOS 鸿蒙Next 如何使用web组件实现webrtc同屏，接受端怎么获取视频流并覆盖在当前页面上？

发布于 1周前 作者 songsunli 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 如何使用web组件实现webrtc同屏，接受端怎么获取视频流并覆盖在当前页面上？

如果使用web组件实现webrtc同屏，发起端可以在web组件中写一个发起同屏按钮调用屏幕捕获功能发出视频流，但是接收端需要在签到后每个页面都能接收到视频流并覆盖到当前页面之上。

原安卓应用的解决方案是发起端发起同屏会发送一个websocket消息，进行offer、answer传递，candidate交换，成功连接后在接收端页面上覆盖一个新视图层用来渲染视频流。鸿蒙这部分要怎么实现？如何将webrtc连接成功的消息传递出来？如何在接收端页面上覆盖视频流？


更多关于HarmonyOS 鸿蒙Next 如何使用web组件实现webrtc同屏，接受端怎么获取视频流并覆盖在当前页面上？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复
深色代码主题
复制
import web_webview from '@ohos.web.webview';
import business_error from '@ohos.base';
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  @State webResult: string = ''
  build() {
    Column() {
      Text(this.webResult).fontSize(20)
      Button('test')
        .onClick(() => {
          this.controller.runJavaScript('test()');
        })
      Web({ src: $rawfile('runJavaScript.html'), controller: this.controller })
        // .width(0)
        // .height(0)
        .visibility(this.webResult ?Visibility.Visible: Visibility.Hidden)
        .onConsole((event) => {
          if (event) {
            console.log('getMessage:' + event.message.getMessage())
            this.webResult=event.message.getMessage()
          }
          return false
        })
    }
  }
}
<!-- index.html -->
  <!DOCTYPE html>
  <html>
  <meta charset="utf-8">
  <body>
  Hello world!
  </body>
  <button id="Reload" type="button" onclick="test2()">Reload</button>
  <script type="text/javascript">
  function test() {
    console.log('Ark WebComponent')
    return "This value is from index.html"
  }
function test2() {
  console.log('Ark WebComponent')
  return "This value is from index.html"
}
</script>
  </html>

试试这个

更多关于HarmonyOS 鸿蒙Next 如何使用web组件实现webrtc同屏，接受端怎么获取视频流并覆盖在当前页面上？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，使用Web组件实现WebRTC同屏功能，并在接受端获取视频流并覆盖在当前页面上，可以通过以下步骤实现：

  1. 发送端设置WebRTC：

    • 使用WebRTC API创建PeerConnection。
    • 获取本地媒体流（视频和音频）。
    • 将媒体流添加到PeerConnection中。
    • 发送Offer给接收端。

  2. 接收端设置WebRTC：

    • 同样使用WebRTC API创建PeerConnection。
    • 设置ontrack事件监听器，用于接收发送端发送过来的媒体流。
    • 接收Offer并生成Answer，发送给发送端。

  3. 视频流覆盖当前页面：

    • 在接收端的Web组件中，创建一个video元素用于显示视频流。
    • 在ontrack事件触发时，将接收到的媒体流的视频轨道赋值给video元素的srcObject属性。
    • 使用CSS设置video元素的样式，确保其覆盖在页面上，例如设置position: absolute; top: 0; left: 0; width: 100%; height: 100%;。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。

回到顶部