直播模式(live mode)报错

[theores]

这是一个vue路由组件，

<template>
  <div class="w-screen h-screen" ref="replayerBox"></div>
</template>

<script lang="ts" setup>
import { ref, onMounted, inject } from 'vue';
import { Replayer } from 'rrweb';
import 'rrweb/dist/rrweb.min.css';
import { eventWithTime } from 'rrweb/typings/types';

const replayerBox = ref();
const socket = inject<any>('socket');
const events: eventWithTime[] = [];

onMounted(() => {
  const replayerLive = new Replayer(events, {
    root: replayerBox.value,
    liveMode: true,
  });

  socket.emit('startLive', { isStart: true });
  socket.on('rrwebLive', (e: any) => {
    if (events.length === 1) replayerLive.startLive(events[0].timestamp - 100);
    replayerLive.addEvent(e);
  });
});
</script>
<style scoped></style>

我只是new了一个replayer，什么都没干，但是打开该页面时控制台直接报错：

Blocked script execution in 'about:blank' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.

并且socket可以正确获取录制页的动作数据，但是replayerLive.addEvent(e)好像没有起任何作用，播放页只显示一个鼠标指针，没有任何动作同步。

[Yuyz0112]

这个错误是正常的，不影响执行。

可以在 socket.on('rrwebLive') 内打印 event 看看顺序和值是否正确。

[theores]

这个错误是正常的，不影响执行。

可以在 socket.on('rrwebLive') 内打印 event 看看顺序和值是否正确。

我在这个地方打印了一下，

socket.on('rrwebLive', (e: any) => {
    console.log(e);
    replayerLive.startLive(500);
    replayerLive.addEvent(e);
  });

数据看起来是正常的，但是页面始终只显示一个静止的鼠标指针。

[Yuyz0112]

应该在一开始收到一个 type 为 2 的 event。 可以再打印一下源端 emit callback 的 event，看看是否每个都正确传输了。

[theores]

一开始收到了4和2，后面的是3。emit里打印的event和在直播页面打印的一样，我录制页是这样写的：

<template>
  <div class="p-10px h-100vh w-100vw overflow-hidden flex flex-col gap-10px">
    <div>
      <el-button @click="$router.back">返回首页</el-button>
      <el-button @click="onStartRecord(false)">开始录制</el-button>
      <el-button @click="onStopRecord">停止录制录制</el-button>
      <el-button @click="onStartReplay">播放回放</el-button>
      <el-button @click="onOpenLivePage">
       打开直播页面
      </el-button>
      <el-button @click="onRemoteCtrl">打开远控页面</el-button>
    </div>
    <div class="flex-1 grid grid-cols-2 gap-20px">
      <div class="border-dashed border-warm-gray-200 border-2px p-10px">
        <formDemo></formDemo>
      </div>
      <div class="hide-rrweb-dom border-dashed border-warm-gray-200 border-2px" ref="replayerBox"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, inject, onMounted } from 'vue';
import { record, Replayer } from 'rrweb';
import 'rrweb/dist/rrweb.min.css';
import { eventWithTime, listenerHandler } from 'rrweb/typings/types';
import formDemo from '/@/components/form-demo.vue';
import { Socket } from 'socket.io-client';
import '@syncit/ui/dist/style.css';
import { SocketIOTransporter, remoteCtrl } from '/@/utils/SocketIOTransporter';

let stopRecord: listenerHandler | undefined;
let replayerLive: Replayer;
const events: eventWithTime[] = [];
const replayerBox = ref<HTMLElement>();
const socket = inject('socket') as Socket;

// 停止录制
const onStopRecord = () => {
  stopRecord && stopRecord();
  replayerLive && (replayerLive = null as any);
};

// 开始录制
const onStartRecord = (live: boolean) => {
  live && events.splice(0, events.length);
  stopRecord = record({
    emit(e) {
      console.log(e);
      live ? socket.emit('rrwebLive', e) : events.push(e);
    },
    blockSelector: '.hide-rrweb-dom',
  });
};

const onOpenLivePage = ()=>{
  socket.connected || socket.connect();
  window.open("/live");
}

// 开始直播
socket.on('startLive', (data: boolean) => {
  onStopRecord();
  if (data) {
    console.log('实时直播已启动');
    onStartRecord(data);
  }
});

// 开始回放
const onStartReplay = () => {
  onStopRecord();
  replayerLive = new Replayer(events, {
    root: replayerBox.value,
    mouseTail: true,
  });
  replayerLive.play();
};

// 开始远程控制
const onRemoteCtrl = () => {
  new remoteCtrl.Embed({
    target: document.body,
    props: {
      createTransporter() {
        return new SocketIOTransporter(
          {
            connection: 'http://localhost:3000', 
            eventName: 'remoteCtrl',
          }
        );
      },
    },
  });
  window.open("/syncit");
}

onMounted(() => {

});
</script>

<style scoped>
:deep(.replayer-wrapper) {
  height: 100%;
}
</style>

是哪里没有配置好嘛？😭

[Yuyz0112]

startlive 传入的参数是？

[naihe138]

+1我也遇到这个问题

[lchGitee]

解决了吗 我现在也遇到了同样的问题