feat: vue3 支持 vue live-pusher 组件

packages/uni-app-plus/src/service/api/context/createLivePusherContext.ts

@@ -79,20 +79,82 @@ class LivePusherContext implements UniApp.LivePusherContext {
   'setMICVolume': () => {}
 }
 
+// TODO
+function publishToView(
+  livePusherId: string,
+  pageId: number,
+  type: string,
+  data?: unknown
+) {
+  UniServiceJSBridge.invokeViewMethod(
+    'livepusher.' + livePusherId,
+    {
+      livePusherId,
+      type,
+      data,
+    },
+    pageId
+  )
+}
+
+class LivePusherContextVue {
+  private id: string
+  private pageId: number
+  constructor(id: string, pageId: number) {
+    this.id = id
+    this.pageId = pageId
+  }
+
+  start() {
+    publishToView(this.id, this.pageId, 'start')
+  }
+
+  stop() {
+    publishToView(this.id, this.pageId, 'stop')
+  }
+
+  pause() {
+    publishToView(this.id, this.pageId, 'pause')
+  }
+
+  resume() {
+    publishToView(this.id, this.pageId, 'resume')
+  }
+
+  switchCamera() {
+    publishToView(this.id, this.pageId, 'switchCamera')
+  }
+
+  startPreview() {
+    publishToView(this.id, this.pageId, 'preview')
+  }
+
+  stopPreview() {
+    publishToView(this.id, this.pageId, 'stop')
+  }
+
+  snapshot() {
+    publishToView(this.id, this.pageId, 'snapshot')
+  }
+}
+
 export const createLivePusherContext =
   defineSyncApi<API_TYPE_CREATE_LIVE_PUSHER_CONTEXT>(
     API_CREATE_LIVE_PUSHER_CONTEXT,
     (id, vm) => {
-      if (!vm) {
-        return console.warn(
-          'uni.createLivePusherContext: 2 arguments required, but only 1 present'
-        )
-      }
-      const elm = findElmById(id, vm)
-      if (!elm) {
-        return console.warn('Can not find `' + id + '`')
+      if (vm.$page.meta.isNVue) {
+        if (!vm) {
+          return console.warn(
+            'uni.createLivePusherContext: 2 arguments required, but only 1 present'
+          )
+        }
+        const elm = findElmById(id, vm)
+        if (!elm) {
+          return console.warn('Can not find `' + id + '`')
+        }
+        return new LivePusherContext(id, elm)
       }
-      return new LivePusherContext(id, elm)
+      return new LivePusherContextVue(id, vm.$page.id)
     },
     CreateLivePusherContextProtocol
   )

packages/uni-app-plus/src/view/components/live-pusher/index.tsx

+import { Ref, ref, watch, onBeforeUnmount } from 'vue'
+import {
+  defineBuiltInComponent,
+  useCustomEvent,
+  EmitEvent,
+  useSubscribe,
+  useContextInfo,
+} from '@dcloudio/uni-components'
+import { useNativeAttrs, useNative } from '../../../helpers/useNative'
+
+const props = {
+  id: {
+    type: String,
+    default: '',
+  },
+  url: {
+    type: String,
+    default: '',
+  },
+  mode: {
+    type: String,
+    default: 'SD',
+  },
+  muted: {
+    type: [Boolean, String],
+    default: false,
+  },
+  enableCamera: {
+    type: [Boolean, String],
+    default: true,
+  },
+  autoFocus: {
+    type: [Boolean, String],
+    default: true,
+  },
+  beauty: {
+    type: [Number, String],
+    default: 0,
+  },
+  whiteness: {
+    type: [Number, String],
+    default: 0,
+  },
+  aspect: {
+    type: [String],
+    default: '3:2',
+  },
+  minBitrate: {
+    type: [Number],
+    default: 200,
+  },
+}
+
+type EventName = 'statechange' | 'netstatus' | 'error'
+
+const emits: EventName[] = ['statechange', 'netstatus', 'error']
+
+export default /*#__PURE__*/ defineBuiltInComponent({
+  name: 'LivePusher',
+  props,
+  emits,
+  setup(props, { emit }) {
+    const rootRef: Ref<HTMLElement | null> = ref(null)
+    const trigger = useCustomEvent<EmitEvent<typeof emit>>(rootRef, emit)
+    const containerRef: Ref<HTMLElement | null> = ref(null)
+    const attrs = useNativeAttrs(props, ['id'])
+    const { position, hidden, onParentReady } = useNative(containerRef)
+
+    let livePusher: PlusVideoLivePusher
+
+    onParentReady(() => {
+      livePusher = new plus.video.LivePusher!(
+        'livePusher' + Date.now(),
+        Object.assign({}, attrs.value, position)
+      )
+      plus.webview.currentWebview().append(livePusher as any)
+
+      emits.forEach((key) => {
+        livePusher.addEventListener(key, (event) => {
+          trigger(key, {} as Event, event.detail)
+        })
+      })
+
+      watch(
+        () => attrs.value,
+        (attrs) => livePusher.setStyles(attrs as any),
+        { deep: true }
+      )
+      watch(
+        () => position,
+        (position) => livePusher.setStyles(position),
+        { deep: true }
+      )
+      watch(
+        () => hidden.value,
+        (val) => {
+          // iOS 隐藏状态设置 setStyles 不生效
+          if (!val) {
+            livePusher.setStyles(position)
+          }
+        }
+      )
+    })
+
+    const id = useContextInfo()
+    useSubscribe(
+      (type: string, data: any) => {
+        if (livePusher) {
+          // @ts-expect-error
+          livePusher[type as any](data)
+        }
+      },
+      id,
+      true
+    )
+
+    onBeforeUnmount(() => {
+      if (livePusher) {
+        livePusher.close()
+      }
+    })
+
+    return () => {
+      return (
+        <uni-live-pusher ref={rootRef} id={props.id}>
+          <div ref={containerRef} class="uni-live-pusher-container" />
+        </uni-live-pusher>
+      )
+    }
+  },
+})

packages/uni-app-plus/src/view/framework/dom/components/UniLivePusher.ts

-import { UniTodoNode } from '../elements/UniTodoNode'
+import { UniNodeJSON } from '@dcloudio/uni-shared'
+import '../../../../../style/live-pusher.css'
+import LivePusher from '../../../components/live-pusher'
 
-export class UniLivePusher extends UniTodoNode {
-  constructor(id: number, parentNodeId: number, refNodeId: number) {
-    super(id, 'uni-live-pusher', parentNodeId, refNodeId)
+import { UniComponent } from './UniComponent'
+
+export class UniLivePusher extends UniComponent {
+  constructor(
+    id: number,
+    parentNodeId: number,
+    refNodeId: number,
+    nodeJson: Partial<UniNodeJSON>
+  ) {
+    super(
+      id,
+      'uni-live-pusher',
+      LivePusher,
+      parentNodeId,
+      refNodeId,
+      nodeJson,
+      '.uni-live-pusher-slot'
+    )
   }
 }

packages/uni-app-plus/style/live-pusher.css

+uni-live-pusher {
+  width: 320px;
+  height: 240px;
+  display: inline-block;
+  line-height: 0;
+  overflow: hidden;
+  position: relative;
+}
+
+uni-live-pusher[hidden] {
+  display: none;
+}
+
+.uni-live-pusher-container {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+  background-color: black;
+}
+
+.uni-live-pusher-slot {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  pointer-events: none;
+}