# 搭配 IVS 廣播 SDK 使用 Snap 本文說明如何搭配 IVS 廣播 SDK 使用 Snap 的攝影機套件 SDK。 ## Web 本節假設您已熟悉[使用 Web 廣播 SDK 發布和訂閱影片](getting-started-pub-sub-web.md)。若要整合 Snap 的攝影機套件 SDK 與 IVS 即時串流 Web 廣播 SDK，您需要： 1. 安裝攝影機套件 SDK 和 Webpack。(我們的範例使用 Webpack 作為打包工具，但您可以自行選擇任何打包工具。) 1. 建立 `index.html`。 1. 新增設定元素。 1. 建立 `index.css`。 1. 顯示和設定參與者。 1. 顯示連接的攝影機和麥克風。 1. 建立攝影機套件工作階段。 1. 擷取鏡頭並填入鏡頭選擇器。 1. 將攝影機套件工作階段的輸出轉譯至畫布。 1. 建立函數以填入「鏡頭」下拉式清單。 1. 為攝影機套件提供用於轉譯和發布 `LocalStageStream` 的媒體來源。 1. 建立 `package.json`。 1. 建立一個 Webpack 組態檔。 1. 設定 HTTPS 伺服器和測試。下文將介紹上述每個步驟。 ### 安裝攝影機套件 SDK 和 Webpack 在此範例中，我們使用 Webpack 作為封裝程式；但是，您可以使用任何封裝程式。 ``` npm i @snap/camera-kit webpack webpack-cli ``` ### 建立 index.html 接下來，建立 HTML 樣板並將 Web 廣播 SDK 匯入為指令碼標籤。在下列程式碼中，請務必用您的廣播 SDK 版本取代 ``。 #### HTML ``` Amazon IVS Real-Time Streaming Web Sample (HTML and JavaScript)

Amazon IVS Real-Time Streaming Web Sample (HTML and JavaScript)

This sample is used to demonstrate basic HTML / JS usage. Use the AWS CLI to create a Stage and a corresponding ParticipantToken. Multiple participants can load this page and put in their own tokens. You can read more about stages in our public docs.

``` ### 新增設定元素建立 HTML 來選取攝影機、麥克風及鏡頭，並指定參與者權杖： #### HTML ```

Select Camera

Select Microphone

Participant Token

``` 在其下方新增額外的 HTML 來顯示來自本機和遠端參與者的攝影機供稿： #### HTML ```

``` 載入額外邏輯，包括用於設定攝影機和已綁定 JavaScript 檔案的輔助方法。(在本節的稍後部分，您要建立這些 JavaScript 檔案並將它們綁定到單一檔案中，以便將攝影機套件匯入為模組。綁定的 JavaScript 檔案將包含設定攝影機套件、套用鏡頭和將套用了鏡頭的攝影機供稿發布到階段的邏輯。) 新增 `body` 和 `html` 元素的結尾標籤以完成 `index.html` 的建立。 #### HTML ``` ``` ### 建立 index.css 建立 CSS 來源檔案以設定頁面樣式。我們不會討論此程式碼，以著重於管理舞台和與 Snap 攝影機套件 SDK 整合的邏輯。 #### CSS ``` /*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. SPDX-License-Identifier: Apache-2.0 */ html, body { margin: 2rem; box-sizing: border-box; height: 100vh; max-height: 100vh; display: flex; flex-direction: column; } hr { margin: 1rem 0; } table { display: table; } canvas { margin-bottom: 1rem; background: green; } video { margin-bottom: 1rem; background: black; max-width: 100%; max-height: 150px; } .log { flex: none; height: 300px; } .content { flex: 1 0 auto; } .button { display: block; margin: 0 auto; } .local-container { position: relative; } .static-controls { position: absolute; margin-left: auto; margin-right: auto; left: 0; right: 0; bottom: -4rem; text-align: center; } .static-controls button { display: inline-block; } .hidden { display: none; } .participant-container { display: flex; align-items: center; justify-content: center; flex-direction: column; margin: 1rem; } video { border: 0.5rem solid #555; border-radius: 0.5rem; } .placeholder { background-color: #333333; display: flex; text-align: center; margin-bottom: 1rem; } .placeholder span { margin: auto; color: white; } #local-media { display: inline-block; width: 100vw; } #local-media video { max-height: 300px; } #remote-media { display: flex; justify-content: center; align-items: center; flex-direction: row; width: 100%; } #lens-selector { width: 100%; margin-bottom: 1rem; } ``` ### 顯示和設定參與者接下來建立 `helpers.js`，其中包含您會用來顯示和設定參與者的輔助方法： #### JavaScript ``` /*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. SPDX-License-Identifier: Apache-2.0 */ function setupParticipant({ isLocal, id }) { const groupId = isLocal ? 'local-media' : 'remote-media'; const groupContainer = document.getElementById(groupId); const participantContainerId = isLocal ? 'local' : id; const participantContainer = createContainer(participantContainerId); const videoEl = createVideoEl(participantContainerId); participantContainer.appendChild(videoEl); groupContainer.appendChild(participantContainer); return videoEl; } function teardownParticipant({ isLocal, id }) { const groupId = isLocal ? 'local-media' : 'remote-media'; const groupContainer = document.getElementById(groupId); const participantContainerId = isLocal ? 'local' : id; const participantDiv = document.getElementById( participantContainerId + '-container' ); if (!participantDiv) { return; } groupContainer.removeChild(participantDiv); } function createVideoEl(id) { const videoEl = document.createElement('video'); videoEl.id = id; videoEl.autoplay = true; videoEl.playsInline = true; videoEl.srcObject = new MediaStream(); return videoEl; } function createContainer(id) { const participantContainer = document.createElement('div'); participantContainer.classList = 'participant-container'; participantContainer.id = id + '-container'; return participantContainer; } ``` ### 顯示連接的攝影機和麥克風接下來建立 `media-devices.js`，其中包含用於顯示連接到裝置的攝影機和麥克風的輔助方法： #### JavaScript ``` /*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. SPDX-License-Identifier: Apache-2.0 */ /** * Returns an initial list of devices populated on the page selects */ async function initializeDeviceSelect() { const videoSelectEl = document.getElementById('video-devices'); videoSelectEl.disabled = false; const { videoDevices, audioDevices } = await getDevices(); videoDevices.forEach((device, index) => { videoSelectEl.options[index] = new Option(device.label, device.deviceId); }); const audioSelectEl = document.getElementById('audio-devices'); audioSelectEl.disabled = false; audioDevices.forEach((device, index) => { audioSelectEl.options[index] = new Option(device.label, device.deviceId); }); } /** * Returns all devices available on the current device */ async function getDevices() { // Prevents issues on Safari/FF so devices are not blank await navigator.mediaDevices.getUserMedia({ video: true, audio: true }); const devices = await navigator.mediaDevices.enumerateDevices(); // Get all video devices const videoDevices = devices.filter((d) => d.kind === 'videoinput'); if (!videoDevices.length) { console.error('No video devices found.'); } // Get all audio devices const audioDevices = devices.filter((d) => d.kind === 'audioinput'); if (!audioDevices.length) { console.error('No audio devices found.'); } return { videoDevices, audioDevices }; } async function getCamera(deviceId) { // Use Max Width and Height return navigator.mediaDevices.getUserMedia({ video: { deviceId: deviceId ? { exact: deviceId } : null, }, audio: false, }); } async function getMic(deviceId) { return navigator.mediaDevices.getUserMedia({ video: false, audio: { deviceId: deviceId ? { exact: deviceId } : null, }, }); } ``` ### 建立攝影機套件工作階段建立 `stages.js`，其中包含將鏡頭套用至攝影機供稿並將供稿發布至階段的邏輯。我們建議將下列程式碼區塊複製並貼上 `stages.js`。接著，您可以逐項檢閱程式碼，以了解下列區段中的狀況。 #### JavaScript ``` /*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. SPDX-License-Identifier: Apache-2.0 */ const { Stage, LocalStageStream, SubscribeType, StageEvents, ConnectionState, StreamType, } = IVSBroadcastClient; import { bootstrapCameraKit, createMediaStreamSource, Transform2D, } from '@snap/camera-kit'; let cameraButton = document.getElementById('camera-control'); let micButton = document.getElementById('mic-control'); let joinButton = document.getElementById('join-button'); let leaveButton = document.getElementById('leave-button'); let controls = document.getElementById('local-controls'); let videoDevicesList = document.getElementById('video-devices'); let audioDevicesList = document.getElementById('audio-devices'); let lensSelector = document.getElementById('lens-selector'); let session; let availableLenses = []; // Stage management let stage; let joining = false; let connected = false; let localCamera; let localMic; let cameraStageStream; let micStageStream; const liveRenderTarget = document.getElementById('canvas'); const init = async () => { await initializeDeviceSelect(); const cameraKit = await bootstrapCameraKit({ apiToken: 'INSERT_YOUR_API_TOKEN_HERE', }); session = await cameraKit.createSession({ liveRenderTarget }); const { lenses } = await cameraKit.lensRepository.loadLensGroups([ 'INSERT_YOUR_LENS_GROUP_ID_HERE', ]); availableLenses = lenses; populateLensSelector(lenses); const snapStream = liveRenderTarget.captureStream(); lensSelector.addEventListener('change', handleLensChange); lensSelector.disabled = true; cameraButton.addEventListener('click', () => { const isMuted = !cameraStageStream.isMuted; cameraStageStream.setMuted(isMuted); cameraButton.innerText = isMuted ? 'Show Camera' : 'Hide Camera'; }); micButton.addEventListener('click', () => { const isMuted = !micStageStream.isMuted; micStageStream.setMuted(isMuted); micButton.innerText = isMuted ? 'Unmute Mic' : 'Mute Mic'; }); joinButton.addEventListener('click', () => { joinStage(session, snapStream); }); leaveButton.addEventListener('click', () => { leaveStage(); }); }; async function setCameraKitSource(session, mediaStream) { const source = createMediaStreamSource(mediaStream); await session.setSource(source); source.setTransform(Transform2D.MirrorX); session.play(); } const populateLensSelector = (lenses) => { lensSelector.innerHTML = ''; lenses.forEach((lens, index) => { const option = document.createElement('option'); option.value = index; option.text = lens.name || `Lens ${index + 1}`; lensSelector.appendChild(option); }); }; const handleLensChange = (event) => { const selectedIndex = parseInt(event.target.value); if (session && availableLenses[selectedIndex]) { session.applyLens(availableLenses[selectedIndex]); } }; const joinStage = async (session, snapStream) => { if (connected || joining) { return; } joining = true; const token = document.getElementById('token').value; if (!token) { window.alert('Please enter a participant token'); joining = false; return; } // Retrieve the User Media currently set on the page localCamera = await getCamera(videoDevicesList.value); localMic = await getMic(audioDevicesList.value); await setCameraKitSource(session, localCamera); // Create StageStreams for Audio and Video cameraStageStream = new LocalStageStream(snapStream.getVideoTracks()[0]); micStageStream = new LocalStageStream(localMic.getAudioTracks()[0]); const strategy = { stageStreamsToPublish() { return [cameraStageStream, micStageStream]; }, shouldPublishParticipant() { return true; }, shouldSubscribeToParticipant() { return SubscribeType.AUDIO_VIDEO; }, }; stage = new Stage(token, strategy); // Other available events: // https://aws.github.io/amazon-ivs-web-broadcast/docs/sdk-guides/stages#events stage.on(StageEvents.STAGE_CONNECTION_STATE_CHANGED, (state) => { connected = state === ConnectionState.CONNECTED; if (connected) { joining = false; controls.classList.remove('hidden'); lensSelector.disabled = false; } else { controls.classList.add('hidden'); lensSelector.disabled = true; } }); stage.on(StageEvents.STAGE_PARTICIPANT_JOINED, (participant) => { console.log('Participant Joined:', participant); }); stage.on( StageEvents.STAGE_PARTICIPANT_STREAMS_ADDED, (participant, streams) => { console.log('Participant Media Added: ', participant, streams); let streamsToDisplay = streams; if (participant.isLocal) { // Ensure to exclude local audio streams, otherwise echo will occur streamsToDisplay = streams.filter( (stream) => stream.streamType === StreamType.VIDEO ); } const videoEl = setupParticipant(participant); streamsToDisplay.forEach((stream) => videoEl.srcObject.addTrack(stream.mediaStreamTrack) ); } ); stage.on(StageEvents.STAGE_PARTICIPANT_LEFT, (participant) => { console.log('Participant Left: ', participant); teardownParticipant(participant); }); try { await stage.join(); } catch (err) { joining = false; connected = false; console.error(err.message); } }; const leaveStage = async () => { stage.leave(); joining = false; connected = false; cameraButton.innerText = 'Hide Camera'; micButton.innerText = 'Mute Mic'; controls.classList.add('hidden'); }; init(); ``` 在本檔案的第一部分，我們匯入廣播 SDK 和攝影機套件 Web SDK，並初始化我們將在每個 SDK 中使用的變數。我們在[引導攝影機套件 Web SDK](https://kit.snapchat.com/reference/CameraKit/web/0.7.0/index.html#bootstrapping-the-sdk) 後透過呼叫 `createSession` 建立起攝影機套件工作階段。請注意，畫布元素物件會被傳遞給工作階段；這將告知攝影機套件轉譯至該畫布。 #### JavaScript ``` /*! Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. SPDX-License-Identifier: Apache-2.0 */ const { Stage, LocalStageStream, SubscribeType, StageEvents, ConnectionState, StreamType, } = IVSBroadcastClient; import { bootstrapCameraKit, createMediaStreamSource, Transform2D, } from '@snap/camera-kit'; let cameraButton = document.getElementById('camera-control'); let micButton = document.getElementById('mic-control'); let joinButton = document.getElementById('join-button'); let leaveButton = document.getElementById('leave-button'); let controls = document.getElementById('local-controls'); let videoDevicesList = document.getElementById('video-devices'); let audioDevicesList = document.getElementById('audio-devices'); let lensSelector = document.getElementById('lens-selector'); let session; let availableLenses = []; // Stage management let stage; let joining = false; let connected = false; let localCamera; let localMic; let cameraStageStream; let micStageStream; const liveRenderTarget = document.getElementById('canvas'); const init = async () => { await initializeDeviceSelect(); const cameraKit = await bootstrapCameraKit({ apiToken: 'INSERT_YOUR_API_TOKEN_HERE', }); session = await cameraKit.createSession({ liveRenderTarget }); ``` ### 擷取鏡頭並填入鏡頭選擇器若要擷取您的鏡頭，請將鏡頭組 ID 的預留位置取代為您自己的 ID，該 ID 可以在 [Camera Kit Developer Portal](https://camera-kit.snapchat.com/) 中找到。使用我們稍後建立的 `populateLensSelector()` 函數填入「鏡頭」選項下拉式清單。 #### JavaScript ``` session = await cameraKit.createSession({ liveRenderTarget }); const { lenses } = await cameraKit.lensRepository.loadLensGroups([ 'INSERT_YOUR_LENS_GROUP_ID_HERE', ]); availableLenses = lenses; populateLensSelector(lenses); ``` ### 將攝影機套件工作階段的輸出轉譯到畫布使用 [captureStream](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/captureStream) 方法回傳畫布內容中的 `MediaStream`。畫布將包含套用了鏡頭的攝影機供稿的影片串流。此外，新增了用於攝影機和麥克風靜音按鈕的事件接聽程式，以及用於加入和離開階段的事件接聽程式。在用於加入階段的事件接聽程式中，我們從畫布傳遞攝影機套件工作階段和 `MediaStream`，以便將其發布到階段。 #### JavaScript ``` const snapStream = liveRenderTarget.captureStream(); lensSelector.addEventListener('change', handleLensChange); lensSelector.disabled = true; cameraButton.addEventListener('click', () => { const isMuted = !cameraStageStream.isMuted; cameraStageStream.setMuted(isMuted); cameraButton.innerText = isMuted ? 'Show Camera' : 'Hide Camera'; }); micButton.addEventListener('click', () => { const isMuted = !micStageStream.isMuted; micStageStream.setMuted(isMuted); micButton.innerText = isMuted ? 'Unmute Mic' : 'Mute Mic'; }); joinButton.addEventListener('click', () => { joinStage(session, snapStream); }); leaveButton.addEventListener('click', () => { leaveStage(); }); }; ``` ### 建立函數以填入鏡頭下拉式清單建立下列函數，以將先前擷取的鏡頭填入**鏡頭**選擇器。**鏡頭**選擇器為頁面中的 UI 元素，可讓您從鏡頭清單中選取要套用至攝影機畫面的鏡頭。此外，建立 `handleLensChange` 回呼函數，以便從**鏡頭**下拉式清單中選取指定鏡頭時加以套用。 #### JavaScript ``` const populateLensSelector = (lenses) => { lensSelector.innerHTML = ''; lenses.forEach((lens, index) => { const option = document.createElement('option'); option.value = index; option.text = lens.name || `Lens ${index + 1}`; lensSelector.appendChild(option); }); }; const handleLensChange = (event) => { const selectedIndex = parseInt(event.target.value); if (session && availableLenses[selectedIndex]) { session.applyLens(availableLenses[selectedIndex]); } }; ``` ### 為攝影機套件提供用於轉譯的媒體來源並發布 LocalStageStream 若要發布套用了鏡頭的影片串流，請建立名為 `setCameraKitSource` 的函數來傳遞稍早從畫布擷取的 `MediaStream`。來自畫布的 `MediaStream` 目前沒有作用，因為我們還未納入本地攝影機供稿。我們可以透過呼叫 `getCamera` 輔助方法並將其分配給 `localCamera` 來合併本地攝影機供稿。然後，我們可以將本地攝影機供稿 (透過 `localCamera`) 和工作階段物件傳遞給 `setCameraKitSource`。`setCameraKitSource` 函數能透過呼叫 `createMediaStreamSource` 將本地攝影機供稿轉換為 [CameraKit 媒體來源](https://docs.snap.com/camera-kit/integrate-sdk/web/web-configuration#creating-a-camerakitsource)。接著將 `CameraKit` 媒體來源[轉換](https://docs.snap.com/camera-kit/integrate-sdk/web/web-configuration#2d-transforms)成前置攝影機的鏡像。然後，鏡頭效果被套用到媒體來源，並通過呼叫 `session.play()` 轉譯到輸出畫布。此時，鏡頭已套用到擷取自畫布的 `MediaStream`，接著可以繼續將其發布到階段。使用來自的 `MediaStream` 影片軌道建立 `LocalStageStream`，即可實現此目的。然後，`LocalStageStream` 的執行個體可以傳入到要發布的 `StageStrategy`。 #### JavaScript ``` async function setCameraKitSource(session, mediaStream) { const source = createMediaStreamSource(mediaStream); await session.setSource(source); source.setTransform(Transform2D.MirrorX); session.play(); } const joinStage = async (session, snapStream) => { if (connected || joining) { return; } joining = true; const token = document.getElementById('token').value; if (!token) { window.alert('Please enter a participant token'); joining = false; return; } // Retrieve the User Media currently set on the page localCamera = await getCamera(videoDevicesList.value); localMic = await getMic(audioDevicesList.value); await setCameraKitSource(session, localCamera); // Create StageStreams for Audio and Video // cameraStageStream = new LocalStageStream(localCamera.getVideoTracks()[0]); cameraStageStream = new LocalStageStream(snapStream.getVideoTracks()[0]); micStageStream = new LocalStageStream(localMic.getAudioTracks()[0]); const strategy = { stageStreamsToPublish() { return [cameraStageStream, micStageStream]; }, shouldPublishParticipant() { return true; }, shouldSubscribeToParticipant() { return SubscribeType.AUDIO_VIDEO; }, }; ``` 下面的其餘代碼用於建立和管理我們的階段： #### JavaScript ``` stage = new Stage(token, strategy); // Other available events: // https://aws.github.io/amazon-ivs-web-broadcast/docs/sdk-guides/stages#events stage.on(StageEvents.STAGE_CONNECTION_STATE_CHANGED, (state) => { connected = state === ConnectionState.CONNECTED; if (connected) { joining = false; controls.classList.remove('hidden'); } else { controls.classList.add('hidden'); } }); stage.on(StageEvents.STAGE_PARTICIPANT_JOINED, (participant) => { console.log('Participant Joined:', participant); }); stage.on( StageEvents.STAGE_PARTICIPANT_STREAMS_ADDED, (participant, streams) => { console.log('Participant Media Added: ', participant, streams); let streamsToDisplay = streams; if (participant.isLocal) { // Ensure to exclude local audio streams, otherwise echo will occur streamsToDisplay = streams.filter( (stream) => stream.streamType === StreamType.VIDEO ); } const videoEl = setupParticipant(participant); streamsToDisplay.forEach((stream) => videoEl.srcObject.addTrack(stream.mediaStreamTrack) ); } ); stage.on(StageEvents.STAGE_PARTICIPANT_LEFT, (participant) => { console.log('Participant Left: ', participant); teardownParticipant(participant); }); try { await stage.join(); } catch (err) { joining = false; connected = false; console.error(err.message); } }; const leaveStage = async () => { stage.leave(); joining = false; connected = false; cameraButton.innerText = 'Hide Camera'; micButton.innerText = 'Mute Mic'; controls.classList.add('hidden'); }; init(); ``` ### 建立 package.json 建立 `package.json` 並新增下列 JSON 組態。此檔案會定義我們的相依性，並包含用於綁定程式碼的指令碼命令。 #### JSON 組態 ``` { "dependencies": { "@snap/camera-kit": "^0.10.0" }, "name": "ivs-stages-with-snap-camerakit", "version": "1.0.0", "main": "index.js", "scripts": { "build": "webpack" }, "keywords": [], "author": "", "license": "ISC", "description": "", "devDependencies": { "webpack": "^5.95.0", "webpack-cli": "^5.1.4" } } ``` ### 建立一個 Webpack 組態檔建立 `webpack.config.js` 並新增以下程式碼。如此會綁定我們目前為止所建立的程式碼，以便我們利用 import 陳述式來使用攝影機套件。 #### JavaScript ``` const path = require('path'); module.exports = { entry: ['./stage.js'], output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, }; ``` 最後，按照 Webpack 組態檔的定義執行 `npm run build` 來綁定自己的 JavaScript。如為測試用途，您可以從本機電腦提供 HTML 和 JavaScript。在此範例中，我們會使用 Python 的 `http.server` 模組。 ### 設定 HTTPS 伺服器和測試若要測試程式碼，我們需要設定 HTTPS 伺服器。使用 HTTPS 伺服器進行 Web 應用程式與 Snap 攝影機套件 SDK 整合的本機開發和測試，將有助於避免 CORS (跨來源資源共用) 問題。開啟終端並導覽至您目前為止建立所有程式碼的目錄。執行下列命令，以產生自我簽署的 SSL/TLS 憑證和私有金鑰： ``` openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -days 365 -nodes ``` 如此會建立兩個檔案：`key.pem` (私有金鑰) 和 `cert.pem` (自我簽署憑證)。建立名稱為 `https_server.py` 的新 Python 檔案，並新增下列程式碼： #### Python ``` import http.server import ssl # Set the directory to serve files from DIRECTORY = '.' # Create the HTTPS server server_address = ('', 4443) httpd = http.server.HTTPServer( server_address, http.server.SimpleHTTPRequestHandler) # Wrap the socket with SSL/TLS context = ssl.SSLContext(ssl.PROTOCOL_TLS_SERVER) context.load_cert_chain('cert.pem', 'key.pem') httpd.socket = context.wrap_socket(httpd.socket, server_side=True) print(f'Starting HTTPS server on https://localhost:4443, serving {DIRECTORY}') httpd.serve_forever() ``` 開啟終端，導覽至您建立 `https_server.py` 檔案的目錄，然後執行下列命令： ``` python3 https_server.py ``` 如此會在 https://localhost:4443 中啟動 HTTPS 伺服器，從目前的目錄提供檔案。確保 `cert.pem` 和 `key.pem` 檔案皆位於與 `https_server.py` 檔案相同的目錄中。開啟瀏覽器並導覽至 https://localhost:4443。由於此為自我簽署的 SSL/TLS 憑證，因此您的 Web 瀏覽器不會信任該憑證，且您會收到警告。由於此僅作為測試用途，因此您可以略過該警告。然後，您應該會在畫面上看到您先前指定且已套用至攝影機供稿的 Snap 鏡頭 AR 效果。請注意，此設定使用 Python 的內建 `http.server` 和 `ssl` 模組，適用於本機開發和測試用途，但不建議用於生產環境。此設定中使用的自我簽署 SSL/TLS 憑證不受 Web 瀏覽器和其他用戶端信任，如此表示使用者在存取伺服器時會遇到安全警告。此外，雖然我們在此範例中使用 Python 的內建 http.server 和 ssl 模組，但您可以選擇使用其他 HTTPS 伺服器解決方案。 ## Android 若要整合 Snap 的攝影機套件 SDK 與 IVS Android 廣播 SDK，您必須安裝攝影機套件 SDK、初始化攝影機套件工作階段、套用鏡頭，然後將攝影機套件工作階段的輸出提供給自訂影像輸入來源。要安裝攝影機套件 SDK，請將以下內容新增到模組的 `build.gradle` 檔案中。將 `$cameraKitVersion` 替換為[攝影機套件 SDK 的最新版本](https://docs.snap.com/camera-kit/integrate-sdk/mobile/changelog-mobile)。 ### Java ``` implementation "com.snap.camerakit:camerakit:$cameraKitVersion" ``` 初始化並取得 `cameraKitSession`。攝影機套件還為 Android 的 [CameraX](https://developer.android.com/media/camera/camerax) API 提供了一個方便的包裝函式，讓您無需編寫複雜的邏輯即可共用 CameraX 與攝影機套件。您可以使用 `CameraXImageProcessorSource` 物件作為r [ImageProcessor](https://snapchat.github.io/camera-kit-reference/api/android/latest/-camera-kit/com.snap.camerakit/-image-processor/index.html) 的 [Source](https://snapchat.github.io/camera-kit-reference/api/android/latest/-camera-kit/com.snap.camerakit/-source/index.html)，讓自己啟動攝影機預覽串流影格。 ### Java ``` protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // Camera Kit support implementation of ImageProcessor that is backed by CameraX library: // https://developer.android.com/training/camerax CameraXImageProcessorSource imageProcessorSource = new CameraXImageProcessorSource( this /*context*/, this /*lifecycleOwner*/ ); imageProcessorSource.startPreview(true /*cameraFacingFront*/); cameraKitSession = Sessions.newBuilder(this) .imageProcessorSource(imageProcessorSource) .attachTo(findViewById(R.id.camerakit_stub)) .build(); } ``` ### 擷取並套用鏡頭您可以在 [Camera Kit Developer Portal](https://camera-kit.snapchat.com/) 的輪播中設定並訂購鏡頭： #### Java ``` // Fetch lenses from repository and apply them // Replace LENS_GROUP_ID with Lens Group ID from https://camera-kit.snapchat.com cameraKitSession.getLenses().getRepository().get(new Available(LENS_GROUP_ID), available -> { Log.d(TAG, "Available lenses: " + available); Lenses.whenHasFirst(available, lens -> cameraKitSession.getLenses().getProcessor().apply(lens, result -> { Log.d(TAG, "Apply lens [" + lens + "] success: " + result); })); }); ``` 若要廣播，請將已處理的影格傳送至自訂影像來源的基礎 `Surface`。使用 `DeviceDiscovery` 物件並建立 `CustomImageSource` 來回傳 `SurfaceSource`。然後，您可以將 `CameraKit` 工作階段的輸出轉譯至由 `SurfaceSource` 提供的基礎 `Surface`。 #### Java ``` val publishStreams = ArrayList() val deviceDiscovery = DeviceDiscovery(applicationContext) val customSource = deviceDiscovery.createImageInputSource(BroadcastConfiguration.Vec2(720f, 1280f)) cameraKitSession.processor.connectOutput(outputFrom(customSource.inputSurface)) val customStream = ImageLocalStageStream(customSource) // After rendering the output from a Camera Kit session to the Surface, you can // then return it as a LocalStageStream to be published by the Broadcast SDK val customStream: ImageLocalStageStream = ImageLocalStageStream(surfaceSource) publishStreams.add(customStream) @Override fun stageStreamsToPublishForParticipant(stage: Stage, participantInfo: ParticipantInfo): List = publishStreams ```