以位图作为覆盖流式传输视频

Question

我是 wowza 的新手，正在开发一个项目，用于直播从 Android 设备捕获的视频。我需要将图像（动态图像）附加到视频流，以便观看流的用户可以查看它。我试过的代码如下（来自 wowza 的示例源代码）：

        // Read in a PNG file from the app resources as a bitmap
        Bitmap overlayBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.overlay_logo);

        // Initialize a bitmap renderer with the bitmap
        mWZBitmap = new WZBitmap(overlayBitmap);

        // Place the bitmap at top left of the display
        mWZBitmap.setPosition(WZBitmap.LEFT, WZBitmap.TOP);

        // Scale the bitmap initially to 75% of the display surface width
        mWZBitmap.setScale(0.75f, WZBitmap.SURFACE_WIDTH);

        // Register the bitmap renderer with the GoCoder camera preview view as a frame listener
        mWZCameraView.registerFrameRenderer(mWZBitmap);

这很好，但我不想在广播端显示图像，图像应该只在接收端可见。有办法完成这个吗？

Answer 1

我设法通过注册 FrameRenderer 并在 onWZVideoFrameRendererDraw 中设置位图来完成此操作。

代码片段如下（Kotlin）：

private fun attachImageToBroadcast(scoreValue: ScoreUpdate) {
    bitmap = getBitMap(scoreValue)
    // Initialize a bitmap renderer with the bitmap
    mWZBitmap = WZBitmap(bitmap)
    // Position the bitmap in the display
    mWZBitmap!!.setPosition(WZBitmap.LEFT, WZBitmap.TOP)
    // Scale the bitmap initially
    mWZBitmap!!.setScale(0.37f, WZBitmap.FRAME_WIDTH)
    mWZBitmap!!.isVisible = false // as i dont want to show it initially
    mWZCameraView!!.registerFrameRenderer(mWZBitmap)
    mWZCameraView!!.registerFrameRenderer(VideoFrameRenderer())
}

private inner class VideoFrameRenderer : WZRenderAPI.VideoFrameRenderer {
    override fun onWZVideoFrameRendererRelease(p0: WZGLES.EglEnv?) {
    }

    override fun onWZVideoFrameRendererDraw(p0: WZGLES.EglEnv?, framSize: WZSize?, p2: Int) {
            mWZBitmap!!.setBitmap(bitmap) // note that the bitmap value gets changed once I get the new values
                                          //I have implemented some flags and conditions to check whether a new value has been obtained and only if these values are satisfied, the setBitmap is called. Otherwise, as it is called continuously, flickering can occur in the screen
            }


    override fun isWZVideoFrameRendererActive(): Boolean {
        return true
    }

    override fun onWZVideoFrameRendererInit(p0: WZGLES.EglEnv?) {
    }

}

在iOS中，我们可以实现WZVideoSink协议来实现。首先，我们需要用最新的分数更新 scoreView，然后将视图转换为图像。然后我们可以使用 WZVideoSink 协议方法将此图像嵌入到捕获的帧中。下面给出了示例代码。

 // MARK: - WZVideoSink Protocol
func videoFrameWasCaptured(_ imageBuffer: CVImageBuffer, framePresentationTime: CMTime, frameDuration: CMTime) {

        if self.goCoder != nil && self.goCoder!.isStreaming {
           let frameImage = CIImage(cvImageBuffer: imageBuffer)
            var addCIImage: CIImage = CIImage()

            if let scoreImage = self.getViewAsImage() {
 // scoreImage is the image you want to embed.
                addCIImage = CIImage(cgImage: scoreImage.cgImage!)
            }

            let filter = CIFilter(name: "CISourceOverCompositing")
            filter?.setDefaults()
            filter?.setValue(addCIImage, forKey: kCIInputImageKey)
            filter?.setValue(frameImage, forKey: kCIInputBackgroundImageKey)

            if let outputImage: CIImage = filter?.value(forKey: kCIOutputImageKey) as? CIImage {
                let context = CIContext(options: nil)
                context.render(outputImage, to: imageBuffer)
            } else {
                let context = CIContext(options: nil)
                context.render(frameImage, to: imageBuffer)
            }
        }
}

func getViewAsImage() -> UIImage {
// convert scoreView to image
    UIGraphicsBeginImageContextWithOptions(self.scoreView.bounds.size, false, 0.0)
    self.scoreView.layer.render(in: UIGraphicsGetCurrentContext()!)

    let scoreImage: UIImage = UIGraphicsGetImageFromCurrentImageContext()!
    UIGraphicsEndImageContext()
    return scoreImage
}

以位图作为覆盖流式传输视频

Stream video with bitmap as overlay

android

wowza

ios